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>