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

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}` });
}
  // 点击选择以下内容按钮穿透
fu