Quasar 2中如何在mounted钩子中正确获取QInput元素？

问题原因 #

当你把自定义指令绑定在QInput组件上时，mounted钩子中的el指向的是QInput组件的根DOM容器（包含QLabel、输入框外层结构等），而非内部的原生input元素，因此直接调用el.select()会失效。

解决方案 #

方案一：调用QInput组件内置方法（推荐）

利用Vue3自定义指令的vnode参数获取QInput组件实例，直接调用组件提供的select()方法来选中输入内容：

<template>
  <q-page padding>
    <q-input v-selectall clearable label="Please enter your message here" />
  </q-page>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'IndexPage',
  directives: {
    selectall: {
      mounted(el, binding, vnode) {
        // 获取QInput组件实例
        const qInput = vnode.component.proxy;
        // 调用组件内置的select方法，选中输入框内容
        qInput.select();
      }
    }
  },
});
</script>

方案二：直接查找原生input元素

通过Quasar内置的类名，从QInput的根DOM元素中定位到内部的原生input：

<template>
  <q-page padding>
    <q-input v-selectall clearable label="Please enter your message here" />
  </q-page>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'IndexPage',
  directives: {
    selectall: {
      mounted(el) {
        // 查找QInput内部的原生input元素（类名q-field__native是Quasar内置的）
        const inputEl = el.querySelector('input.q-field__native');
        if (inputEl) {
          inputEl.select();
        }
      }
    }
  },
});
</script>

注意事项

如果遇到DOM渲染延迟导致元素无法找到的情况，可以配合nextTick确保DOM完全渲染完成：

import { defineComponent, nextTick } from 'vue';

export default defineComponent({
  name: 'IndexPage',
  directives: {
    selectall: {
      async mounted(el, binding, vnode) {
        await nextTick();
        const qInput = vnode.component.proxy;
        qInput.select();
      }
    }
  },
});

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