开箱即用的密码框组件

写了一个小玩具，分享一下

- 组件功能：

初次进入页面时，密码隐藏显示，且无法查看真实密码

当修改密码时，触发键盘，输入框则会直接清空

此时输入密码，可以设置密码的隐藏或显示：

- 使用组件

- - passwordBox密码框组件

<template><div class="box"><el-input :value="value"placeholder="请输入密码"@keydown.native="onKeydown($event)"@input="onInput($event)":type="inputType":disabled="canEdit"><i v-if="isModified" slot="suffix" :class="iconType" @click="clickIcon" style="cursor:pointer;"></i></el-input></div>
</template><script>
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;}}}
}
</script><style>
.box{width: 200px;
}
</style>

- - 父组件调用

template中：<passwordBox:value="dataform.password":canEdit="false"@input="inputEvent"></passwordBox>
data中：dataform: {password: "123456"},
method中：inputEvent(val){this.dataform.password = val;}

参数设置：

属性	说明
value	传入的密码值
canEdit	是否允许修改密码。默认false允许，设置true不允许