时间戳

首页 > 解决方案 > 从输入中解开文本字段的图标单击启用

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

问题描述

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

从视觉上看，我认为按钮应该在场外或场内，但与它紧密相连。

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

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

有没有办法在输入未使用此方法时启用按钮，或者我是否被迫将按钮和输入分开？

标签： javascriptvue.jsvuejs2vuetify.js

解决方案

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

密码笔

推荐阅读