vue 日常开发小细节

1. element-ui 日期选区禁用，设置属性

disabledDate: (time) => {
const curDate = (new Date()).getTime()
const day = 10 * 24 * 3600 * 1000
const dateRegion = curDate + day
return time.getTime() < curDate - 24*3600*1000 ||
time.getTime() > dateRegion
}

2.  vue - filter

使用 export 导入公用 js    export { parseTime, formatTime , zero} from '@/utils'

import * as filters from './filters'

Object.keys(filters).forEach(key => {

  Vue.filter(key, filters[key])

})

一举两得 ： 管道写法 + require js 直接使用 函数

3.  四舍五入    Math.Round()  &&  Number.toFixed()

Math.Round()   *10 - /10 精度ok    -》number

Number.toFixed()   输出字符串，精度不准，五舍六入 （精确位前为奇数）、四舍五入 （精确位前为偶数）

4. element-ui 文件上传  -  自动覆盖 、 文件上传过程中 钩子函数失效

上传成功 -  修改 传参  fileList，长度大于2 - 截取

去掉 mock。js  -  修复文件上传过程中  钩子失效问题

5.  vue-photo-preview 预览失效问题

预览 -   空数据 -》有数据 预览失效  （ 低版本 vue-photo-preview ， 不使用此控件，自定义悬浮框实现 ）

6. css  calc 样式 引起的不停闪动问题 （自动计算 ， 修复：使用定高/换种效果）

7.  页面传参

1. url 显示参数 path - query
this.$router.push({ path: '/systemSetting/editUser', query: { id: id }})
this.$route.query.id
2. url 不显示参数 name - params
this.$router.push({ name:'addUser', params: { id: id }})
this.$route.params.id
3. url 显示参数
this.$router.push({ path: `/describe/${id}` })
路由配置（路径加指定参数） { path: '/describe/:id', name: 'Describe', component: Describe }
this.$route.params.id

8.  获取 dom

<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>

9.  encodeURIComponent(test1)   decodeURIComponent(test1)

10.  redirect  路由重定向 （存在，其他跳转路由都无效）

$route.redirectedFrom 如果存在重定向，即为重定向来源的路由的名字

11.  new Date() 兼容性

new Date() 无兼容性 new Date（时间戳） 无
new Date('Wed Oct 16 2019 16:08:09 GMT+0800') 无 ‘/’连接的 无
new Date（‘2018-8-8’）有 ‘-’链接的有
var d=new Date(); var n=d.toISOString(); 2019-09-18T06:29:12.531Z

12.  key 值重复 - 页面卡死问题

key 值重复（ 开发环境 error 提示 ） - 生产环境打包 - 错误难分 + 导航跳转失败

13.  高亮  highlight-current-row

14.  表头样式  :header-cell-style="{'background-color':'#ccc'}"

15.  溢出悬浮   :show-overflow-tooltip="true"

16 .  插槽

<template slot-scope="scope">{{ scope.row.orderNo }}</template>

17.  宏微队列

this.multipleSelectionFeeItem = [];
this.$nextTick(() => {}） 使用紧随 v-if、v-show 其后 （执行队列小间隙）

18.  axios 模板

axiosTest(){
axios.post('http://10.31.1.125:10082/msg/api/sendMessageWeb', {
app:this.noticeForm.plantCode,
createUser:this.userName,
createUserCode:this.depCode,
// extCode:'',
msgContent:this.noticeForm.msgContent,
phoneNumber:this.noticeForm.phoneNumber,
arr:[1,2,3]
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
},

19.  value没有冒号，说明是字符串，只要给前面加上冒号就行了

20.  路由跳转

myvue.$router.push('/repayManage/bindCard')

21 设置复选

selectedTable(arr){
var that=this;
arr.forEach(function(val,index){
that.$refs.multipleTableFree.toggleRowSelection(that.tableDataFee[val],true);
})
},