网站建设 技术方案模板,工程监理行业为什么做网站,四平英文网站建设,山东手机网站建设公司写了一个小玩具#xff0c;分享一下 - 组件功能#xff1a;
初次进入页面时#xff0c;密码隐藏显示#xff0c;且无法查看真实密码 当修改密码时#xff0c;触发键盘#xff0c;输入框则会直接清空 此时输入密码#xff0c;可以设置密码的隐藏或显示#xff1a;
… 写了一个小玩具分享一下 - 组件功能
初次进入页面时密码隐藏显示且无法查看真实密码 当修改密码时触发键盘输入框则会直接清空 此时输入密码可以设置密码的隐藏或显示
- 使用组件
- - passwordBox密码框组件
templatediv classboxel-input :valuevalueplaceholder请输入密码keydown.nativeonKeydown($event)inputonInput($event):typeinputType:disabledcanEditi v-ifisModified slotsuffix :classiconType clickclickIcon stylecursor:pointer;/i/el-input/div
/templatescript
export default {props: {value: {type: String,default: },canEdit: {type: Boolean,default: false}},data() {return {inputType: password, // 输入类型 text passwordiconType: el-input__icon el-icon-user-solid,// 图标样式isModified: false, // 是否修改flag: true //是否开启密码清0}},methods: {// 点击小图标clickIcon(){this.inputType this.inputType text ? password : text;this.iconType this.iconType el-input__icon el-icon-user-solid ? el-input__icon el-icon-user : el-input__icon el-icon-user-solid},// 数据传递给父组件onInput(val){this.$emit(input, val);},// 监听键盘触发onKeydown(){this.isModified true;// 第一次输入 输入框清空if(this.flag){this.$emit(input, );this.flag false;}}}
}
/scriptstyle
.box{width: 200px;
}
/style- - 父组件调用
template中passwordBox:valuedataform.password:canEditfalseinputinputEvent/passwordBox
data中dataform: {password: 123456},
method中inputEvent(val){this.dataform.password val;}参数设置
属性说明value传入的密码值canEdit是否允许修改密码。默认false允许设置true不允许
