简单的密码修改

废话不多说，直接看图：由上而下
第一步：点击编辑按钮，编辑按钮隐藏，文本框、取消按钮、提交按钮都显示如图二
图一
第二步：点击对号√在文本框内直接修改密码，修改完成，提交后如图三，点击叉号×，恢复图一
图二
第三步：提交成功就如图三所示
图三
先解说下：这里一个展示、一个输入框、三个按钮，主要是通过显隐来控制的（v-show字段），代码如下：
里面的

<div style="margin-top:3vh;">
     <h3>
		  <span>密码：<span v-show="span" style="color:#3884B7;">{{ this.workPoint_password }}</span></span>
		  <el-input v-show="inp_show" style="width:130px; margin:auto;" v-model="workPoint_password_value2"></el-input>
		  <!-- 验证码编辑按钮 -->
		  <el-button v-show="btu_password" type="text" style="color:orange;" class="el-icon-edit" @click="input_edit()"></el-button>
		  <!-- 验证码编辑取消 -->
		  <el-button v-show="close_password" type="text" style="color:red;" class="el-icon-close" @click="input_cancel()"></el-button>
		  <!-- 验证码编辑提交 -->
		  <el-button v-show="check_password" type="text" style="color:green;" class="el-icon-check" @click="input_check()"></el-button>
     </h3>
  </div>

事件代码如下：

		input_edit(){  //`打开验证码编辑按钮事件` 
            this.inp_show = true   // `文本输入框的显隐`
            this.span = false          //`文本的显隐`
            this.btu_password = false    //`编辑按钮的显隐`
            this.close_password  =  true   //`取消编辑的按钮的显隐`
            this.check_password = true    //`提交编辑后的按钮的显隐`
            this.workPoint_password_value2 = this.workPoint_password    //`这显示的文本赋值给输入框`
        },
        input_cancel(){  //`取消验证码编辑框`
            this.inp_show = false   //
            this.btu_password = true    //
            this.close_password  =  false     //
            this.span = true    //
            this.check_password = false    //
        },
        input_check(){  //`验证码编辑后提交`
            let m = this.workPoint_password_value2
            let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/   
            //`正则验证：只能是大小写字母和数字三种格式同时组成，并长度为6~10位`
            
            var va = reg.test(m)
            console.log(va);
            if(m.length >= 6 && m.length <= 10){
                console.log("1");
                if(va === true){
                    console.log("2");
                    const params = {
                        new_password: this.workPoint_password_value2
                    }
                    this.$http.put("api/api/api/" + this.work_point.id, params).then(res => {
                        console.log(res);
                        if(res.data.code === 200) {
                            this.btu_password = true    //验证码的编辑按钮显示
                            this.close_password = false,   //验证码取消按钮
                            this.check_password = false,  //验证码提交按钮
                            this.inp_show = false,  //验证码的编辑框
                            this.span = true
                            this.workPoint_password = res.data.data[0]
                            this.$notify({
                                title:"温馨提示",
                                type:"success",
                                message:this.$createElement("i",{style:"color:green"},res.data.msg)
                            })
                        }
                    })
                }else{
                    this.$notify({
                        title:"温馨提示",
                        type:"warning",
                        message:this.$createElement("i",{style:"color:orange"},"请按照正确的密码规则输入\n密码只能由大小写字母[A~Z,a~z]及数字[0~9]同时组成\n并密码长度必须为6~10位")
                    })
                    alert("请按照正确的密码规则输入\n密码只能由大小写字母[A~Z,a~z]及数字[0~9]同时组成\n并密码长度必须为6~10位")
                }
                
            }else{
                this.$notify({
                    title:"温馨提示",
                    type:"warning",
                    message:this.$createElement("i",{style:"color:orange"},"填报密码长度为：6~10位数")
                })
            }
            console.log(va);
        }