From c1d79161a09bf64a3fc00b48b07df0adedc2d585 Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Thu, 19 Sep 2024 18:32:57 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BD=BF=E7=94=A8interface=E4=BB=A3?=
 =?UTF-8?q?=E6=9B=BF=E7=BB=84=E4=BB=B6=E7=9A=84props=E5=A3=B0=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/verify/drag-verify/index.vue   | 16 ++++-
 .../common-ui/src/components/verify/props.ts  | 69 ++++++++++++++++++-
 2 files changed, 82 insertions(+), 3 deletions(-)

diff --git a/packages/effects/common-ui/src/components/verify/drag-verify/index.vue b/packages/effects/common-ui/src/components/verify/drag-verify/index.vue
index 07c0b9a858a..591b9bce61c 100644
--- a/packages/effects/common-ui/src/components/verify/drag-verify/index.vue
+++ b/packages/effects/common-ui/src/components/verify/drag-verify/index.vue
@@ -3,13 +3,25 @@ import { computed, reactive, ref, unref, watch, watchEffect } from 'vue';
 
 import { useTimeoutFn } from '@vueuse/core';
 
-import { basicProps } from '../props';
+import { type VerifyProps } from '../props';
 import { useEventListener } from '../use-event-listener';
 import ActionCmp from './action.vue';
 import BarCmp from './bar.vue';
 import ContentCmp from './content.vue';
 
-const props = defineProps(basicProps);
+const props = withDefaults(defineProps<VerifyProps>(), {
+  actionStyle: () => ({}),
+  barStyle: () => ({}),
+  circle: false,
+  contentStyle: () => ({}),
+  height: '40',
+  isSlot: false,
+  successText: '验证通过',
+  text: '请按住滑块拖动',
+  value: false,
+  width: '220',
+  wrapStyle: () => ({}),
+});
 
 const emit = defineEmits([
   'success',
diff --git a/packages/effects/common-ui/src/components/verify/props.ts b/packages/effects/common-ui/src/components/verify/props.ts
index 04094128c12..0c549e4236f 100644
--- a/packages/effects/common-ui/src/components/verify/props.ts
+++ b/packages/effects/common-ui/src/components/verify/props.ts
@@ -1,4 +1,4 @@
-import type { PropType } from 'vue';
+import type { CSSProperties, PropType } from 'vue';
 
 export const basicProps = {
   actionStyle: {
@@ -83,3 +83,70 @@ export const rotateProps = {
     type: String as PropType<string>,
   },
 };
+
+export interface VerifyProps {
+  /**
+   * @description 滑块的样式
+   * @default {}
+   */
+  actionStyle?: CSSProperties;
+
+  /**
+   * @description 滑块条的样式
+   * @default {}
+   */
+  barStyle?: CSSProperties;
+
+  /**
+   * @description 内容的样式
+   * @default {}
+   */
+  contentStyle?: CSSProperties;
+
+  /**
+   * @description 组件的样式
+   * @default {}
+   */
+  wrapStyle?: CSSProperties;
+
+  /**
+   * @description 组件是否为圆角
+   * @default false
+   */
+  circle?: boolean;
+
+  /**
+   * @description 组件宽度
+   * @default 220px
+   */
+  width?: number | string;
+  /**
+   * @description 组件高度
+   * @default 40px
+   */
+  height?: number | string;
+
+  /**
+   * @description 是否作为插槽使用，用于联动组件，可参考旋转校验组件
+   * @default false
+   */
+  isSlot?: boolean;
+
+  /**
+   * @description 验证成功的提示
+   * @default '验证通过'
+   */
+  successText?: string;
+
+  /**
+   * @description 提示文字
+   * @default '请按住滑块拖动'
+   */
+  text?: string;
+
+  /**
+   * @description 是否验证成功
+   * @default false
+   */
+  value?: boolean;
+}