vue实现点击选中以下内容按钮选中按钮位置以下的所有数据项

原创

已于 2024-06-18 18:13:18 修改 · 502 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端 #选择以下内容

于 2024-05-07 14:58:04 首次发布

1、预期效果

该需求的由来，是公司的产品为了实现如飞书这款应用中，IM聊天界面多选消息时一个快捷选择消息的操作功能。

2、实现思路

1. 使选择按钮悬浮在列表试图上方；

2. 在鼠标按下按钮时在其样式添加 pointer-events: none 使鼠标点击释放后事件穿透到按钮下方的元素，以此取得该元素信息；

3. 触发后再将按钮恢复到 pointer-events: none 的状态。

由此，当数据项触发 mouseup 事件时可通过判断触发时 pointer-events 是否为 none ，即可得知是通过选择按钮触发，还是直接点击数据项触发。

3、核心代码

<script setup lang="ts">
import { ref } from 'vue';

const multipleLineRef = ref<any>(null);
const list = ref<any[]>([]);
// 测试数据
for (let i = 0; i < 20; i++) {
  list.value.push({ id: i + 1, name: `选项${i + 1}` });
}
  // 点击选择以下内容按钮穿透
function onMessageMouseup(item: any, index: number) {
  if (multip