1.0.3 • Published 5 years ago

pwd-otp-box v1.0.3

Weekly downloads
-
License
ISC
Repository
-
Last release
5 years ago

cyq-fd

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

方法名参数说明
FilterPassWorddomBox, oldPassWord, newPassWord, event1.dom元素2.脱敏值3.无脱敏值4.$evnet
FocusPassWorddomBox, indexs1.dom元素 2.记录的光标位置

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>
1.0.2

5 years ago

1.0.3

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago