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

一、小Tips

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

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

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

          

            
            {{ item.name }}
          
          全选
     
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*/

二、原理学习

1.虚拟滚动原理
https://blog.csdn.net/superherooooss/article/details/128866887
2.当需要分列排版的时候，可以使用 columns属性，接收列数和宽度