ソースを参照

fix: 补充Button组件文档

suzigang 4 年 前
コミット
b4d26c3607
3 ファイル変更13 行追加22 行削除
  1. 1 4
      src/packages/button/demo.vue
  2. 6 4
      src/packages/button/doc.md
  3. 6 14
      src/packages/button/index.vue

+ 1 - 4
src/packages/button/demo.vue

@@ -67,10 +67,7 @@
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('button');
 export default createDemo({
-  props: {
-    text: String
-  },
-  emits: ['click']
+  props: {}
 });
 </script>
 

+ 6 - 4
src/packages/button/doc.md

@@ -94,13 +94,15 @@ app.use(Button);
 | size        | 尺寸,可选值为 `large` `small`  | String | `normal`      |
 | shape         | 形状,可选值为 `square` | String | `round`             |
 | color | 按钮颜色,支持传入 linear-gradient 渐变色     | String | - |
-| plain          | 	是否为朴素按钮                       | boolean | `false`             |
-| disabled          | 	是否禁用按钮                       | boolean | `false`              |
-| block          | 是否为块级元素                        | boolean | `false`               |
+| plain          | 	是否为朴素按钮                       | Boolean | `false`             |
+| disabled          | 	是否禁用按钮                       | Boolean | `false`              |
+| block          | 是否为块级元素                        | Boolean | `false`               |
+| icon          | 按钮图标,同Icon组件name属性                        | String | -     |
+| loading          | 按钮loading状态                        | Boolean | `false`               |
 
 ### Events
 
 | 事件名 | 说明           | 回调参数     |
 |--------|----------------|--------------|
-| click  | 点击按钮时触发 | event: Event |
+| click  | 点击按钮时触发 | event: MouseEvent |
 

+ 6 - 14
src/packages/button/index.vue

@@ -2,9 +2,9 @@
   <view :class="classes" :style="getStyle" @click="handleClick">
     <nut-icon class="nut-icon-loading" v-if="loading"></nut-icon>
     <nut-icon :class="icon" v-if="icon && !loading" :name="icon"></nut-icon>
-    <view :class="{ text: icon || loading }" v-if="$slots.default"
-      ><slot></slot
-    ></view>
+    <view :class="{ text: icon || loading }" v-if="$slots.default">
+      <slot></slot>
+    </view>
   </view>
 </template>
 
@@ -59,11 +59,8 @@ export default create({
       default: ''
     }
   },
-  components: {},
   emits: ['click'],
   setup(props, { emit, slots }) {
-    // setup内部只能访问这4个属性,值得注意的是props必须在上面声明才能在这里取到
-    console.log('props', props, 'emit', emit, 'slots', slots);
     const {
       type,
       size,
@@ -74,7 +71,6 @@ export default create({
       plain,
       block
     } = toRefs(props);
-    // console.log("type", type, "size", size);
 
     const handleClick = (event: MouseEvent) => {
       if (!loading.value && !disabled.value) {
@@ -96,9 +92,8 @@ export default create({
     });
 
     const getStyle = computed(() => {
+      const style: CSSProperties = {};
       if (color?.value) {
-        const style: CSSProperties = {};
-
         if (plain.value) {
           style.color = color.value;
           style.background = '#fff';
@@ -109,16 +104,13 @@ export default create({
           style.color = '#fff';
           style.background = color.value;
         }
-
-        return style;
-      } else {
-        return {};
       }
+
+      return style;
     });
 
     return {
       handleClick,
-      disabled,
       classes,
       getStyle
     };