Button: optimize doc

docs/examples-docs/button.md

@@ -1,20 +1,21 @@
 <style>
 .demo-button {
   .van-button {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     user-select: none;
-  }
-  .van-row {
-    padding: 0 15px;
-    margin-bottom: 20px;
-  }
-  .van-col-24 {
-    margin-bottom: 20px;
 
-    &:last-child {
+    &--large,
-      margin-bottom: 0;
+    &--bottom-action {
+      margin-bottom: 15px;
     }
   }
+
+  .zan-doc-demo-block {
+    padding: 0 15px;
+  }
+
+  .zan-doc-demo-block__subtitle {
+    padding-left: 0;
+  }
 }
 </style>
 
@@ -22,105 +23,67 @@
 
 ### 代码演示
 
-#### 按钮功能
+#### 按钮类型
 
-只接受`primary`, `default`, `danger`三种类型，默认`default`。
+支持`default`、`primary`、`danger`三种类型，默认为`default`
 
-:::demo 按钮功能
+:::demo 按钮类型
 ```html
-<van-row>
+<van-button type="default">Default</van-button>
-  <van-col span="24">
+<van-button type="primary">Primary</van-button>
-    <van-button block>default</van-button>
+<van-button type="danger">Danger</van-button>
-  </van-col>
-  <van-col span="24">
-    <van-button type="primary" block>primary</van-button>
-  </van-col>
-  <van-col span="24">
-    <van-button type="danger" block>danger</van-button>
-  </van-col>
-</van-row>
-```
-:::
-
-#### 禁用状态
-
-在组件上加上`disabled`属性即可，此时按钮不可点击。
-
-:::demo 禁用状态
-```html
-<van-row>
-  <van-col span="24">
-    <van-button disabled block>diabled</van-button>
-  </van-col>
-</van-row>
 ```
 :::
 
 #### 按钮尺寸
 
-只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。`large`按钮默认100%宽度。
+支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
 
 :::demo 按钮尺寸
 ```html 
-<van-row>
+<van-button size="large">large</van-button>
-  <van-col span="24">
+<van-button size="normal">normal</van-button>
-    <van-button size="large">large</van-button>
+<van-button size="small">small</van-button>
-  </van-col>
+<van-button size="mini">mini</van-button>
-  <van-col span="24">
+```
-    <van-button size="normal">normal</van-button>
+:::
-  </van-col>
+
-  <van-col span="24">
+#### 禁用状态
-    <van-button size="small">small</van-button>
+
-  </van-col>
+通过`disabled`属性来禁用按钮，此时按钮不可点击
-  <van-col span="24">
+
-    <van-button size="mini">mini</van-button>
+:::demo 禁用状态
-  </van-col>
+```html
-</van-row>
+<van-button disabled>diabled</van-button>
+```
+:::
+
+#### 加载状态
+
+:::demo 加载状态
+```html 
+<van-button loading />
 ```
 :::
 
 #### 自定义按钮标签
 
-按钮默认是`button`标签，可以使用`tag`属性修改为一个`a`标签。
+按钮标签默认为`button`，可以使用`tag`属性来修改按钮标签
 
 :::demo 自定义按钮标签
 ```html 
-<van-row>
+<van-button tag="a" href="https://www.youzan.com" target="_blank">
-  <van-col span="24">
+  a标签按钮
-    <van-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</van-button>
+</van-button>
-  </van-col>
-</van-row>
-```
-:::
-
-#### loading按钮
-
-`loading`状态的按钮。
-
-:::demo loading按钮
-```html 
-<van-row>
-  <van-col span="24">
-    <van-button type="primary" loading block>loading</van-button>
-  </van-col>
-  <van-col span="24">
-    <van-button loading block></van-button>
-  </van-col>
-</van-row>
 ```
 :::
 
 #### 页面底部操作按钮
 
-一般用于`fixed`在底部的区域或是`popup`弹层的底部，一般只使用`primary`和`normal`两种状态。
-
 :::demo 页面底部操作按钮
 ```html 
-<van-row>
+<van-button type="primary" bottom-action>立即购买</van-button>
-  <van-col span="24">
+
-    <van-button type="primary" bottom-action>立即购买</van-button>
-  </van-col>
-</van-row>
 <van-row>
   <van-col span="12">
     <van-button bottom-action>加入购物车</van-button>
@@ -136,10 +99,11 @@
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| type | 按钮类型 | `string`  | `default`          | `primary`, `danger`   |
+| type | 按钮类型 | `String`  | `default` | `primary` `danger` |
-| size | 按钮尺寸 | `string`  | `normal`          | `large`, `small`, `mini`  |
+| size | 按钮尺寸 | `String`  | `normal` | `large` `small` `mini` |
-| tag | 按钮标签 | `string`  | `button`          | 任何有意义的`html`标签, 如`a`, `span`等  |
+| tag | 按钮标签 | `String`  | `button` | 任意`HTML`标签 |
-| diabled | 按钮是否禁用 | `boolean`  |  `false`  |      |
+| nativeType | 按钮类型（原生） | `String`  | `''` | |
-| block | 按钮是否显示为块级元素 | `boolean`  |   `false`   |      |
+| diabled | 是否禁用 | `Boolean`  |  `false`  | |
-| bottomAction | 按钮是否显示为底部行动按钮，一般显示在页面底部，有特殊样式 | `boolean`  |   `false`   |      |
+| loading | 是否显示为加载状态 | `Boolean`  |  `false`  | |
-
+| block | 是否为块级元素 | `Boolean`  |   `false`   | |
+| bottomAction | 是否为底部行动按钮 | `Boolean` | `false` | |

package.json

@@ -114,6 +114,6 @@
     "webpack": "^3.5.5",
     "webpack-dev-server": "^2.7.1",
     "webpack-merge": "^4.1.0",
-    "zan-doc": "0.1.12"
+    "zan-doc": "0.1.13"
   }
 }

packages/button/src/button.js

@@ -1,17 +1,4 @@
-/**
+import Loading from '../../loading';
- * @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';
 
 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) {
+      validator: value => ALLOWED_TYPE.indexOf(value) > -1
-        return ALLOWED_TYPE.indexOf(value) > -1;
-      }
     },
     size: {
       type: String,
       default: 'normal',
-      validator(value) {
+      validator: value => ALLOWED_SIZE.indexOf(value) > -1
-        return ALLOWED_SIZE.indexOf(value) > -1;
-      }
     }
   },
 
   methods: {
-    handleClick(e) {
+    onClick(event) {
-      if (this.loading || this.disabled) return;
+      if (!this.loading && !this.disabled) {
-      this.$emit('click', e);
+        this.$emit('click', event);
+      }
     }
   },
 
   render(h) {
-    const { type, nativeType, size, disabled, loading, block, bottomAction } = this;
+    const { type, loading, disabled, tag: Tag } = this;
-    const Tag = this.tag;
 
     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--block': this.block,
-            'van-button--bottom-action': bottomAction
+            'van-button--bottom-action': this.bottomAction
           }
         ]}
-        onClick={this.handleClick}
+        onClick={this.onClick}
       >
-        {
+        {loading
-          loading
           ? <van-loading
               class="van-button__icon-loading"
               type="circle"
-                color={type === 'default' ? 'black' : 'white'}>
+              color={type === 'default' ? 'black' : 'white'}
-              </van-loading>
+            />
-            : null
+          : null}
-        }
+        <span class="van-button__text">
-        <span class="van-button__text">{this.$slots.default}</span>
+          {this.$slots.default}
+        </span>
       </Tag>
     );
   }

yarn.lock

@@ -921,13 +921,6 @@ babel-runtime@^6.18.0, babel-runtime@^6.22.0:
     core-js "^2.4.0"
     regenerator-runtime "^0.10.0"
 
-babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
 babel-template@^6.24.1, babel-template@^6.25.0:
   version "6.25.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.25.0.tgz#665241166b7c2aa4c619d71e192969552b10c071"
@@ -7702,9 +7695,9 @@ yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
 
-zan-doc@0.1.12:
+zan-doc@0.1.13:
-  version "0.1.12"
+  version "0.1.13"
-  resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.1.12.tgz#65b3d43c6a18dbb939c5ea28d6a4630697de6824"
+  resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.1.13.tgz#df532b538ba613a4fe39e436ec553de3e7c25918"
   dependencies:
     cheerio "0.22.0"
     decamelize "^1.2.0"