wrs-gesturelockview

前言

手势密码控件，支持密码设置、密码修改、密码校验

功能

• 支持密码设置、密码修改、密码校验
• 密码设置或修改回调，密码可保存到本地或远程
• 设置主题颜色

wrs-gesturelockview组件

    <wrs-gesturelockview :config="config" :style="'width:'+width+'px;height:'+height+'px;'" @onResult="onResult">
        </wrs-gesturelockview>

属性

• config 配置
  type: 类型，取值:pwdSetting(用于首次设置手势密码)、pwdUpdate(用于修改手势密码)、pwdVarify(用于校验手势密码)
  tintColor: 主题颜色，用于搭配app的UI主题设计风格
  varifyPassword: 校验对比的密码，type为pwdUpdate/pwdVarify时用于做校对的密码
  minDotCount: 手势密码最少需要几个点

事件

• @onResult
  当type为pwdSetting/pwdUpdate/pwdVarify 密码设置成功、密码修改成功、密钥校验成功时回调
  完整代码:
  pwdSetting.nvue

<template>
    <div>
        <wrs-gesturelockview :config="config" :style="'width:'+width+'px;height:'+height+'px;'" @onResult="onResult">
        </wrs-gesturelockview>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                config: {
                    type: "pwdSetting",
                    tintColor: "#128FEB", // 主题颜色
                    minDotCount: 4 // 至少输入几个点
                }
            }
        },
        onLoad() {
            // 设置播放器宽高，一般宽度铺满全屏，宽高比是16:9
            const {
                windowWidth,
                windowHeight
            } = uni.getSystemInfoSync();
            this.width = windowWidth;
            this.height = windowHeight;
        },
        methods: {
            onResult: function(resp) {
                var str = JSON.stringify(resp.detail);
                console.log("onResult:" + str);
                uni.navigateBack({
                    delta: 1
                });
            }
        }
    }
</script>

<style>

</style>

pwdUpdate.nvue

<template>
    <div>
        <wrs-gesturelockview :config="config" :style="'width:'+width+'px;height:'+height+'px;'" @onResult="onResult"></wrs-gesturelockview>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                config: {
                    type: "pwdUpdate",
                    tintColor: "#128FEB",
                    varifyPassword: "01258",
                    minDotCount: 4 // 至少输入几个点
                }
            }
        },
        onLoad() {
            // 设置播放器宽高，一般宽度铺满全屏，宽高比是16:9
            const {
                windowWidth,
                windowHeight
            } = uni.getSystemInfoSync();
            this.width = windowWidth;
            this.height = windowHeight;
        },
        methods:{
            onResult:function(resp){
                var str = JSON.stringify(resp.detail);
                console.log("onResult:" + str);
                uni.navigateBack({
                    delta: 1
                });
            }
        }
    }
</script>

<style>

</style>

pwdVarify.nvue

<template>
    <div>
        <wrs-gesturelockview :config="config" :style="'width:'+width+'px;height:'+height+'px;'" @onResult="onResult"></wrs-gesturelockview>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                config: {
                    type: "pwdVarify",
                    tintColor: "#128FEB",
                    varifyPassword: "01258",
                    minDotCount: 4 // 至少输入几个点
                }
                
            }
        },
        onLoad() {
            // 设置播放器宽高，一般宽度铺满全屏，宽高比是16:9
            const {
                windowWidth,
                windowHeight
            } = uni.getSystemInfoSync();
            this.width = windowWidth;
            this.height = windowHeight;
        },
        methods:{
            onResult:function(resp){
                var str = JSON.stringify(resp.detail);
                console.log("onResult:" + str);
                uni.navigateBack({
                    delta: 1
                });
            }
        }
    }
</script>

<style>

</style>

如果觉得可以就点个👍吧，欢迎粉丝收藏，土豪打赏，您的关注就是我们创作的动力！