更新记录

1.0.0（2022-12-09） 下载此版本

该组件是旧版 s-look 组件改版而来。 新增defaultValue回显路径。

平台兼容性

Lock 手势解锁BLQ

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

平台差异说明

下载安装

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

Event