更新记录

1.0.1（2021-09-23） 下载此版本

1.0.1 依托UniApp Canvas编写手势画图

平台兼容性

手势图形密码

本组件是基于uniapp 的 canvas 进行封装的。

基础用法

<template>
    <view>
        <text v-if="isPass">已设置图形密码</text>
        <text v-else>未设置图形密码</text>
        <text v-if="lineError">图形密码至少需要经过3个点</text>
        <hackout-draw-lock
            :width='width'
            background="rgba(0,0,0,0)"
            :circle-width="64"
            line-color="rgb(252,64,96)"
            line-background="rgba(252,64,96,.5)"
            :height='height'
            @change="onChange"
            @start="startDraw"></hackout-draw-lock>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                width: 256,
                height: 256,
                pass: '',
                isPass: false,
                lineError: false
            }
        },
        onLoad() {
            _self.isPass = uni.getStorageSync('line_pass');
        },
        methods: {
            //图形密码绘制完成
            onChange(data) {
                if (data.length < 3) {
                    _self.lineError = true
                    return ;
                }
                this.pass = data.join('')
                //保存图形密码
                uni.setStorageSync('line_pass', this.pass)
                //验证图形密码
                if(this.pass != this.isPass)
                {
                    alert("图形密码不正确")
                }else{
                    //你的逻辑
                }
            },
            startDraw() {
                this.lineError = false
                this.pass = ''
            }
        }
    }
</script>

Props

颜色类的参数支持HEX，RGB，RGBA

Events