Vue3 input type=range绑定v-model拖拽失效显示not-allowed光标问题

问题原因 #

该问题是Chrome浏览器的原生交互逻辑冲突导致，和Vue框架无关联：当你在滑块附近快速点击拖拽时，会意外触发页面文本选中机制，浏览器将后续的滑块拖拽识别为文本拖拽操作，因此展示禁止光标并阻止滑块交互。

解决方案 #

可根据你的场景选择以下任意一种方案：

• 方案1：禁用滑块区域的文本选中功能（适用场景：滑块所在区域不需要支持文本选中）
  给滑块元素或它的父容器添加如下CSS样式：

.range-container {
  user-select: none;
  -webkit-user-select: none;
}

Vue中使用示例：

<template>
  <div id="app" class="range-container">
    <input type="range" v-model="range" />
    {{ range }}
  </div>
</template>

• 方案2：阻止滑块的mousedown默认行为（侵入性最小，不影响其他区域的文本选中功能）
  直接给range元素绑定mousedown事件，阻止默认触发文本选中的逻辑：

<input type="range" v-model="range" @mousedown="e => e.preventDefault()" />

原生JS实现方式：

document.querySelector('input[type="range"]').addEventListener('mousedown', e => e.preventDefault())

验证说明 #

以上两种方案均在Windows 10 Chrome 100+版本上经过测试，重复拖拽滑块不会再复现无法拖动、显示禁止光标的问题。

内容的提问来源于stack exchange，提问作者WillD