项目中常见vue.js问题总结

一、表单校验

1. 0-100正整数不能以0开头并保留小数点后一位

pattern:/(^(\d|[1-9]\d)(\.\d{1})?$)|(^100$)/

2. 0-100正整数以0开头并保留小数点后一位

pattern:/(^(\d|0[0-9]\d)(\.\d{1})?$)|(^100$)/

3. 0-100正整数以0开头

pattern:/^(\d{1,3}|100)$/

二、vue.js

1. Vue按回车键进行搜索

参考文章:blog.csdn.net/weixin_4981…

<el-form
   @keyup.enter.native="handleSearchDatasetList" //这里要和搜索的事件名称一样
   @submit.native.prevent  //这句话禁止第一次进入页面回车搜索的时候刷新页面
   :model="tableQuery" label-width="80px" inline size="mini">
     <el-form-item>
        <el-button type="primary" @click="handleSearchDatasetList">搜索</el-button>
     </el-form-item>
 </el-form>
handleSearchDatasetList(){
	..... //搜索逻辑
}

2.vue-pdf解决浏览位置的缓存

在项目中使用vue-pdf时，在更换链接时，导致PDF还是停留在原先浏览的位置，造成体验不佳，我们的结局方案是在更换链接时让滚动条滚动到顶部，

setTimeout(()=>{ this.$refs.topicScroll.scrollTop = 0 },10)

如果遇到el-scrollbar时

this.$refs[topicScroll].wrap.scrollTop = 0

3.将阿拉伯数字处理成中文

export function dealChapterNumber(number) {
  if(!Number(number)) return;
  let unitsDigit = ["零","一", "二", "三", "四",  "五", "六", "七", "八", "九"];
  let secondDigits = ["", "十", "百", "千", "万"];
  let chapterArr = String(number).split("");
  let chapter = "";
  switch (chapterArr.length) {
    case 1:
      chapter = unitsDigit[Number(chapterArr[0])];
      break;
    case 2:
      for (let index in chapterArr.reverse()) {
        if(chapterArr[index] == 0) continue;
        chapter =`${chapterArr[1] == 1 && index == 1?'':unitsDigit[chapterArr[index]]}${ Number(chapterArr[index]) ? secondDigits[index] : "" }` + chapter;
      }
      break;
    default:
      for (let index in chapterArr.reverse()) {
        if (chapter.split("")[0] == "零" && !Number(chapterArr[index])) continue;
        chapter =`${unitsDigit[chapterArr[index]]}${ Number(chapterArr[index]) ? secondDigits[index] : "" }` + chapter;
      }
      break;
  }
  return chapter;
}

4.vue beforeRouterLeave和elementUI $confirm组合的问题

原文链接：blog.csdn.net/xuefeng1111…

setTimeout(() => {
    this.$confirm('确认退出编辑?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      next()
    }).catch(() => { })
  }, 16) // 最好不要设置为0，设置为0的时候火狐有问题

三、CSS

1. 禁用div点击

设置禁用

pointer-events：none;

解除禁用

pointer-events：'';

四、Javascript

1. 一个数组是否包含了另一个数组的全部元素

isContained (a, b) {
  const len = b.length;
  for (let i = 0; i < len; i++) {
      // 遍历b中的元素，遇到a没有包含某个元素的，直接返回false
      if (!a.includes(b[i])) return false;
  }
  // 遍历结束，返回true
  return true;
}
this.isContained(this.oldTreeCheck,currentCheckedKeys)