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