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

Question

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

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

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

Answer 1

看起来 append-outer 是合适的位置，您可能需要 CSS 调整以使 this 匹配您的设计

Answer 2

使用 :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 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()
}

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

Vuetifyjs v-text-field prevent focus when click on append-icon

vue.js

vuetify.js

编辑