Button: optimize doc

packages/button/src/button.js

@@ -1,17 +1,4 @@
-/**
- * @module components/button
- * @desc 按钮
- * @param {string} [type=default] - 显示类型，接受 default, primary, danger
- * @param {boolean} [disabled=false] - 禁用
- * @param {string} [size=normal] - 尺寸，接受 normal, mini, small, large
- * @param {string} [native-type] - 原生 type 属性
- * @param {slot} - 显示文本
- *
- * @example
- * <van-button size="large" type="primary">按钮</van-button>
- */
-
-import VanLoading from '../../loading';
+import Loading from '../../loading';
 
 const ALLOWED_SIZE = ['mini', 'small', 'normal', 'large'];
 const ALLOWED_TYPE = ['default', 'danger', 'primary'];
@@ -20,73 +7,69 @@ export default {
   name: 'van-button',
 
   components: {
-    'van-loading': VanLoading
+    [Loading.name]: Loading
   },
 
   props: {
-    disabled: Boolean,
-    loading: Boolean,
     block: Boolean,
+    loading: Boolean,
+    disabled: Boolean,
+    nativeType: String,
     bottomAction: Boolean,
     tag: {
       type: String,
       default: 'button'
     },
-    nativeType: String,
     type: {
       type: String,
       default: 'default',
-      validator(value) {
-        return ALLOWED_TYPE.indexOf(value) > -1;
-      }
+      validator: value => ALLOWED_TYPE.indexOf(value) > -1
     },
     size: {
       type: String,
       default: 'normal',
-      validator(value) {
-        return ALLOWED_SIZE.indexOf(value) > -1;
-      }
+      validator: value => ALLOWED_SIZE.indexOf(value) > -1
     }
   },
 
   methods: {
-    handleClick(e) {
-      if (this.loading || this.disabled) return;
-      this.$emit('click', e);
+    onClick(event) {
+      if (!this.loading && !this.disabled) {
+        this.$emit('click', event);
+      }
     }
   },
 
   render(h) {
-    const { type, nativeType, size, disabled, loading, block, bottomAction } = this;
-    const Tag = this.tag;
+    const { type, loading, disabled, tag: Tag } = this;
 
     return (
       <Tag
-        type={nativeType}
+        type={this.nativeType}
         disabled={disabled}
         class={[
           'van-button',
           'van-button--' + type,
-          'van-button--' + size,
+          'van-button--' + this.size,
           {
             'van-button--disabled': disabled,
             'van-button--loading': loading,
-            'van-button--block': block,
-            'van-button--bottom-action': bottomAction
+            'van-button--block': this.block,
+            'van-button--bottom-action': this.bottomAction
           }
         ]}
-        onClick={this.handleClick}
+        onClick={this.onClick}
       >
-        {
-          loading
-            ? <van-loading
-                class="van-button__icon-loading"
-                type="circle"
-                color={type === 'default' ? 'black' : 'white'}>
-              </van-loading>
-            : null
-        }
-        <span class="van-button__text">{this.$slots.default}</span>
+        {loading
+          ? <van-loading
+              class="van-button__icon-loading"
+              type="circle"
+              color={type === 'default' ? 'black' : 'white'}
+            />
+          : null}
+        <span class="van-button__text">
+          {this.$slots.default}
+        </span>
       </Tag>
     );
   }