23年9月-11月工作笔记整理（前端）-CSDN博客

本文链接：https://blog.csdn.net/qinsangdilvzhi/article/details/134708892

一、小Tips

1.this.refs获取不到的话，就使用this.$nextTick(()=>{})
2.提交代码的时候执行git commit–no-verift - m “提交备注”，就可以跳过代码检查
3.window.open()新打开页面跳转遇到权限问题为单独打开可以，通过这个方法打开不行
解决办法：<meta name = "referrer" content="no-referrer"/>
4.监听chart对象进行自适应缩放

//通过ResizeObserver监听chart的dom节点变化后调用缩放方法
   observerDom(chart) {
      new ResizeObserver(() => {
        chart.resize()
      }).observe(chart._dom)
    },

5.列表全选、半选、全不选的逻辑

<div>
          <div v-for="item in operaList" :key="item.name">
            <el-checkbox
              v-model="item.checked"
              @change="handleCheckedChange"
            ></el-checkbox>
            {{ item.name }}
          </div>
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
          ></el-checkbox
          >全选
     </div>
data(){
return{
   //选中列表
      checkedList: [],
      //半选
      isIndeterminate: false,
      //全选
      checkAll: false,
      //地块列表操作
      operaList: [
        { name: '地块1', checked: false },
        { name: '地块2', checked: false },
        { name: '地块3', checked: false },
        { name: '地块4', checked: false }
      ],
   }
}
methods:{
//列表选择
    handleCheckedChange() {
      let isAll = true
      //统计没被选的数量
      let count = 0
      this.operaList.forEach(item => {
        if (!item.checked) {
          isAll = false
          count++
        }
      })
      if (isAll) {
        //全选
        this.checkAll = true
        this.isIndeterminate = false
      } else if (count === this.operaList.length) {
        //全不选
        this.checkAll = false
        this.isIndeterminate = false
      } else {
        //半选
        this.checkAll = false
        this.isIndeterminate = true
      }
    },
    //地块列表全选
    handleCheckAllChange() {
      if (this.checkAll) {
        //全选
        this.operaList.forEach(item => {
          this.$set(item, 'checked', true)
        })
      } else {
        //全不选
        this.operaList.forEach(item => {
          this.$set(item, 'checked', false)
        })
      }
      this.isIndeterminate = false
    },
}

6.node-sass 替换为 sass
卸载 node-sass：npm uninstall node-sass
安装 sass：npm install sass --save-dev
全局搜索替换：/deep/ 替换为 ::v-deep
7.css选择前i个元素:nth-child(-n + i)、后i个元素:nth-child(n + i)
8.局部禁用eslint检查
禁用下一行/* eslint-disable-next-line*/
禁用整个文件 /* eslint-disable*/