Lock 手势解锁BLQ

该组件一般用于手机滑动解锁。

平台差异说明

| 小程序 | h5 | android | ios | | :----: | :----: | :----: | :----: | | √ | √ | √ | √ |

下载安装

npm install @tjdata/s-lock

基本使用

<template>
    <s-lock @complete="complete"></s-lock>
</template>

<script>
import sLock from "@tjdata/s-lock"
export default {
    components: {
        sLock
    },
    methods: {
        complete(value) {
            console.log("滑动答案====>" + value)
        }
    }
}
</script>

自定义大小

<template>
    <s-lock size="300" @complete="complete"></s-lock>
</template>

<script>
import sLock from "@tjdata/s-lock"
export default {
    components: {
        sLock
    },
    methods: {
        complete(value) {
            console.log("滑动答案====>" + value)
        }
    }
}
</script>

自定义比例系数

<template>
    <s-lock :customScale="customScale" @complete="complete"></s-lock>
</template>

<script>
import sLock from "@tjdata/s-lock"
export default {
    components: {
        sLock
    },
    data() {
        return {
            customScale: {
                // 方块半径的比例
                squareRadius: (5 / 250),
                // 方块区域的比例
                squreContainerRadius: (60 / 250),
                // 方块间隔比例
                squreInterval: (5 / 250)
				// 方块触摸激活半径的比例
				squreTouchRadius: 20 / 250,
				// 方块激活外圆半径比例
				squreOutRadius: 22 / 250,
				// 线条宽度比例
				lineWidth: 3 / 250,
            }
        }
    },
    methods: {
        complete(value) {
            console.log("滑动答案====>" + value)
        }
    }
}
</script>

自定义样式

<template>
    <s-lock activeColor="#1ed76d" activeOutColor="#1b2940" squareColor="#535353" @complete="complete"></s-lock>
</template>

<script>
import sLock from "@tjdata/s-lock"
export default {
    components: {
        sLock
    },
    methods: {
        complete(value) {
            console.log("滑动答案====>" + value)
        }
    }
}
</script>

API

Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 | | -------- | :----- | :-------: | :----: | :----: | | disableScroll | 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 | Boolean | true | false | | size | 区域大小，单位px | String | Number | 250 | - | | defaultValue | 初始化显示答案 | Array | [] | - | | activeColor | 方块以及连线激活的颜色 | String | #00a2dc | - | | activeOutColor | 方块激活外围的颜色 | String | #a5d5e1 | - | | squareColor | 未激活的方块颜色 | String | #eeeeee | - | | customScale | 各项比例系数 | Object | - | - | | canvasId | canvas 的唯一标识 | String | lookCanvas | - |

Event

| 事件名 | 说明 | 回调参数 | | :----: | :----: | :----: | :----: | | complete | 手势绘画完成时 | value：绘画答案 |