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

news2024/11/28 13:29:44

一个效果图,一段代码, 就这样吧。
在这里插入图片描述

 <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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1096454.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【MySQL】深入了解索引的底层逻辑结构

文章目录 主键排序一. InnoDB的索引结构1. 单个page2. 多个page 二. 为什么选择B树三. 聚簇索引和非聚簇索引结束语 主键排序 我们创建一个user表&#xff0c;并乱序插入数据 mysql> create table if not exists user(-> id int primary key,-> age int not null,-&…

【AI视野·今日NLP 自然语言处理论文速览 第五十四期】Fri, 13 Oct 2023

AI视野今日CS.NLP 自然语言处理论文速览 Fri, 13 Oct 2023 Totally 75 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers Tree-Planner: Efficient Close-loop Task Planning with Large Language Models Authors Mengkang Hu, Yao M…

比特听命:补码的产生过程与整数在计算机中的存储

文章目录 参考环境声明八位二进制加法器八进制数值 原码概念正负数与零正数与负数的运算 反码概念一步之遥 补码概念唯一的零加法运算 补码的优缺点优点简化算术运算一眼辨别正负性运算过程中无需对符号位进行处理 缺点不易阅读 参考 项目描述搜索引擎Bing、GoogleAI 大模型文…

c#设计模式-行为型模式 之 访问者模式

&#x1f680;简介 封装一些作用于某种数据结构中的各元素的操作&#xff0c;它可以在不改变这个数据结构的前提下定义作用于这些元素的新的操作。 访问者模式包含以下主要角色 : 抽象访问者&#xff08;Visitor&#xff09;角色&#xff1a;定义了对每一个元素 &#xff08;E…

英语——语法——从句——句型和句子成分——笔记

老师导言&#xff1a;易于理解。 三种句型&#xff1a;1、主系表&#xff1b;2.主谓*&#xff1b;3.there be 句型&#xff1a;句子构成的形式。句子用于相互沟通&#xff0c;需要表达自己意思&#xff0c;句子中就存在一个主语&#xff0c;一般对主语&#xff08;主要描述对象…

4.Mask R-CNN/YOLOV8/RTMDET三种实例分割方法推理逻辑对比

文章目录 Mask R-CNN/YOLOV8/RTMDET三种实例分割方法推理逻辑对比Mask R-CNNYOLOV5/8实例分割方法RTMDet中的实例分割 欢迎访问个人网络日志&#x1f339;&#x1f339;知行空间&#x1f339;&#x1f339; Mask R-CNN/YOLOV8/RTMDET三种实例分割方法推理逻辑对比 实例分割是同…

CLIP模型原理与代码实现详解

文章目录 前言一、CLIP模型原理1.背景介绍2.对比训练方式3.prompt推理方式4.图像与文本编码结构5.特征CLS token结构vit划分patch原理cls token原理 二、CLIP环境安装1.官方环境安装2.CLIP环境安装3.CLIP运行结果 三.CLIP的Transformer结构代码解读四、CLIP模型主函数代码解读五…

相似性搜索:第 4 部分--分层可导航小世界 (HNSW)

SImilarity 搜索是一个问题&#xff0c;给定一个查询的目标是在所有数据库文档中找到与其最相似的文档。 一、介绍 在数据科学中&#xff0c;相似性搜索经常出现在NLP领域&#xff0c;搜索引擎或推荐系统中&#xff0c;其中需要检索最相关的文档或项目以进行查询。在大量数据中…

从0开始学go第八天

gin获取URL路径参数 package main//获取path&#xff08;URL&#xff09;参数 import ("net/http""github.com/gin-gonic/gin" )func main() {r : gin.Default()r.GET("/:name/:age", func(c *gin.Context) {//获取路径参数name : c.Param(&quo…

15 | JPA 对 Web MVC 开发者做了哪些支持

我们使用 Spring Data JPA 的时候&#xff0c;一般都会用到 Spring MVC&#xff0c;Spring Data 对 Spring MVC 做了很好的支持&#xff0c;体现在以下几个方面&#xff1a; 支持在 Controller 层直接返回实体&#xff0c;而不使用其显式的调用方法&#xff1b;对 MVC 层支持标…

