@tjdata/s-lock NPM

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	-