手写uniview的u-input组件 密码框显示隐藏效果

input代码

                        <!-- 
                            :suffixIcon 右侧图标
                             @suffixIcon 点击右侧图标触发事件
                             :password 传入布尔值,控制input是否为密码框
                         -->
                        <u-input
                            placeholder="请输入密码"
                            border="surround"
                            v-model="formData.password"
                            @suffix="suffix"
                            :suffixIcon="suffixIcon"
                            :password='passwordShow'
                        ></u-input>

利用computed改变suffixIcon的值

        computed: {
            suffixIcon() {
                if (this.formData.password === '') {
                    return '';
                }
                if (this.passwordShow) {
                    return 'eye-off';
                }
                return 'eye-fill';
            }
        }

suffix绑定的事件

            suffix() {
                this.passwordShow = !this.passwordShow;
            },

 

posted @ 2022-11-02 14:54  fnasklf  阅读(431)  评论(0编辑  收藏  举报