ant-design实现隐藏密码，不让浏览器记住密码

方法一 js实现

<template>
    <!-- eslint-disable -->
    <a-input :id="eid" v-bind="$attrs" :value="isShowPassword ? value : passwordHidden" @input="input" @clear="clear"
        @copy="copy" @paste="paste" :allowClear="true">
        <i class="mtico-login-password mtico-login" slot="prefix"></i>
        <a-icon @click="isShowPassword = !isShowPassword" class="isShowPassword" slot="suffix" type="eye"
            v-if="isShowPassword" />
        <a-icon @click="isShowPassword = !isShowPassword" class="isShowPassword" slot="suffix" type="eye-invisible"
            v-else />
    </a-input>
</template>

<script>
/* eslint-disable */
export default {
    name: "PasswordInput",
    props: {
        value: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            eid: String(Math.random()),
            isShowPassword: true,
            selectionStart: 0,
            selectionEnd: 0,
            clipboardData: ''
        }
    },
    computed: {
        passwordHidden () {
            return this.value.replace(/./g, '•')
        }
    },
    methods: {
        input (e) {
            console.log('input', e)
            // console.log('input e', e)
            // console.log('selectionStart', e.target.selectionStart)
            // console.log('selectionEnd', e.target.selectionEnd)
            // console.log('inputType', e.inputType)
            // console.log('data', e.data)
            let selectionStartCurrent = e.target.selectionStart
            let selectionEndCurrent = e.target.selectionEnd
            // console.log('* input selectionStartCurrent', selectionStartCurrent)
            // console.log('* input selectionStartCurrent', selectionStartCurrent)
            console.log('* input this.selectionStart', this.selectionStart)
            console.log('* input this.selectionEnd', this.selectionEnd)
            if (e.inputType === 'insertText') {
                if (this.selectionStart === this.selectionEnd) {
                    // 单增
                    this.$emit('input', this.value.substring(0, selectionStartCurrent - 1) + e.data + this.value.substring(selectionStartCurrent - 1))
                } else {
                    // 替换
                    this.$emit('input', this.value.substring(0, this.selectionStart) + e.data + this.value.substring(this.selectionEnd))
                }
                this.$nextTick(() => document.getElementById(this.eid).setSelectionRange(selectionStartCurrent, selectionEndCurrent))
            } else if (e.inputType === 'deleteContentBackward') {
                // 单减
                let newVal = e.target.value
                let len = this.value.length - newVal.length
                this.$emit('input', this.value.substring(0, selectionStartCurrent) + this.value.substring(selectionStartCurrent + len))
            } else if (e.inputType === 'insertFromPaste') {
                // 粘贴
                console.log('粘贴', this.clipboardData)
                this.$emit('input', this.value.substring(0, this.selectionStart) + this.clipboardData + this.value.substring(this.selectionEnd))
            } else if (['historyUndo', 'historyRedo'].includes(e.inputType)) {
                // 撤回
                console.log(e.inputType, e.target.value)
                this.$emit('input', e.target.value)
            }

        },
        clear (e) {
            // 清除
            console.log('clear', e)
            this.$emit('input', '')
        },
        copy (e) {
            // 复制
            console.log('copy', e)
        },
        paste (e) {
            // 粘贴
            console.log('paste', e)
            this.clipboardData = e.clipboardData.getData('text')
        },
        selectionchange (e) {
            // console.log('selectionchange', e)
            let activeElement = e.target.activeElement
            if (activeElement.id === this.eid) {
                this.selectionStart = activeElement.selectionStart
                this.selectionEnd = activeElement.selectionEnd
                // console.log('selectionchange this.selectionStart', this.selectionStart)
                // console.log('selectionchange this.selectionEnd', this.selectionEnd)
            }
        }
    },
    mounted () {
        // 监听 selectionchange 事件，在光标位置发生变化时触发
        document.addEventListener('selectionchange', this.selectionchange)
    },
}
</script>

<style lang="less" scoped>
.mtico-login {
    font-size: 16px;
}

.isShowPassword {
    cursor: pointer;
    font-size: 16px;
}
</style>

方法二 CSS实现

/deep/.mask {
    input {
        -webkit-text-security: disc !important;
    }
}

呵呵