vue element-ui实现密码显隐的输入框
因为发现element-ui input的show-password没起作用自己写的。没有新引用icon。如果引用icon<!--修改密码--><el-dialogwidth="40%"...
·
因为发现element-ui input的show-password没起作用自己写的。没有新引用icon。
如果需要引用icon
https://www.jianshu.com/p/8379597e3f97
还没有添加验证,如果需要可以查看饿了么官方文档表单项有举例
html部分
<!--修改密码-->
<el-dialog
width="40%"
title="修改密码"
:visible.sync="isAlter.password"
append-to-body>
<el-form
:model="passForm"
status-icon
:rules="passRule"
ref="passForm"
label-width="120px"
class="demo-ruleForm"
>
<el-form-item label="旧密码" prop="oldPass">
<el-input
:type="passForm.show.old?'text':'password'"
v-model="passForm.oldPass"
placeholder="请输入旧密码"
>
<img
:src="passForm.show.old?'./image/show.png':'./image/hide.png'"
slot="suffix"
alt=""
style="margin: 10px 0;"
@click="passForm.show.old=!passForm.show.old"
>
</el-input>
</el-form-item>
<el-form-item label="密码" prop="newPass">
<el-input
:type="passForm.show.new?'text':'password'"
v-model="passForm.newPass"
placeholder="请输入新密码"
>
<img
:src="passForm.show.new?'./image/show.png':'./image/hide.png'"
slot="suffix"
alt=""
style="margin: 10px 0;"
@click="passForm.show.new=!passForm.show.new"
>
</el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input
:type="passForm.show.check?'text':'password'"
v-model="passForm.checkPass"
placeholder="请确认密码"
>
<img
:src="passForm.show.check?'./image/show.png':'./image/hide.png'"
slot="suffix"
alt=""
style="margin: 10px 0;"
@click="passForm.show.check=!passForm.show.check"
>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="">确定</el-button>
<el-button @click="">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
js部分
passForm:{
oldPass:'',
newPass:'',
checkPass:'',
show: {
old:false,
new:false,
check: false,
},
},
更多推荐
已为社区贡献6条内容
所有评论(0)