如何通过Photoshop将视频转换成GIF图片

一、应用场景 1、将视频转有趣动图发朋友圈 2、写CSDN无法上传视频&#xff0c;而可以用GID动图替代 3、其他 二、实现步骤 1、打开Photoshop APP 2、点击文件——导入——视频帧到图层 3、选择视频文件 4、配置视频信息&#xff0c;按照图片提示配置完毕之后&#xff0c;…

gma 2.0.2 (2023.10.15) 更新日志

安装 gma 2.0.2 pip install gma2.0.2新增 0.1、矢量提取&#xff08;重要更新&#xff09; &#xff08;见简单示例&#xff09;   现在&#xff0c;你可以像 numpy 或 pandas 一样直接对 Layer 进行切片提取。 0.2、修改属性表&#xff08;重要更新&#xff09; &#xff…

数电第一次实验

四选一&#xff0c;信号选择器 三位4选1多路选择器 要求输入信号有4个&#xff0c;且每个信号宽3位 如果是直接根据选择信号选 选择的是信号&#xff0c;选择的是编号&#xff0c;与信号具体是什么内容无关&#xff0c;信号的内容与其是否被选择无关&#xff0c;信号的编号…

E034-服务漏洞利用及加固-利用CVE-2016-5195漏洞实现Linux系统本地提权

实验等级: 中级 任务场景: 【任务场景】 小王接到磐石公司的邀请&#xff0c;对该公司内部网络进行渗透测试&#xff0c;经过对局域网被操作系统进行全面的维护中&#xff0c;发现了一台内核版本为4.2.0-27的Linux服务器&#xff0c;低权限用户利用该漏洞技术可以在全版本L…

【笔记整理】软考-软件设计师

一、计算机系统 计算机基本单位 单位名称简称换算位bitb字节byteB1B8b千字节KB1KB1024B兆字节MB1MB1024KB吉字节GB1GB1024MB太字节TB1TB1024GB 带宽单位Mbps的b是指Bit&#xff08;位&#xff09; 速度单位MB/s的B是指Byte&#xff08;字节&#xff09; 1MB/s&#xff1d;8M…

Android 10.0 禁止弹出系统simlock的锁卡弹窗功能实现

1.前言 在10.0的系统开发中,在一款产品中,需要实现simlock锁卡功能,在系统实现锁卡功能以后,在开机的过程中,或者是在插入sim卡 后,当系统检测到是禁用的sim卡后,就会弹出simlock锁卡弹窗,要求输入puk 解锁密码,功能需求禁用这个弹窗,所以就需要看是 哪里弹的,禁用…

04-React脚手架

04-React脚手架 1. react脚手架入门 1).脚手架的介绍 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置&#xff08;语法检查、jsx编译、devServer…&#xff09;下载好了所有相关的依赖可以直接运行一个简单效果 react提供了一个用于创建rea…

R/d2及S/C4估计总体标准差,比较其CPK及规格限概率的差异

R/d2 和 S/C4 是用于估计总体标准差的无偏估计方法&#xff0c;通常用于控制图中。这些估计方法的主要目的是通过样本数据来估计总体标准差&#xff0c;以便监测过程的稳定性和变异性&#xff0c;而不需要收集整个总体的数据。 具体来说&#xff1a; R图中的 R/d2 和 S图中的…

【JAVA】有关包的概念

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️初识JAVA】 前言 Java包是用于组织和管理Java类的方式。它们提供了一种命名空间&#xff0c;以避免名称冲突&#xff0c;并使程序的组织更加有效和可维护。今天我们接着来学习有关包的概念。 包 …

faster lio 回环 加入GTSAM优化的记录

首先感谢这位博主的文章&#xff1a;https://blog.csdn.net/weixin_41281151/article/details/125371285&#xff0c;其中部分代码参考于改博主中的github&#xff1a; https://github.com/kahowang/FAST_LIO_SAM 不同的是&#xff0c;我使用的是faster lio进行更改&#xff0c…