以下内容是一些实际项目中遇到的很小的点,但却有很大帮助的代码。
1.vue+element ui中table
场景:table某个单元格内容太多,导致table行高不一致,页面不好看。
解决办法: <el-table-column :show-overflow-tooltip="true" prop="resource" label="文章来源">
关键代码::show-overflow-tooltip="true"
2.微信小程序input调起手机键盘问题
场景:小程序中自定义弹窗,并且弹窗中含有input,当用户触发input时,会导致手机自带虚拟键盘遮住input输入框。
解决办法:<input class='cover_input' type='text' value='' cursor-spacing='80'></input>
关键代码:cursor-spacing='80'
3.table圆角
场景:表格实现圆角,当整个表格颜色一致时,可以用border-radius属性,但现在需要table首行背景色不一致。
解决办法:加上一个overflow: hidden
属性就可以了
关键代码:overflow: hidden
4.pointer-events禁止点击
场景:想禁止部分$(“.rr”)元素click的点击事件。
解决办法:可以通过js动态给css加上一个pointer-events:none
属性就可以了
关键代码:pointer-events:none
2018.10.23更新
5.element table 自定义行高
场景:element table 中的行高固定修改不了,row-style="height:60px"
. 加上这个row-style属性就可以自由改变行高了。
6.vue 获取当前链接的参数
场景:vue项目中需要获取当前地址的参数,来做判断。this.$route.query.type
.这是取到type参数。关键词this.$route.query
7.vue在methods中调用公共函数
场景:methods中有大量耦合代码,可提炼出来。但按常规思路无法引用。this.$options.methods.test()
=> 调用test()函数.
2018.11.19更新
8.vue下拉菜单‘归零’
场景:el-select下拉菜单标签,默认是不能清除选项的,但我这边想清除为原始状态,怎么办呢?clearable
,加上这个属性就可以了。
9.vue不同子页面样式混乱
场景:由于子菜单页面可能有同样的class名,但是各个页面的class样式却不一致,来回切换子页面的时候,就会导致页面样式混乱。
解决办法:在style中加上scoped
属性即可,这个属性是css只在此页面生效。
10.vue引入公共的js函数
场景:后台系统多个子页面调用函数大同小异,想把公用代码整合成一个js文件然后在子页面调用就好。
解决办法:新建一个js文件 export default {test(){}}
然后在main.js中Vue.prototype.publicFn = Init
,最后在子页面中this.publicFn.test()
调用函数即可。
2018.12.18更新
11.vue 请求两次接口
场景:在network中总能看到请求同一个接口两次,可第一次啥参数都没传,其中Request Method:Option
解决办法:在main.js中加上 Vue.http.options.emulateHTTP = true; Vue.http.options.emulateJSON = true;
这两句,就ok啦