Element UI隐藏table滚动条
Element UI隐藏table滚动条
当table内容列过多时,可通过height属性设置table高度以固定table高度、固定表头,使table内容可以滚动 现在需要去除滚动条 CSS /deep/.el-table__body-wrapper { &::-webkit-scrollbar { // 整个滚动条 width: 0; // 纵向滚动条的宽度 background: rgba(213,215,220,0.3); border: none; height: 0; } &::-webkit-scrollbar-track { // 滚动条轨道 border: none; } }
 2023-1-7
vue实现打印及导出
vue实现打印及导出
安装命令: npm i vue-to-pdf --save npm i vue-easy-printer --save 绑定事件 <div id="exportPdf" ref="exportPdf"> </div> <input type="button" @click="printPdf">打印</input> <input type="button" @click="savePdf" >导出(pdf)</input> savePdf(){ this.$PDFSave(this.$refs.exportPdf, "我的文件"); }, printPdf(){ this.$easyPrint(\'exportPdf\',"我的文件",\'portrait\'); } 另外一个打印安装 npm install vue-print-nb --save 全局注册 import Print from 'vue-print-nb' Vue.use(Print); 使用 用v-print指定需要打印的div容器,本次叫printTest。 最好使用行内样式,使用组件库部分样式可能不能生成。 <div id="printTest" > <p>锄禾日当午</p>       <p>汗滴禾下土 </p>       <p>谁知盘中餐</p>       <p>粒粒皆辛苦</p>     </div>     <button v-print="'#printTest'">打印</button> 不打印区域 <div class="no-print">不要打印我</div>
 2023-1-7
Css标题样式美化
Css标题样式美化
效果 今天在写Emlog百度小程序的时候发现原来的标题样式太丑了,简简单单改一下吧,本文代码可直接放在brief网站主题里面。 before伪元素选择器 :before是css中的一种伪元素,可用于在某个元素之前插入某些内容。 代码实现 先整体设置 h1,h2,h3,h4,h5,h6{ position: relative; padding-bottom: 8px; } h1:before,h2:before,h3:before,h4:before,h5:before,h6:before{ width: 40px; height: 3px; position: absolute; content: ''; top: auto; left: 0; bottom: 3px; border-radius: 3px; transition: 4s; } 然后单个设置颜色 h1:before{ background-image:linear-gradient(to right ,green,rgb(4, 46, 4)); box-shadow: 1px 1px 3px -1px green; } h2:before{ background-image:linear-gradient(to right ,#f17c67,#971903); box-shadow: 1px 1px 3px -1px #f17c67; } 这两个时示例其他的需要你自己添加 获取完整代码 如果您的网站主题是brief可直接替换markdown.css文件 文件地址: https://www.hkiii.cn/content/templates/brief/css/markdown.css
 2022-12-30
nginx配置跨域
nginx配置跨域
跨域 web 领域开发中,经常采用前后端分离模式。这种模式下,前端和后端分别是独立的 web 应用程序,例如:后端是 Java 程序,前端是 React 或 Vue 应用。 各自独立的 web app 在互相访问时,势必存在跨域问题。解决跨域问题一般有两种思路: CORS 在后端服务器设置 HTTP 响应头,把你需要运行访问的域名加入加入 Access-Control-Allow-Origin 中。jsonp 把后端根据请求,构造 json 数据,并返回,前端用 jsonp 跨域。这两种思路,本文不展开讨论。需要说明的是,nginx 根据第一种思路,也提供了一种解决跨域的解决方案。 nginx配置跨域 宝塔配置方法:打开网站设置-配置文件-在合适地地方加入以下配置 add_header 'Access-Control-Allow-Origin' '$http_origin' ; add_header 'Access-Control-Allow-Credentials' 'true' ; add_header 'Access-Control-Allow-Methods' 'PUT,POST,GET,DELETE,OPTIONS' ; add_header 'Access-Control-Allow-Headers' 'Content-Type,Content-Length,Authorization,Accept,X-Requested-With' ; 大功告成,跨域问题就这么解决了,相对于前端解决跨域,这个方法就简单快捷多了
 2022-12-28
Vuex使用方法
Vuex使用方法
一、Vuex简述 Vuex其实就是一个状态管理工具,所谓的状态,就是数据,通过这个工具进行管理某些数据。当多个组件都需要同一个数据时,可以将这个数据交给Vuex进行统一的管理,组件可以直接引用这个数据,避免了组件间繁琐的层层传递的情况。 二、Vuex核心 Vuex有五大核心,state,getter,mutation,action,module。state用来存放要被管理的数据,getter相当于computed计算属性,mutation中用来定义要修改state中数据的方法,action中用来定义异步的一些方法,module可以将多个store分成一个一个的模块。 三、Vuex使用 在vue项目中使用Vuex时,需要先安装Vuex插件,并且注册,一般情况下都会在,在src下新创建一个store文件夹,下边有一个index.vue,在这个文件中创建store容器实例.。 安装插件 npm install vuex --save 注册插件 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) 创建vuex实例,在vuex上提供了一个Store()方法,用来创建实例,将其命名为store,意为仓库的意思。在Vuex.Store()中传一个配置对象,配置对象中包括上述的五大核心,如果用不到,也可以不做配置。 const store = new Vuex.Store({ state: {num: 2}, // 存放数据 getters: {}, // 计算属性 mutations: {}, // 修改state中数据的一些方法 actions: {}, // 异步方法 modules: {} // store模块 }) export default store 在入口文件main.js中引入store。 // main.js import Vue from 'vue' import App from './App' import store from './store/index.vue' // 简写 import store from './store' Vue.config.productionTip = false new Vue({ el: '#app', store: store, // es6 简写 直接写 store 属性名和变量名相同 render: h => h(App) }) 在页面中如何使用store中的数据?在使用vuex中的数据之前,先使用import导入写好的store。组件中在插值表达式中使用$store.state.num获取store中num的数据。 {{ $store.state.num }} 四、mapState,mapMutations,mapGetters,mapActions映射 // 先从vuex中结解构出四个方法 import {mapState, mapMutations, mapGetters, mapActions} from 'vuex' // 在computed计算属性中映射state数据和getters计算属性 computed: { ...mapState('模块名', ['name', 'age']) ...mapGetters('模块名', ['getName']) } // 在methods方法中映射mutations和actions方法 methods: { ...mapMutations('模块名', ['方法名1','方法名2']) ...mapActions('模块名', ['方法名1','方法名2']) } 这些数据和方法都可以通过this来调用和获取 以上就是vuex大致的使用方法 作者:辰漪 链接:https://www.jianshu.com/p/dcbaceb4464e
 2022-12-26
Brief主题解决内容过多图片宽度被压缩
Brief主题解决内容过多图片宽度被压缩
有问题的样子 建议直接翻到文章尾部下载最新的CSS文件 修改bug 在style.css第216行改成即可 .content-img { width: 35%; height: 150px; padding: 10px; flex-grow: 0; flex-shrink: 0; } 然后在第246行添加 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; 第256行 .content-list-cz-phone { width: 60%; flex-direction: column; padding: 10px 5px 5px 5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } 也可以直接下载css文件替换 下载地址:https://www.hkiii.cn/content/templates/brief/css/style.css
 2022-12-23
Vue分页之Element UI触底加载
Vue分页之Element UI触底加载
实现后的效果 el-scrollbar触底加载数据 先绑定ref 代码如下: <el-scrollbar ref="scrollbar" v-loading="fullscreenLoading"> <!--对于自定义指令v-loading,只需要绑定Boolean即可。默认状况下,Loading 遮罩会插入到绑定元素的子节点,通过添加body修饰符,可以使遮罩插入至 DOM 中的 body 上。--> </el-scrollbar> 在mounted生命周期渲染方法 mounted() { this.scrollbar(); //el-scrollbar触底事件 }, 最后写一个方法 scrollbar() { this.$refs.scrollbar.handleScroll = () => { var wrap = this.$refs.scrollbar.wrap; this.$refs.scrollbar.moveY = (wrap.scrollTop * 100) / wrap.clientHeight; this.$refs.scrollbar.moveX = (wrap.scrollLeft * 100) / wrap.clientWidth; let poor = wrap.scrollHeight - wrap.clientHeight; if ( poor == parseInt(wrap.scrollTop) || poor == Math.ceil(wrap.scrollTop) || poor == Math.floor(wrap.scrollTop) ) { console.log("已经触底了"); } }; },
 2022-12-22

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录