Vuetifyjs v-text-field 在单击附加图标时阻止焦点

Question

我想为追加图标（多图标）创建一个模板。

当我单击该图标时，它将聚焦在输入字段上。 如何预防？

  [1]: https://codepen.io/tructubinh/pen/ExoyMrv?editors=101

Answer 1

使用 :append-icon 和 @click:append。这应该有效。

            <v-text-field
              v-model="password"
              :rules="[rules.required, rules.min]"
              :type="show1 ? 'text' : 'password'"
              name="input-10-1"
              label="Normal with hint text"
              hint="At least 8 characters"
              counter
              :append-icon="show1 ? 'mdi-eye-off' : 'mdi-eye'"
              @click:append="show1 = !show1"
            />

编辑

如果您想使用模板，则必须使用

.stop

作为鼠标松开和单击事件。

            <v-text-field
              v-model="password"
              :rules="[rules.required, rules.min]"
              :type="show1 ? 'text' : 'password'"
              name="input-10-1"
              label="Normal with hint text"
              hint="At least 8 characters"
              counter
            >
                <template v-slot:append>
                  <v-icon @mouseup.stop @click.prevent.stop="show1 = !show1"> {{ show1 ? 'mdi-eye-off' : 'mdi-eye' }} </v-icon>
                </template>
            </v-text-field>

Answer 2

看起来

append-outer

是正确的插槽，您可能需要 CSS 调整才能获得 this 来匹配您的设计

Answer 3

单击附加的眼睛图标时，使用

ref

访问

v-text-field

的

blur()

方法。这会将焦点从该字段中移开。

模板：

<v-text-field
     v-model="password"
     ...
     ref="myTextField"
>
    <template v-slot:append>
         <v-icon  @click="onClickAppendIcon">
             {{ show1 ? 'mdi-eye-off' : 'mdi-eye' }} 
         </v-icon>
     </template>
</v-text-field>

脚本：

onClickAppendIcon() {
  this.show1 = !this.show1
  this.$refs.myTextField.blur()
}

Answer 4

对于那些想知道如何使用 Vuetify 3 做到这一点的人，

@mousedown.stop @mouseup.stop @click.stop

是正确的做法。

来源：
https://discord.com/channels/340160225338195969/1239971305663500290