单击附加图标时，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"
            />

编辑

如果您想使用模板，则必须将其用于.stopmouseup 和 click 事件。

            <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>