stellar-ui-plus 1.24.26 → 1.25.0

package/components/ste-slide-verify/README.md

@@ -0,0 +1,118 @@
+# Slide Verify 滑动验证
+
+通过拖动滑块完成验证，支持普通滑动验证和图片旋转验证两种模式。
+
+---$
+
+### 代码演示
+
+#### 基础用法
+
+```html
+<script setup lang="ts">
+    import { ref } from 'vue';
+    const value1 = ref(false);
+</script>
+
+<template>
+    <ste-slide-verify v-model="value1"></ste-slide-verify>
+</template>
+```
+
+#### 没有错误提示
+
+```html
+<script setup lang="ts">
+    import { ref } from 'vue';
+    const value3 = ref(false);
+</script>
+
+<template>
+    <ste-slide-verify v-model="value3" text="向右滑动验证" :showFail="false"></ste-slide-verify>
+</template>
+```
+
+#### 转动图片
+
+```html
+<script setup lang="ts">
+    import { ref } from 'vue';
+    const value2 = ref(false);
+</script>
+
+<template>
+    <ste-slide-verify v-model="value2" mode="image" imageUrl="https://image.whzb.com/chain/StellarUI/mp-logo.png" successText="图片校验通过"></ste-slide-verify>
+</template>
+```
+
+#### 禁用状态
+
+```html
+<template>
+    <ste-slide-verify disabled text="当前不可操作"></ste-slide-verify>
+</template>
+```
+
+#### 失败态停留更久
+
+```html
+<script setup lang="ts">
+    import { ref } from 'vue';
+    const value5 = ref(false);
+</script>
+
+<template>
+    <ste-slide-verify v-model="value5" failText="请慢一点再试" :failDuration="1800"></ste-slide-verify>
+</template>
+```
+
+#### 尺寸、颜色与文案
+
+```html
+<script setup lang="ts">
+    import { ref } from 'vue';
+    const value6 = ref(false);
+</script>
+
+<template>
+    <ste-slide-verify
+        v-model="value6"
+        size="52"
+        imageSize="180"
+        text="拖动完成领取"
+        successText="领取成功"
+        failText="再试一次"
+        activeColor="linear-gradient(90deg, #ff7a18, #ffb800)"
+        successColor="#1f9d55"
+        failColor="#d93025"
+    ></ste-slide-verify>
+</template>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+#### Methods
+
+| 方法名  | 说明                       | 参数 |
+| ------- | -------------------------- | ---- |
+| `init`  | 重新计算轨道宽度并同步状态 | -    |
+| `reset` | 重置验证状态               | -    |
+
+`detail` 数据结构：
+
+```ts
+{
+    mode: 'slide' | 'image';
+    progress: number;
+    angle: number;
+    left: number;
+    maxLeft: number;
+}
+```
+
+---$
+{{fuyuwei}}

package/components/ste-slide-verify/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "业务组件",
+    "title": "Slide Verify 滑动验证",
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/slide-verify.png"
+}

package/components/ste-slide-verify/props.ts

@@ -0,0 +1,43 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+
+export type SlideVerifyMode = 'slide' | 'image'
+
+export interface SlideVerifyDetail {
+  mode: SlideVerifyMode
+  progress: number
+  angle: number
+  left: number
+  maxLeft: number
+}
+
+const slideVerifyProps = {
+  modelValue: { type: Boolean, default: false },
+  mode: { type: String as PropType<SlideVerifyMode>, default: 'slide' },
+  size: { type: [String, Number], default: 80 },
+  disabled: { type: Boolean, default: false },
+  imageUrl: { type: String, default: '' },
+  imageSize: { type: [String, Number], default: 168 },
+  angleThreshold: { type: Number, default: 10 },
+  text: { type: String, default: '' },
+  successText: { type: String, default: '验证成功' },
+  showFail: { type: Boolean, default: true },
+  failText: { type: String, default: '验证失败' },
+  failDuration: { type: Number, default: 800 },
+  activeColor: { type: String, default: '' },
+  inactiveColor: { type: String, default: '' },
+  successColor: { type: String, default: '#13ce66' },
+  failColor: { type: String, default: '#ee0a24' },
+}
+
+export default slideVerifyProps
+
+export type SlideVerifyProps = ExtractPropTypes<typeof slideVerifyProps>
+
+export const slideVerifyEmits = {
+  'update:modelValue': (value: boolean) => typeof value === 'boolean',
+  success: (detail: SlideVerifyDetail) => detail instanceof Object,
+  fail: (detail: SlideVerifyDetail) => detail instanceof Object,
+  change: (detail: SlideVerifyDetail) => detail instanceof Object,
+}
+
+export type SlideVerifyEmits = typeof slideVerifyEmits

package/components/ste-slide-verify/ste-slide-verify.easycom.json

@@ -0,0 +1,119 @@
+{
+    "name": "ste-slide-verify",
+    "description": "滑动验证组件，支持普通滑动验证和图片旋转验证。",
+    "example": "<ste-slide-verify v-model='value'></ste-slide-verify>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui-plus&menu=%E7%BB%84%E4%BB%B6&active=ste-slide-verify",
+    "attributes": [
+        {
+            "name": "modelValue",
+            "description": "验证状态（支持 v-model 双向绑定）",
+            "type": "Boolean",
+            "default": false
+        },
+        {
+            "name": "mode",
+            "description": "验证模式，可选值为 slide / image",
+            "type": "String",
+            "default": "slide"
+        },
+        {
+            "name": "size",
+            "description": "轨道高度和滑块大小，默认单位 rpx",
+            "type": "Number|String",
+            "default": 40
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用",
+            "type": "Boolean",
+            "default": false
+        },
+        {
+            "name": "imageUrl",
+            "description": "图片旋转模式下的图片地址",
+            "type": "String",
+            "default": ""
+        },
+        {
+            "name": "imageSize",
+            "description": "图片旋转模式下的图片尺寸，默认单位 rpx",
+            "type": "Number|String",
+            "default": 150
+        },
+        {
+            "name": "angleThreshold",
+            "description": "图片旋转验证的角度容差",
+            "type": "Number",
+            "default": 10
+        },
+        {
+            "name": "text",
+            "description": "默认提示文案",
+            "type": "String",
+            "default": ""
+        },
+        {
+            "name": "successText",
+            "description": "验证成功文案",
+            "type": "String",
+            "default": "验证成功"
+        },
+        {
+            "name": "showFail",
+            "description": "失败时是否显示失败态",
+            "type": "Boolean",
+            "default": true
+        },
+        {
+            "name": "failText",
+            "description": "失败提示文案",
+            "type": "String",
+            "default": "验证失败"
+        },
+        {
+            "name": "failDuration",
+            "description": "失败态停留时长，单位 ms",
+            "type": "Number",
+            "default": 800
+        },
+        {
+            "name": "activeColor",
+            "description": "拖动过程中的激活颜色",
+            "type": "String",
+            "default": "#0090FF"
+        },
+        {
+            "name": "inactiveColor",
+            "description": "未激活背景色",
+            "type": "String",
+            "default": "#f3f4f6"
+        },
+        {
+            "name": "successColor",
+            "description": "成功态颜色",
+            "type": "String",
+            "default": "#13ce66"
+        },
+        {
+            "name": "failColor",
+            "description": "失败态颜色",
+            "type": "String",
+            "default": "#ee0a24"
+        },
+        {
+            "name": "[event]change",
+            "description": "拖动过程中实时触发",
+            "type": "(detail) => void"
+        },
+        {
+            "name": "[event]success",
+            "description": "验证成功时触发",
+            "type": "(detail) => void"
+        },
+        {
+            "name": "[event]fail",
+            "description": "验证失败时触发",
+            "type": "(detail) => void"
+        }
+    ]
+}