Vue 3 输入类型 "range" 鼠标拖动冻结显示 "not-allowed" 光标

Question

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

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

我已经能够在两个不同的 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 中才能获得此行为。在下面的代码片段中，如果您在范围滑块周围的区域中单击并拖动鼠标几次，就可以观察到它 - 就好像要突出显示它一样，例如突出显示一行文本。在它变为“突出显示”后（虽然没有视觉指示）它不再可用，并且在尝试通过拖动设置新值时出现错误图标光标。

<input type="range">

Answer 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>

Vue 3 输入类型 "range" 鼠标拖动冻结显示 "not-allowed" 光标

Vue 3 input type "range" mouse drag freezes shows "not-allowed" cursor

javascript

vuejs3

v-model