wrs-gesturelockview
2021-08-13 本文已影响0人
浪人残风
前言
手势密码控件，支持密码设置、密码修改、密码校验
功能
- 支持密码设置、密码修改、密码校验
- 密码设置或修改回调，密码可保存到本地或远程
- 设置主题颜色
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>
