vue element-ui实现密码显隐的输入框

在这里插入图片描述在这里插入图片描述
因为发现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,
                    },
                },
  • 1
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值