Отвинтить включение значка текстового поля от входного

Question

Я хотел бы реализовать поле ввода, которое может быть разблокировано пользователем при необходимости.

Визуально я думал, что кнопка должна быть либо снаружи, либо внутри поля, но тесно связана с ней.

Для этого я использую append-outer-icon реквизитов *1005* Vuetify Text Field:

Шаблон:

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

Codepen