解绑文本字段的图标，从输入框点击启用

Question

我想实现一个输入字段，如果需要，用户可以解锁该输入字段。

从视觉上看，我认为按钮应该位于字段外部或内部，但与其紧密相连。

为此，我一直在使用Vuetify 文本字段的 append-outer-iconprops ：

模板：

<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（还有append用于“内部”HTML 的插槽），添加自定义图标类并覆盖防止点击的 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>

那么你也可以添加color="black"，v-icon例如，这样它看起来就不会被禁用。

CSS：

.lock-button {
  pointer-events: auto;
}

代码笔