如何阻止点击Quasar Select时的文本高亮行为

Quasar的q-select组件在已有文本且获得焦点时，默认会高亮全部内容，导致需要两次点击才能继续输入。以下是两种可行的解决方法：

方法一：通过事件监听调整光标位置 #

直接监听组件的focus和click事件，手动控制光标位置：

模板代码 #

<q-select
  v-model="selectedValue"
  :options="options"
  autocomplete="off"
  @focus="handleSelectFocus"
  @click="handleSelectClick"
>
</q-select>

脚本逻辑 #

export default {
  data() {
    return {
      selectedValue: '',
      options: ['选项1', '选项2', '选项3']
    }
  },
  methods: {
    handleSelectFocus(event) {
      const inputEl = event.target.querySelector('input')
      if (inputEl && inputEl.value.length > 0) {
        // 延迟执行，避免被组件默认的高亮行为覆盖
        requestAnimationFrame(() => {
          const valueLength = inputEl.value.length
          // 将光标定位到文本末尾
          inputEl.setSelectionRange(valueLength, valueLength)
        })
      }
    },
    handleSelectClick(event) {
      const inputEl = event.target.closest('.q-select').querySelector('input')
      if (inputEl && inputEl.value.length > 0) {
        event.preventDefault()
        requestAnimationFrame(() => {
          // 保持光标在点击位置
          const cursorPos = inputEl.selectionStart
          inputEl.setSelectionRange(cursorPos, cursorPos)
        })
      }
    }
  }
}

方法二：自定义指令实现复用 #

如果多个组件都需要这个功能，推荐封装成自定义指令，提升复用性：

注册自定义指令 #

在Vue实例中注册全局指令（或在组件内注册局部指令）：

Vue.directive('no-select-highlight', {
  bind(el) {
    const inputEl = el.querySelector('input')
    if (inputEl) {
      const handleFocus = (e) => {
        if (e.target.value.length > 0) {
          requestAnimationFrame(() => {
            const len = e.target.value.length
            e.target.setSelectionRange(len, len)
          })
        }
      }
      inputEl.addEventListener('focus', handleFocus)
      // 组件销毁时清理事件监听
      el._cleanup = () => inputEl.removeEventListener('focus', handleFocus)
    }
  },
  unbind(el) {
    el._cleanup?.()
  }
})

使用指令 #

在q-select组件上直接添加指令即可：

<q-select
  v-model="selectedValue"
  :options="options"
  autocomplete="off"
  v-no-select-highlight
>
</q-select>

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