使用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>
相关推荐
dlraba80213 分钟前
用 Python+OpenCV 实现实时文档扫描:从摄像头捕捉到透视矫正全流程
开发语言·python·opencv
芒果茶叶21 分钟前
并行SSR,SSR并行加载
前端·javascript·架构
一人の梅雨1 小时前
1688 店铺商品全量采集与智能分析:从接口调用到供应链数据挖掘
开发语言·python·php
小何好运暴富开心幸福1 小时前
C++之日期类的实现
开发语言·c++·git·bash
威风的虫1 小时前
JavaScript中的axios
开发语言·javascript·ecmascript
老赵的博客1 小时前
c++ 是静态编译语言
开发语言·c++
Terio_my1 小时前
Python制作12306查票工具:从零构建铁路购票信息查询系统
开发语言·python·microsoft
bot5556661 小时前
“企业微信iPad协议”静默 72 小时:一台被遗忘的测试机如何成为私域的逃生梯
javascript·面试
西洼工作室2 小时前
浏览器事件循环与内存管理可视化
前端·javascript·css·css3
消失的旧时光-19432 小时前
Kotlin when 用法完整分享
android·开发语言·kotlin