一、解决方案的方法逻辑

1、找到触发【用户密码弹出框】的事件

在密码框的内容为空的情况下，点击密码框会弹出【用户密码弹出框】

在清空密码框中的密码，会弹出【用户密码弹出框】

2、在【用户密码弹出框】弹出之前阻止其弹出

通过mousedown事件设置密码框为readonly,阻止浏览器弹出【用户密码弹出框】

通过watch密码框中的密码，在密码为空的时候设置设置密码框为readonly,阻止浏览器弹出【用户密码弹出框】

在密码框设定为readonly后，立即再通过setTimeout方法取消密码框的readonly属性，这样阻止【用户密码弹出框】弹出后，立即让密码框可输入，用户感觉不到只读设定

二、建立一个测试vue页面，输入如下内容

<el-form-item label="新密码：">                <el-input v-model="pwd.oldPwd"                          :show-password="true"                          placeholder="请输入新密码"                          ref="oldPwd"                          auto-complete="new-password"                          :readonly="pwd.oldPwd == '' && pwd.oldPwdReadonly"                          name="oldPwd"                          @mousedown.native="oldPwdMousedownHandle"                          @focus="oldPwdFocusHandle"                          @blur="oldPwdBlurHandle">               	</el-input></el-form-item>

var vm = new Vue({    el: '#app_fran'    , data: {        , pwd: {            oldPwd: ''            , oldPwdReadonly: false            , newPwd: ''            , newPwdReadonly: false            , rptPwd: ''            , rptPwdReadonly: false        }    }    , watch: {        //监控密码内容        'pwd.oldPwd': function (newVal, oldVal) {            inewVal==='' &&  this.oldPwdFocusHandle();        }    }    , methods: {        //mousedown事件阻止密码选择框弹出        oldPwdMousedownHandle: function () {            this.oldPwdFocusHandle();        }        //focus事件阻止密码选择框弹出        , oldPwdFocusHandle: function () {            this.pwd.oldPwdReadonly = true;            setTimeout(() => {                this.pwd.oldPwdReadonly = false;            }, 10);        }        //blur事件后设定密码框为只读，以便再次focus后阻止密码选择框弹出        , oldPwdBlurHandle: function () {            this.pwd.oldPwdReadonly = true;        }    }});