Переглянути джерело

refactor: 重构button代码props的引入方式,获取更优雅的类型提示 (#2302)

Co-authored-by: zengqinglong <1107238436@qq.com>
sedice 2 роки тому
батько
коміт
c1d3a94371

+ 2 - 1
src/components/Button/src/BasicButton.vue

@@ -10,14 +10,15 @@
 
 <script lang="ts">
   import { defineComponent } from 'vue';
+  import { Button } from 'ant-design-vue';
   export default defineComponent({
     name: 'AButton',
+    extends: Button,
     inheritAttrs: false,
   });
 </script>
 <script lang="ts" setup>
   import { computed, unref } from 'vue';
-  import { Button } from 'ant-design-vue';
   import Icon from '/@/components/Icon/src/Icon.vue';
   import { buttonProps } from './props';
   import { useAttrs } from '/@/hooks/core/useAttrs';

+ 8 - 1
src/components/Button/src/props.ts

@@ -1,5 +1,12 @@
+const validColors = ['error', 'warning', 'success', ''] as const;
+type ButtonColorType = typeof validColors[number];
+
 export const buttonProps = {
-  color: { type: String, validator: (v) => ['error', 'warning', 'success', ''].includes(v) },
+  color: {
+    type: String as PropType<ButtonColorType>,
+    validator: (v) => validColors.includes(v),
+    default: '',
+  },
   loading: { type: Boolean },
   disabled: { type: Boolean },
   /**