使用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>
相关推荐
运器12334 分钟前
【一起来学AI大模型】算法核心:数组/哈希表/树/排序/动态规划(LeetCode精练)
开发语言·人工智能·python·算法·ai·散列表·ai编程
gnip35 分钟前
markdown预览自定义扩展实现
前端·javascript
whoarethenext1 小时前
使用 C++ 实现 MFCC 特征提取与说话人识别系统
开发语言·c++·语音识别·mfcc
G等你下课1 小时前
AJAX请求跨域问题
前端·javascript·http
爱编程的喵1 小时前
JavaScript闭包深度解析:从作用域到实战应用
前端·javascript
ITfeib1 小时前
Flutter
开发语言·javascript·flutter
想躺平的咸鱼干2 小时前
Volatile解决指令重排和单例模式
java·开发语言·单例模式·线程·并发编程
雪碧聊技术2 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
Owen_Q2 小时前
Denso Create Programming Contest 2025(AtCoder Beginner Contest 413)
开发语言·算法·职场和发展
·云扬·2 小时前
【Java源码阅读系列37】深度解读Java BufferedReader 源码
java·开发语言