Vue 3输入类型“范围”鼠标拖动冻结显示“不允许”光标答案

【问题标题】：Vue 3 input type "range" mouse drag freezes shows "not-allowed" cursorVue 3输入类型“范围”鼠标拖动冻结显示“不允许”光标
【发布时间】：2021-11-26 06:10:06
【问题描述】：

当v-model 用于绑定一个状态时，我在 Vue 3 中遇到了一个带有 html <input type="range"> 元素的错误。

它不会一直发生，但是在单击并拖动滑块输入后，最终会出现拖动范围滑块的手柄停止工作并且鼠标光标变为“禁止”图标的时间，类似于cursor: not-allowed 带有一条线的圆圈。在 Windows 10 上使用 Chrome。

我已经能够在两个不同的 Vue 应用程序中重现它。一个使用选项 API，另一个使用组合 API。

示例代码：

//app.js
<template>
  <div id="app">
    <input type="range" v-model="range" />

    {{ range }}
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      range: "5",
    };
  },
};
</script>

有什么解决办法吗？解决方案？

编辑：

显然它不一定非要在 Vue 中才能获得这种行为。在下面的 sn-p 中，如果您在范围滑块周围的区域单击并拖动鼠标几次，可以观察到它 - 好像要突出显示它，例如突出显示一行文本。在它变为“突出显示”后（尽管没有视觉指示），它不再可用，并且您在尝试通过拖动设置新值时会看到错误图标光标。

&lt;input type="range"&gt;

【问题讨论】：

可能与其他事情有关。孤立起来似乎很好jsfiddle.net/fqhgsamt/2
在您的小提琴上进行测试后，我能够重现它，并且我有一个关于原因的理论。我认为在尝试抓住手柄的过程中，如果我错过了，而是最终选择或突出显示范围选择器（因为人们会在浏览器中突出显示一个单词或字符），那就是它中断的时候。它是不可见的，但我很确定它已被选中。认为它可能正在尝试激活浏览器拖动事件。要重现，请按下鼠标按钮在范围选择器周围“绘制”一个不可见的框，然后尝试拖动句柄。
@Daniel 你似乎是对的，它与 Vue 无关。我可以在普通 HTML 上下文中获得相同的行为。
镀铬扩展????‍♂️?

标签： javascript vuejs3 v-model

【解决方案1】：

经过进一步测试，发现这个错误与 vue 无关，而是出现在 Chrome 中的所有 <input type="range"> html 元素上。

我设计了一种解决方法来避免不良行为。

//app.js
<template>
  <div id="app">
    <input type="range" v-model="range" @mousedown="removeRanges" />

    {{ range }}
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      range: "5",
    };
  },
  methods: {
    removeRanges() {
      window.getSelection().removeAllRanges();
    },
  },
};
</script>

【讨论】：