我想实现一个可以在需要时由用户解锁的输入字段。
从视觉上看,我认为按钮应该在字段外或字段内,但要与其紧密链接。
为此,我一直在使用 Vuetify Text Field's append-outer-icon
Prop :
模板:
<v-text-field
v-model="message"
:append-outer-icon="icon"
@click:append-outer="locked = !locked"
:disabled="locked"
></v-text-field>
这是脚本:
data: () => ({
message: '',
locked: true,
}),
computed: {
icon () {
return this.locked ? 'lock' : 'lock_open'
}
},
这是 Codepen 的链接:https://codepen.io/anon/pen/jQaJPK
但是,当输入被禁用时,按钮无法被点击。
有什么方法可以在输入未使用此方法时启用按钮,还是我必须将按钮和输入分开?
最佳答案
您可以覆盖阻止图标点击事件的 CSS:
.v-input--is-disabled:not(.v-input--is-readonly) .v-icon.v-icon--disabled {
pointer-events: auto;
}
或者对于额外的自定义,您可以将图标放在 append-outer
插槽中(对于“内部”HTML 也有 append
插槽),添加自定义图标类并覆盖防止点击的 CSS。
<v-text-field
v-model="message"
:disabled="locked"
>
<v-icon
slot="append-outer"
@click="locked = !locked"
class="lock-button"
>
{{ icon }}
</v-icon>
</v-text-field>
那么您也可以在 v-icon
上添加 color="black"
,这样它看起来就不会被禁用。
CSS:
.lock-button {
pointer-events: auto;
}
关于javascript - 从输入中解开文本字段的图标单击启用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53391733/