From 9f12a03771e551763ab3cb0e8099f319cdc4a8d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Mon, 21 Aug 2017 10:05:29 +0800 Subject: [PATCH] Button: optimize doc --- docs/examples-docs/button.md | 144 +++++++++++++--------------------- package.json | 2 +- packages/button/src/button.js | 71 +++++++---------- yarn.lock | 13 +-- 4 files changed, 85 insertions(+), 145 deletions(-) diff --git a/docs/examples-docs/button.md b/docs/examples-docs/button.md index fc4f506b5..2f57ec21f 100644 --- a/docs/examples-docs/button.md +++ b/docs/examples-docs/button.md @@ -1,20 +1,21 @@ @@ -22,105 +23,67 @@ ### 代码演示 -#### 按钮功能 +#### 按钮类型 -只接受`primary`, `default`, `danger`三种类型，默认`default`。 +支持`default`、`primary`、`danger`三种类型，默认为`default` -:::demo 按钮功能 +:::demo 按钮类型 ```html - - - default - - - primary - - - danger - - -``` -::: - -#### 禁用状态 - -在组件上加上`disabled`属性即可，此时按钮不可点击。 - -:::demo 禁用状态 -```html - - - diabled - - +Default +Primary +Danger ``` ::: #### 按钮尺寸 -只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。`large`按钮默认100%宽度。 +支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal` :::demo 按钮尺寸 ```html - - - large - - - normal - - - small - - - mini - - +large +normal +small +mini +``` +::: + +#### 禁用状态 + +通过`disabled`属性来禁用按钮，此时按钮不可点击 + +:::demo 禁用状态 +```html +diabled +``` +::: + +#### 加载状态 + +:::demo 加载状态 +```html + ``` ::: #### 自定义按钮标签 -按钮默认是`button`标签，可以使用`tag`属性修改为一个`a`标签。 +按钮标签默认为`button`，可以使用`tag`属性来修改按钮标签 :::demo 自定义按钮标签 ```html - - - a标签按钮 - - -``` -::: - -#### loading按钮 - -`loading`状态的按钮。 - -:::demo loading按钮 -```html - - - loading - - - - - + + a标签按钮 + ``` ::: #### 页面底部操作按钮 -一般用于`fixed`在底部的区域或是`popup`弹层的底部，一般只使用`primary`和`normal`两种状态。 - :::demo 页面底部操作按钮 ```html - - - 立即购买 - - +立即购买 + 加入购物车 @@ -136,10 +99,11 @@ | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| type | 按钮类型 | `string` | `default` | `primary`, `danger` | -| size | 按钮尺寸 | `string` | `normal` | `large`, `small`, `mini` | -| tag | 按钮标签 | `string` | `button` | 任何有意义的`html`标签, 如`a`, `span`等 | -| diabled | 按钮是否禁用 | `boolean` | `false` | | -| block | 按钮是否显示为块级元素 | `boolean` | `false` | | -| bottomAction | 按钮是否显示为底部行动按钮，一般显示在页面底部，有特殊样式 | `boolean` | `false` | | - +| type | 按钮类型 | `String` | `default` | `primary` `danger` | +| size | 按钮尺寸 | `String` | `normal` | `large` `small` `mini` | +| tag | 按钮标签 | `String` | `button` | 任意`HTML`标签 | +| nativeType | 按钮类型（原生） | `String` | `''` | | +| diabled | 是否禁用 | `Boolean` | `false` | | +| loading | 是否显示为加载状态 | `Boolean` | `false` | | +| block | 是否为块级元素 | `Boolean` | `false` | | +| bottomAction | 是否为底部行动按钮 | `Boolean` | `false` | | diff --git a/package.json b/package.json index 5157ab4b4..28c6c2f33 100644 --- a/package.json +++ b/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" } } diff --git a/packages/button/src/button.js b/packages/button/src/button.js index 9c213c2a1..a7bbe476e 100644 --- a/packages/button/src/button.js +++ b/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 - * 按钮 - */ - -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 ( - { - loading - ? - - : null - } - {this.$slots.default} + {loading + ? + : null} + + {this.$slots.default} + ); } diff --git a/yarn.lock b/yarn.lock index d7b1c5855..69ddb1ec9 100644 --- a/yarn.lock +++ b/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: - version "0.1.12" - resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.1.12.tgz#65b3d43c6a18dbb939c5ea28d6a4630697de6824" +zan-doc@0.1.13: + version "0.1.13" + resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.1.13.tgz#df532b538ba613a4fe39e436ec553de3e7c25918" dependencies: cheerio "0.22.0" decamelize "^1.2.0"