首页 > 其他分享 >手写uniview的u-input组件 密码框显示隐藏效果

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

时间:2022-11-02 15:01:04浏览次数:57  
标签:uniview return computed input 手写 passwordShow suffix

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

 

标签:uniview,return,computed,input,手写,passwordShow,suffix
From: https://www.cnblogs.com/p201821460026/p/16851026.html

相关文章