chore: 使用interface代替组件的props声明

vbenjs · Sep 19, 2024 · c1d7916 · c1d7916
1 parent 17fb81c
commit c1d7916
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 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
@@ -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
@@ -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;
+}