Question

我想实现一个输入栏，如果需要，用户可以将其解锁。

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

为此，我一直在使用Vuetify Text Field's append-outer-icon道具：

模板：

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

因此，例如，您也可以在color="black"上添加v-icon，这样它就不会被禁用。

CSS：

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

Codepen

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

1 个答案: