• vue 日常开发小细节 (element-ui 相关)


    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>

    <template slot-scope="{row}"> <img :src="row.fileAddress"  /> </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);
    })
    },

  • 相关阅读:
    学习Python第五天
    学习Python第三天
    Mongodb
    JMS links
    笔记整理
    a* products
    String
    business knowledge
    [Java coding] leetcode notes
    [Java Basics3] XML, Unit testing
  • 原文地址:https://www.cnblogs.com/justSmile2/p/11694437.html
Copyright © 2020-2023  润新知