解决vue pointerevent事件无法更改cursor问题 抓取图标(grab/grabbing)_vue2 template 方法返回pointerevent

vue pointerevent事件无法更改cursor问题

告诉你一个扎心的事情,Ctrl+F5就好了…
另外开F12调试工具且在双屏的副屏上也会出现这个bug…

故障重现

我想要实现一个抓取拖放的功能,鼠标按下修改指针为gragbbing状态,抬起恢复到grab
于是我大概和你一样,尝试在pointdown事件里写修改css或者style,甚至添加自定义属性利用css选择器实现,但是总有bug不更新指针…

于是我开始怀疑浏览器有问题,于是在firefox上试了好用…
我甚至都想反馈bug给chrome了…

但是无意间打开了一个别人的案例,发现居然tmd好使…
https://www.zhangxinxu.com/study/201412/cursor-grab-grabbing.html

不瞒你说,当时我就炸了
随手一个Ctrl+F5,奇迹发生了
好…用了…

<template>
        <div ref="dragBar" @pointerdown="onDragBarDown" @pointermove="onDragBarMove"
            @pointerup="onDragBarUp" @pointercancel="onDragBarUp">
        </div>
</template>
<script setup lang="ts">
import { ref, Ref, onMounted, onUnmounted } from "vue"
const dragBar: Ref<HTMLElement | undefined> = ref()

function onDragBarDown(e: PointerEvent) {
    if (dragBar.value) dragBar.value.style.cursor = "grabbing";
}
function onDragBarMove(e: PointerEvent) {
}
function onDragBarUp(e: PointerEvent) {
    if (dragBar.value) dragBar.value.style.cursor = "grab";
}


</script>
<style lang="less">
//省略...
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23