浏览代码

feat(button-evo): 更新按钮组件,添加中小尺寸支持并优化样式;调整类名绑定逻辑

EvilDragon 5 月之前
父节点
当前提交
71320b5da6
共有 1 个文件被更改,包括 7 次插入4 次删除
  1. 7 4
      packages/app/src/components/button-evo.vue

+ 7 - 4
packages/app/src/components/button-evo.vue

@@ -5,7 +5,7 @@ import { omit } from 'radash'
 interface ComponentProps {
   block?: boolean
   color?: string
-  size?: 'lg'
+  size?: 'lg' | 'md' | 'sm'
 }
 const props = withDefaults(
   defineProps<{ customClass?: string; skew?: boolean } & ComponentProps>(),
@@ -19,16 +19,19 @@ const buttonProps = computed(() => omit(props, ['color']))
 const btnClass = computed(
   () => `${btnThemeClass[props.color] || `before:bg-[--color] after:bg-[--color]`}`,
 )
-const height = computed(() => ({ lg: '2.75rem' })[props.size] || '2.75rem')
+const height = computed(() => ({ lg: '2.75rem', md: '2.1875rem' })[props.size] || '2.75rem')
 </script>
 <template>
   <button
     class="left-skew relative bg-transparent hover:bg-transparent h-[--evo-btn-height]!"
-    :class="`${btnClass}`"
+    :class="`${btnClass} ${{ md: 'pl-7! pr-3.5!' }[size] || ''}`"
     :style="{ '--color': color, '--evo-btn-height': height }"
     :block="block"
   >
-    <div class="w-full h-full flex items-center justify-center relative z-1 c-white">
+    <div
+      class="w-full h-full flex items-center justify-center relative z-1 c-white"
+      :class="`${{ md: 'text-sm' }[size] || ''}`"
+    >
       <slot></slot>
     </div>
   </button>