使用js获取选中的dom元素 并改变选中(有序dom)的状态

一个效果图,一段代码, 就这样吧。

html 复制代码
 <template>
  <!-- <el-checkbox v-model="">开启双向</el-checkbox> -->
  <div
    ref="checkListRef"
    @mouseup="mouseupCon"
    @mousedown="mousedownCon"
    @mouseover="mouseoverCon"
    @mouseout="mouseoutCon"
  >
    <el-checkbox-group v-model="checkedList" class="user-select-auto">
      <el-checkbox
        v-for="(item, i) in checkArr"
        :key="item.id"
        :label="item.value"
        class="m-4"
        :data-index="i"
        @mouseover.native="mouseoverItem"
      ></el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
const checkArr = new Array(200).fill(null).map((_, i) => {
  return {
    id: i,
    value: i,
    lable: i,
    checked: false,
  }
})
export default {
  data() {
    return {
      checkArr,
      checkedList: [],
      isOver: false, // 是否在容器
      isDown: false, // 是否在容器按下状态
    }
  },
  methods: {
    mousedownCon(val) {
      // console.log('mousedownCon', val)
      this.isDown = true
    },
    mouseupCon(val) {
      // console.log('mouseupCon', val)
      if (this.isDown === false || this.isOver === false) {
        return
      }
      const sel = window.getSelection()
      console.log(sel)
      const { anchorNode, extentNode } = sel
      if (!anchorNode || !extentNode) {
        return
      }
      const { startIndex, endIndex } = this.getSEIndex(anchorNode, extentNode)
      this.setChecked(startIndex, endIndex)
      console.log(startIndex, endIndex)
      this.isDown = false
      window.getSelection().removeAllRanges()
    },
    getSEIndex(anchorNode, extentNode) {
      let startDom = anchorNode
      let endDom = extentNode
      if (extentNode.classList && extentNode.classList.contains('el-checkbox__input')) {
        endDom = extentNode.parentElement
      } else if (extentNode.nodeName === '#text') {
        endDom = extentNode.parentElement.parentElement
      }
      if (anchorNode.classList && anchorNode.classList.contains('el-checkbox__input')) {
        startDom = anchorNode.parentElement
      } else if (anchorNode.nodeName === '#text') {
        startDom = anchorNode.parentElement.parentElement
      }

      let startIndex = Number(startDom.dataset.index)
      let endIndex = Number(endDom.dataset.index)
      if (parseInt(startIndex) > parseInt(endIndex)) {
        const temp = endIndex
        endIndex = startIndex
        startIndex = temp
      }
      return { startIndex, endIndex }
    },
    setChecked(startIndex, endIndex) {
      for (let i = startIndex; i < endIndex + 1; i++) {
        const ind = this.checkedList.findIndex(x => {
          return this.checkArr[i].id === x
        })
        if (ind > -1) {
          this.checkedList.splice(ind, 1)
        } else {
          this.checkedList.push(this.checkArr[i].id)
        }
      }
    },
    mouseoutCon(val) {
      // console.log('mouseoutCon', val)
      this.isOver = false
    },
    mouseoverCon() {
      this.isOver = true
    },
    mouseoverItem(val) {
      // this.isOver = true
      // console.log('mouseoverItem', val)
      // const sel = window.getSelection()
      // console.log(sel)
    },
  },
}
</script>
<style lang="less">
.el-checkbox {
  user-select: auto;
}
.user-select-none {
  user-select: none;
}
.user-select-auto {
  user-select: auto;
}
.el-checkbox__input {
  user-select: none;
}
.el-checkbox-group::selection {
  background-color: #fff;
  color: #206ef7;
}
.el-checkbox__label::selection {
  background: #fff;
  color: #206ef7;
}
</style>
相关推荐
打不着的大喇叭2 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
liulilittle7 分钟前
C++ i386/AMD64平台汇编指令对齐长度获取实现
c语言·开发语言·汇编·c++
Sun_light26 分钟前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子28 分钟前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
百锦再29 分钟前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
优雅永不过时_v38 分钟前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
Thomas_YXQ40 分钟前
Unity URP法线贴图实现教程
开发语言·unity·性能优化·游戏引擎·unity3d·贴图·单一职责原则
WildBlue41 分钟前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
啷咯哩咯啷1 小时前
Vue3构建低代码表单设计器
前端·javascript·vue.js
凌览1 小时前
斩获 27k Star,一款开源的网站统计工具
前端·javascript·后端