在这里插入图片描述在这里插入图片描述
因为发现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,
                    },
                },
Logo

前往低代码交流专区

更多推荐