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')

 

上一篇:Fiddler手机端抓包环境设置与过滤(二)


下一篇:Spring Cloud Gateway 3 内置Filter