🚀 [tag] support size

ref #58
shuimo-design · Nov 6, 2024 · 034b682 · 034b682
1 parent a4ae1f8
commit 034b682
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 2 deletions.
diff --git a/lib/components/base/tag/MTag.tsx b/lib/components/base/tag/MTag.tsx
@@ -13,7 +13,7 @@ import './tag.css';
 
 export default defineComponent((props: TagProps, { slots }) => {
   return () => {
-    return <div class={['m-tag', `m-tag-${props.type}`]}>
+    return <div class={['m-tag', `m-tag-${props.type}`, `m-tag-${props.size}`]}>
       <div class="m-tag-left"/>
       <div class="m-tag-main">
         {slots.default?.() ?? ''}

diff --git a/lib/components/base/tag/api.ts b/lib/components/base/tag/api.ts
@@ -11,4 +11,5 @@ import { TagProps } from './index';
 
 export const props: MCOPO<TagProps> = {
   type: { type: String as MPropType<'default' | 'primary' | 'error' | 'confirm' | 'warning'>, default: 'default' },
+  size: { type: String as MPropType<'small' | 'default' | 'large'>, default: 'default' },
 };
diff --git a/lib/components/base/tag/index.d.ts b/lib/components/base/tag/index.d.ts
@@ -21,4 +21,11 @@ export declare type TagProps = {
    * @enum default|primary|error|confirm|warning
    */
   type?: 'default' | 'primary' | 'error' | 'confirm' | 'warning'
+  /**
+   * @description button size 按钮大小
+   * @type string
+   * @default default
+   * @enum small|default|large
+   */
+  size?: 'small' | 'default' | 'large'
 };
diff --git a/lib/components/base/tag/tag.css b/lib/components/base/tag/tag.css
@@ -1,5 +1,10 @@
 :root {
-  --m-tag-h: 45px;
+
+  --m-tag-large: 64px;
+  --m-tag-default: 45px;
+  --m-tag-small: 32px;
+
+  --m-tag-h: var(--m-tag-default);
   --m-tag-w-min: 80px;
   --m-tag-border-w: calc(var(--m-tag-h) / 4.5);
 }
@@ -10,6 +15,14 @@
   min-width: var(--m-tag-w-min);
   height: 100%;
   --m-tag-bg: var(--m-color-text-dark);
+
+  &.m-tag-large {
+    --m-tag-h: var(--m-tag-large);
+  }
+
+  &.m-tag-small {
+    --m-tag-h: var(--m-tag-small);
+  }
 }
 
 .m-tag-left, .m-tag-right {

diff --git a/playground/src/lib/Base.vue b/playground/src/lib/Base.vue
@@ -48,6 +48,8 @@
         <m-tag>你好你好你好你好你好</m-tag>
 
         <m-tag type="primary">primary</m-tag>
+        <m-tag type="primary" size="small">small</m-tag>
+        <m-tag type="primary" size="large">large</m-tag>
         <m-tag type="error">error</m-tag>
         <m-tag type="confirm">confirm</m-tag>
         <m-tag type="warning">warning</m-tag>