fix: button新增mini尺寸

src/packages/__VUE/button/demo.vue

@@ -31,28 +31,20 @@
     <div class="demo-button-row2">
       <nut-button loading type="info"></nut-button>
       <nut-button loading type="warning">加载中...</nut-button>
-      <nut-button :loading="isLoading" type="success" @click="changeLoading"
-        >Click me!</nut-button
-      >
+      <nut-button :loading="isLoading" type="success" @click="changeLoading">Click me!</nut-button>
     </div>
     <h2>图标按钮</h2>
     <div class="demo-button-row2">
-      <nut-button
-        shape="square"
-        plain
-        type="primary"
-        icon="star-fill"
-      ></nut-button>
+      <nut-button shape="square" plain type="primary" icon="star-fill"></nut-button>
       <nut-button shape="square" type="primary" icon="star">收藏</nut-button>
     </div>
 
     <h2>按钮尺寸</h2>
     <div class="demo-button-row2">
-      <nut-button size="large" type="primary" style="margin-bottom: 10px"
-        >大号按钮</nut-button
-      >
+      <nut-button size="large" type="primary" style="margin-bottom: 10px">大号按钮</nut-button>
       <nut-button type="primary">普通按钮</nut-button>
       <nut-button size="small" type="primary">小型按钮</nut-button>
+      <nut-button size="mini" type="primary">迷你按钮</nut-button>
     </div>
     <h2>块级元素</h2>
     <div class="demo-button-row2">
@@ -62,9 +54,7 @@
     <div class="demo-button-row2">
       <nut-button color="#7232dd">单色按钮</nut-button>
       <nut-button color="#7232dd" plain>单色按钮</nut-button>
-      <nut-button color="linear-gradient(to right, #ff6034, #ee0a24)">
-        渐变按钮
-      </nut-button>
+      <nut-button color="linear-gradient(to right, #ff6034, #ee0a24)"> 渐变按钮 </nut-button>
     </div>
   </div>
 </template>

src/packages/__VUE/button/doc.md

@@ -93,12 +93,13 @@ app.use(Button);
 
 ### 按钮尺寸
 
-支持 `large`、`normal`、`small` 三种尺寸，默认为 `normal`。
+支持 `large`、`normal`、`small`、`mini` 四种尺寸，默认为 `normal`。
 
 ```html
 <nut-button size="large" type="primary">大号按钮</nut-button>
 <nut-button type="primary">普通按钮</nut-button>
 <nut-button size="small" type="primary">小型按钮</nut-button>
+<nut-button size="mini" type="primary">小型按钮</nut-button>
 ```
 
 ### 块级元素
@@ -125,7 +126,7 @@ app.use(Button);
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
 | type         | 类型，可选值为 `primary` `info` `warning` `danger` `success` | String |`default`         |
-| size        | 尺寸，可选值为 `large` `small`  | String | `normal`      |
+| size        | 尺寸，可选值为 `large` `small` `mini`  | String | `normal`      |
 | shape         | 形状，可选值为 `square` | String | `round`             |
 | color | 按钮颜色，支持传入 linear-gradient 渐变色     | String | - |
 | plain          | 	是否为朴素按钮                       | Boolean | `false`             |

src/packages/__VUE/button/index.scss

@@ -133,6 +133,12 @@
     padding: 0 $padding-xs;
     font-size: $font-size-1;
   }
+  &--mini {
+    height: $button-mini-height;
+    line-height: 1.2;
+    padding: 0 $padding-xs;
+    font-size: $font-size-1;
+  }
 
   &--block {
     display: block;

src/packages/__VUE/button/index.taro.vue

@@ -15,14 +15,8 @@ import { PropType, CSSProperties, toRefs, computed } from 'vue';
 import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('button');
 import Icon from '../icon/index.taro.vue';
-export type ButtonType =
-  | 'default'
-  | 'primary'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'danger';
-export type ButtonSize = 'large' | 'normal' | 'small';
+export type ButtonType = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+export type ButtonSize = 'large' | 'normal' | 'small' | 'mini';
 export type ButtonShape = 'square' | 'round';
 export default create({
   components: {
@@ -65,8 +59,7 @@ export default create({
   },
   emits: ['click'],
   setup(props, { emit, slots }) {
-    const { type, size, shape, disabled, loading, color, plain, block } =
-      toRefs(props);
+    const { type, size, shape, disabled, loading, color, plain, block } = toRefs(props);
 
     const handleClick = (event: MouseEvent) => {
       if (!loading.value && !disabled.value) {

src/packages/__VUE/button/index.vue

@@ -16,14 +16,8 @@ import { createComponent } from '../../utils/create';
 import Icon from '../icon/index.vue';
 const { componentName, create } = createComponent('button');
 
-export type ButtonType =
-  | 'default'
-  | 'primary'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'danger';
-export type ButtonSize = 'large' | 'normal' | 'small';
+export type ButtonType = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+export type ButtonSize = 'large' | 'normal' | 'small' | 'mini';
 export type ButtonShape = 'square' | 'round';
 export default create({
   components: {
@@ -66,8 +60,7 @@ export default create({
   },
   emits: ['click'],
   setup(props, { emit, slots }) {
-    const { type, size, shape, disabled, loading, color, plain, block } =
-      toRefs(props);
+    const { type, size, shape, disabled, loading, color, plain, block } = toRefs(props);
 
     const handleClick = (event: MouseEvent) => {
       if (!loading.value && !disabled.value) {

src/packages/styles/variables.scss

@@ -44,6 +44,7 @@ $button-default-bg-color: $white !default;
 $button-default-border-color: rgba(204, 204, 204, 1) !default;
 $button-default-color: rgba(102, 102, 102, 1) !default;
 $button-small-height: 28px !default;
+$button-mini-height: 24px !default;
 $button-default-height: 38px !default;
 $button-large-height: 48px !default;
 $button-large-line-height: 46px !default;

src/sites/mobile-taro/vue/src/base/pages/button/index.vue

@@ -31,28 +31,20 @@
     <div class="demo-button-row2">
       <nut-button loading type="info"></nut-button>
       <nut-button loading type="warning">加载中...</nut-button>
-      <nut-button :loading="isLoading" type="success" @click="changeLoading"
-        >Click me!</nut-button
-      >
+      <nut-button :loading="isLoading" type="success" @click="changeLoading">Click me!</nut-button>
     </div>
     <h2>图标按钮</h2>
     <div class="demo-button-row2">
-      <nut-button
-        shape="square"
-        plain
-        type="primary"
-        icon="star-fill"
-      ></nut-button>
+      <nut-button shape="square" plain type="primary" icon="star-fill"></nut-button>
       <nut-button shape="square" type="primary" icon="star">收藏</nut-button>
     </div>
 
     <h2>按钮尺寸</h2>
     <div class="demo-button-row2">
-      <nut-button size="large" type="primary" style="margin-bottom: 10px"
-        >大号按钮</nut-button
-      >
+      <nut-button size="large" type="primary" style="margin-bottom: 10px">大号按钮</nut-button>
       <nut-button type="primary">普通按钮</nut-button>
       <nut-button size="small" type="primary">小型按钮</nut-button>
+      <nut-button size="mini" type="primary">迷你按钮</nut-button>
     </div>
     <h2>块级元素</h2>
     <div class="demo-button-row2">
@@ -62,9 +54,7 @@
     <div class="demo-button-row2">
       <nut-button color="#7232dd">单色按钮</nut-button>
       <nut-button color="#7232dd" plain>单色按钮</nut-button>
-      <nut-button color="linear-gradient(to right, #ff6034, #ee0a24)">
-        渐变按钮
-      </nut-button>
+      <nut-button color="linear-gradient(to right, #ff6034, #ee0a24)"> 渐变按钮 </nut-button>
     </div>
   </div>
 </template>