pwd-otp-box

cyq-fd

说明：文本框模拟密码框脱敏, 解决小米等部分安卓手机的密码框安全键盘强制弹出造成页面无法滚动的情况

Example

<template>
    <div>
        <input type="text" v-model="oldPassWord" class="passWordBox" @keyup="keyUpChange($event)">
    </div>
</template>
<script>
    import { FilterPassWord, FocusPassWord } from 'pwd-otp-box'
    export default {
        data () {
            return {
                oldPassWord: '', // 显示脱敏后的密码
                newPassWord: '', // 无脱敏密码
                cursorDex: null // 记录光标位置
            }
        },
        methods: {
            keyUpChange (e) {
                // 获取输入框dom
                const passWordBox = document.querySelector('.passWordBox')
                // 传入输入框dom,脱敏文本,无脱敏文本,$event对象
                const datas = new FilterPassWord(passWordBox, this.oldPassWord, this.newPassWord, e)
                // return出来的值分别赋值
                this.oldPassWord = datas.oldPassWord
                this.newPassWord = datas.newPassWord
                this.cursorDex = datas.cursorDex
                this.$nextTick(() => {
                    // 赋值完手动聚焦
                    new FocusPassWord(passWordBox, this.cursorDex)
                })
            }
        }
    }
</script>