添加size属性，类名class优化

coderjam · coderjam · commit 8da90001b20a · 2022-07-24T14:22:15.000+08:00
diff --git a/src/components/ButtonDemo.vue b/src/components/ButtonDemo.vue
@@ -1,12 +1,19 @@
 <template>
   <div>
-    <h1>Button 示例</h1>
+    <h1>Button 示例 1</h1>
     <div>
       <Button @click="onClick">你好</Button>
       <Button @click="onClick" theme="button">你好</Button>
       <Button @click="onClick" theme="text">你好</Button>
       <Button @click="onClick" theme="link">你好</Button>
     </div>
+    <h1>Button 示例 2</h1>
+    <div>
+      <Button>你好</Button>
+      <Button size="big">你好</Button>
+      <Button size="small">你好</Button>
+      <Button size="mini">你好</Button>
+    </div>
   </div>
 </template>
 <script lang="ts">
diff --git a/src/lib/Button.vue b/src/lib/Button.vue
@@ -1,17 +1,34 @@
 <template>
-    <button class="zhiwei-button" :class="`zhiwei-theme-${theme}`">
+    <button class="zhiwei-button" :class="classes">
       <slot></slot>
     </button>
 </template>
 
 <script lang="ts">
+import { computed } from 'vue'
 export default {
-props:{
-  theme:{
-    type:String,
-    default: 'button'
+  props:{
+    theme:{
+      type:String,
+      default: 'button'
+    },
+    size:{
+      type: String,
+      default: 'normal'
+    }
+  },
+  setup(props){
+    const { theme,size } = props
+    const classes = computed(()=>{
+      return {
+        [`zhiwei-theme-${theme}`]:theme,
+        [`zhiwei-size-${size}`]:size
+      }
+    })
+    return {
+      classes
+    }
   }
-}
 };
 </script>
 
@@ -49,5 +66,38 @@ $radius: 4px;
   &::-moz-focus-inner {
     border: 0;
   }
+  &.zhiwei-theme-link {
+    border-color: transparent;
+    box-shadow: none;
+    color: $blue;
+    &:hover,
+    &:focus {
+      color: lighten($blue, 10%);
+    }
+  }
+  &.zhiwei-theme-text {
+    border-color: transparent;
+    box-shadow: none;
+    color: inherit;
+    &:hover,
+    &:focus {
+      background: darken(white, 5%);
+    }
+  }
+  &.zhiwei-size-big {
+    font-size: 24px;
+    height: 48px;
+    padding: 0 16px;
+  }
+  &.zhiwei-size-small {
+    font-size: 12px;
+    height: 20px;
+    padding: 0 4px;
+  }
+  &.zhiwei-size-mini {
+    font-size: 10px;
+    height: 16px;
+    padding: 0 2px;
+  }
 }
 </style>
