Question

我有一个带有附加图标的表单v文本字段，可在单击时触发方法无论如何，是否有条件隐藏/显示此附加图标？

即使我有条件地禁用了v-text-field，附加图标仍然可以点击...

           <v-text-field
            name="email"
            autocomplete="off"
            v-on:input="userEmailChanged"
            :placeholder="$t('lang.views.member.enter_new_email')"
            :readonly="isReadOnly"
            :label="$t('lang.views.home.contactForm.email')"
            v-model="user.email"
            prepend-icon="email"
            append-icon="edit"
            @click:append="editEmail"
            v-validate="'email'"
            data-vv-name="email"
            :error-messages="errors.collect('email')">
          </v-text-field>

我可以在editEmail方法中插入一个测试，但是从视觉上看，我更喜欢在editMail方法被触发时隐藏图标。

Answer 1

只需有条件地使用道具，并在需要隐藏时将条件设置为false：

<v-text-field 
    :append-icon="showIcon ? 'edit' : undefined"
    @click:append="editEmail" 
></v-text-field>

data: () => ({
    showIcon: true
}),
methods: {
    editMail() {
        // your code code
        this.showIcon = false;
    }
}

如果要使其再次可见，请将其还原为true。

注意：如果您希望使用此功能清除输入内容，则可以使用道具（from official example）通过以下特定方法来实现：

<v-text-field 
    clearable 
    clear-icon="mdi-close-circle"
    @click:clear="clearMessage"`
/>

methods: {
    clearMessage () {
        this.message = ''
    },
}

Vuetify是否有任何隐藏v文本字段的附加图标

1 个答案: