我想為附加圖示（多圖示）創建一個模板。
當我單擊該圖示時，它將專注于輸入欄位。如何預防？
[1]: https://codepen.io/tructubinh/pen/ExoyMrv?editors=101
uj5u.com熱心網友回復：
使用 :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>
uj5u.com熱心網友回復：
看起來append-outer是正確的插槽，您可能需要調整 CSS 以使其與您的設計相匹配
uj5u.com熱心網友回復：
單擊附加的眼睛圖示時，使用 aref訪問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()
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/446444.html
標籤：Vue.js Vuetify.js