旋转验证 RotateVerify ​

<template>
    <div class="verify">
        <RotateVerify v-model="data" :img="img" @result="onResult" />
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Notification } from 'usuuu'

/**
 * 图片
 */
const img = '/img/1.webp'
/**
 * 验证状态
 */
const data = ref(false)
/**
 * 校验结果
 */
const onResult = (vlaue: boolean) => {
    if (vlaue) {
        Notification.success('验证通过')
    } else {
        Notification.error('验证失败')
    }
}
</script>
<style>
.verify {
    padding: 20px;
    display: inline-flex;
    background: #eef5fe;
}
</style>

<template>
    <div class="verify">
        <Space direction="vertical">
            <RotateVerify ref="RotateVerifyEl" v-model="data" v-bind="options" @result="onResult" />
            <Button @click="handleReset">重置</Button>
        </Space>
    </div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { Notification } from 'usuuu'
import type { RotateVerifyComponent } from 'usuuu'

/**
 * 滑块验证实例
 */
const RotateVerifyEl = ref<RotateVerifyComponent | null>(null)
/**
 * 图片
 */
const img = '/img/6.webp'
/**
 * 验证状态
 */
const data = ref(false)
/**
 * 校验配置(更多配置请查阅文档)
 */
const options = computed(() => ({
    //宽度
    width: 240,
    //高度
    height: 36,
    //图片地址
    img: img,
    //允许误差(单位°)
    difference: 12,
    //提示文字
    text: '用你小手轻轻滑动',
    //成功提示文字
    successText: '小伙子真棒',
    //背景颜色
    bgColor: '#339af0',
    //验证通过背景色
    successBgColor: '#b13cec',
    //验证未通过背景色
    errorBgColor: '#e06923',
    //圆角
    radius: 4,
    //滑块图标
    blockIcon: 'ri-arrow-right-circle-line',
    //滑块验证通过时图标
    blockSuccessIcon: 'ri-heart-3-line',
    //滑块背景色
    blockColor: '#f65d68',
    //文字大小
    textSize: 12,
    //文字颜色
    textColor: '#ffffff'
}))
/**
 * 重置(调用旋转验证实例中重置方法)
 */
const handleReset = () => {
    if (RotateVerifyEl.value) {
        RotateVerifyEl.value.reset()
    }
}
/**
 * 校验结果
 */
const onResult = (vlaue: boolean) => {
    if (vlaue) {
        Notification.success('验证通过')
    } else {
        Notification.error('验证失败')
    }
}
</script>
<style>
.verify {
    padding: 20px;
    display: inline-flex;
    background: #eef5fe;
}
</style>