입력된 텍스트 필드의 아이콘에서 사용 가능을 클릭합니다.

입력된 텍스트 필드의 아이콘에서 사용 가능을 클릭합니다.

필요에 따라 사용자가 잠금 해제할 수 있는 입력 필드를 구현하고 싶습니다.

시각적으로 버튼은 필드 밖이나 안쪽에 있어야 한다고 생각했지만 강하게 연계되어 있었습니다.

이를 위해 Vuetify 텍스트 필드의 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

그러나 입력이 비활성화되어 있으면 버튼을 클릭할 수 없습니다.

입력이 이 방법을 사용하지 않을 때 버튼을 활성화하거나 버튼과 입력을 분리할 수 있는 방법이 있습니까?

아이콘의 클릭 이벤트를 방지하는 CSS를 덮어쓸 수 있습니다.

.v-input--is-disabled:not(.v-input--is-readonly) .v-icon.v-icon--disabled {
  pointer-events: auto;
} 

---

또는 추가 커스터마이즈를 위해 아이콘을append-outerslot (또한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;
}

코드펜

조금 늦을 수도 있지만, 방금 이 문제에 직면했고, 당신이 찾고 있는 것은 읽기 전용 소품입니다.

 <v-text-field
    v-model="pseudo"
    :readonly="!locked"
    :append-icon="locked ? icon : icon2"
    @click:append="appendIconClick"
 />

이 아이콘을 클릭할 때까지 텍스트 입력을 사용할 수 없게 됩니다.

언급URL : https://stackoverflow.com/questions/53391733/untie-text-fields-icon-click-enabling-from-the-input-one