javascript - 从输入中解开文本字段的图标单击启用

Question

我想实现一个可以在需要时由用户解锁的输入字段。

从视觉上看，我认为按钮应该在字段外或字段内，但要与其紧密链接。

为此，我一直在使用 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

但是，当输入被禁用时，按钮无法被点击。

有什么方法可以在输入未使用此方法时启用按钮，还是我必须将按钮和输入分开？

Answer 1

您可以覆盖阻止图标点击事件的 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;
}

Codepen