工作实际排坑之旅

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq892765518/article/details/81220110

vue中的回车事件

vue使用element-ui的el-input监听不了键盘事件,原因应该是element-ui自身封装了一层div在input标签外面,把原来的事件隐藏了,情况如下:

直接使用标签:

  <input placeholder="账号" @keyup.enter="doLogin"></input>

element-ui: 

  <el-input v-model="name" placeholder="账号" @keyup.enter.native="doLogin"></el-input>

如果你使用了form表单 使用 @keyup.enter.native="doLogin" , 

两个el-input 键盘事件有效, 如: 

<el-form>

  <el-form-item prop="username">

    <el-input name="username" type="text" autoComplete="on" placeholder="邮箱" />

  </el-form-item>

  <el-form-item prop="password">

    <el-input name="password" type="password" @keyup.enter.native="handleLogin"  autoComplete="on" placeholder="密码"></el-input>

  </el-form-item>

  <el-form-item>

    <el-button type="primary"  @click.native.prevent="handleLogin">登录</el-button>

  </el-form-item>

</el-form>

如果只有一个el-input , 则无效, 需加上@submit.native.prevent才有效,阻值冒泡,默认事件,  如: 

<el-form  @submit.native.prevent>

  <el-form-item>

    <el-input  placeholder="请输入内容" @keyup.enter.native="submitImage"></el-input>

  </el-form-item>

</el-form>

 

js中判断数组中是否包含某元素的方法

方法一: 
arr.indexOf(某元素):未找到则返回 -1。 

indexOf()完整语法:

array.indexOf(item,start) 
参数: 
item:必须。查找的元素。 
start:可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索

注:string.indexOf()返回某个指定的字符串值在字符串中首次出现的位置。

方法二:arr.find() 
数组实例的find()用于找出第一个符合条件的数组元素。它的参数是一个回调函数,所有数组元素依次遍历该回调函数,直到找出第一个返回值为true的元素,然后返回该元素,否则返回undefined。 
find() 方法为数组中的每个元素都调用一次函数执行

  • 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
  • 如果没有符合条件的元素返回 undefined 
    注意: find() 对于空数组,函数是不会执行的。 
    注意: find() 并没有改变数组的原始值。
[1, 5, 10, 15].find(function(value, index, arr) {
    return value > 9;
}) // 10

实际用法:

arr.find(function(value) {
    if(value === 要查找的值) {
        //则包含该元素
    }
})

方法三:array.findIndex() 
array.findIndex()和array.find()十分类似,返回第一个符合条件的数组元素的位置,如果所有元素都不符合条件,则返回-1。 
findIndex() 方法为数组中的每个元素都调用一次函数执行:

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。 
如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组,函数是不会执行的。 
注意: findIndex() 并没有改变数组的原始值

[1,5,10,15].findIndex(function(value, index, arr) {
    return value > 9;
}) // 2

方法二和方法三,这两个方法都可以发现NaN,弥补了方法一IndexOf()的不足。

[NaN].indexOf(NaN) 
// -1

[NaN].findIndex(y => Object.is(NaN, y))
// 0

方法四:for() 
遍历数组,然后 if 判断

var arr = [1, 5, 10, 15];
//传统for
for(let i=0; i<arr.length; i++) {
    if(arr[i] === 查找值) {
        //则包含该元素
    }
}
// for...of
for(v of arr) {
    if(v === 查找值) {
        //则包含该元素
    }
}
//forEach
arr.forEach(v=>{
    if(v === 查找值) {
        //则包含该元素
    }
})

方法五: ES6中的includes()

VUE中动画的实现

在要触发的DOM元素外用<transition name="name"></transition>包裹

在CSS中加入动画 .name-enter-active, .name-leave-active, .name-enter, .name-leave-to

涉及到v-if,v-show的区别,详见文档https://cn.vuejs.org/v2/guide/transitions.html


阻止冒泡,默认行为的方法

方法一  @click改为@click.stop

方法二 在不想触发的区域内获得id在方法内

            if (!id.contains(event.target)) { console.log('不继续向上触发')}

方法三 不想点击时冒泡触发上面的默认动作在DOM上加入 @mousedown = "preventDefault"

preventDefault () { // 防止冒泡,避免在click前会触发blur
    event.preventDefault();
},

 

无法修改Element-UI 

去掉style上的scoped,在vue组件中,在style标签上添加scoped属性,以表示它的样式作用于当下的模块,很好的实现了样式私有化的目的

解决方案:vue-loader之scoped-css


 

返回顶部

返回顶部是

 document.body.scrollTop = 0

但是当想要下拉并不是整个页面而是其中一部分返回顶部时,可以通过event.path来寻找需要返回顶部的DOM元素,操控DOM元素的scrollTop属性等于0 即可返回顶部


H5界面,手机物理回退问题

需要在mouted中加入判断window.history时,进入自己的函数

if (window.history && window.history.pushState) {
    history.pushState(null, null, document.URL);
    window.addEventListener('popstate', this.fun, false);
 }


fun () {
    this.$router.push({name: 'workIndex'});
}

JS中小数相乘精度不准确

由于进制问题导致的小数相乘精度不准确,eg:

let a = 0.00001;
let b = 0.00002;
let c = 0.00003;
a + b === c //false

解决办法

function accMul(arg1,arg2){
         var m=0,s1=arg1.toString(),s2=arg2.toString();
         try{m+=s1.split(".")[1].length}catch(e){}
         try{m+=s2.split(".")[1].length}catch(e){}
        
         return (Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)).toFixed(2);
    }

VUE中给后台传参进行excel导出

使用第三方库axios。

axios({ // 用axios发送post请求
                    method: 'post',
                    url: '/erp/api/officesupply-activiti-apply/export', // 请求地址
                    data: this.downloadList, // 参数
                    responseType: 'blob' // 表明返回服务器返回的数据类型
                })
                    .then((res) => { // 处理返回的文件流
                        const content = res.data;
                        const blob = new window.Blob([content], {type: 'application/octet-binary'});
                        const fileName = `${this.officeForm.id}号办公用品采购表单.xls`;
                        if ('download' in document.createElement('a')) { // 非IE下载
                            const elink = document.createElement('a');
                            elink.download = fileName;
                            elink.style.display = 'none';
                            elink.href = window.URL.createObjectURL(blob); 
                            document.body.appendChild(elink);
                            elink.click();
                            window.URL.revokeObjectURL(elink.href); // 释放URL 对象
                            document.body.removeChild(elink);
                        } else { // IE10+下载
                            navigator.msSaveBlob(blob, fileName);
                        }
                    });

 

 

 

 

 

 

 

 

 

展开阅读全文

没有更多推荐了,返回首页