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}` });
}
  // 点击选择以下内容按钮穿透
function onMessageMouseup(item: any, index: number) {
  if (multipleLineRef.value?.style?.pointerEvents === 'none') {
    list.value.slice(index).forEach(citem => {
      citem.checked = true;
    })
    multipleLineRef.value.style.pointerEvents = 'auto';
  }
  else {
    item.checked = !item.checked;
  }
}
</script>

<template>
  <div class="page-box">
    <div ref="multipleLineRef" class="multiple-box">
      <div class="multiple-btn" @mousedown="multipleLineRef.style.pointerEvents = 'none'">选择以下内容</div>
      <div class="multiple-line" />
    </div>
    <div class="list-box">
      <div v-for="(item, index) in list" :key="item.id" class="list-item" @mouseup.stop="onMessageMouseup(item, index)">
        {{ item.name }}：{{ item.checked ? '选中' : '未选中' }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-box {
  position: relative;
  width: 750px;
  height: 750px;
  background-color: #f5f5f5;
}
.multiple-box {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 100px;
  z-index: 2;
}
.multiple-btn {
  position: absolute;
  left: 20px;
  top: 0;
  background-color: #eee;
  border: 1px solid #BBBFC4;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 30px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}
.multiple-line {
  height: 1px;
  width: 100%;
  background-color: red;
  margin-top: 15px;
}
.list-box {
  height: 750px;
  overflow-y: auto;
}
.list-item {
  padding: 30px;
  border-bottom: 1px solid #eee;
}
</style>