mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Button: optimize doc
This commit is contained in:
陈嘉涵
parent
f151a1cb46
commit
9f12a03771
@ -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 {
|
||||
margin-bottom: 0;
|
||||
&--large,
|
||||
&--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-col span="24">
|
||||
<van-button block>default</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>
|
||||
<van-button type="default">Default</van-button>
|
||||
<van-button type="primary">Primary</van-button>
|
||||
<van-button type="danger">Danger</van-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 按钮尺寸
|
||||
|
||||
只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。`large`按钮默认100%宽度。
|
||||
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
|
||||
|
||||
:::demo 按钮尺寸
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button size="large">large</van-button>
|
||||
</van-col>
|
||||
<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>
|
||||
<van-col span="24">
|
||||
<van-button size="mini">mini</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-button size="large">large</van-button>
|
||||
<van-button size="normal">normal</van-button>
|
||||
<van-button size="small">small</van-button>
|
||||
<van-button size="mini">mini</van-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用状态
|
||||
|
||||
通过`disabled`属性来禁用按钮，此时按钮不可点击
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<van-button disabled>diabled</van-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 加载状态
|
||||
|
||||
:::demo 加载状态
|
||||
```html
|
||||
<van-button loading />
|
||||
```
|
||||
:::
|
||||
|
||||
#### 自定义按钮标签
|
||||
|
||||
按钮默认是`button`标签，可以使用`tag`属性修改为一个`a`标签。
|
||||
按钮标签默认为`button`，可以使用`tag`属性来修改按钮标签
|
||||
|
||||
:::demo 自定义按钮标签
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</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>
|
||||
<van-button tag="a" href="https://www.youzan.com" target="_blank">
|
||||
a标签按钮
|
||||
</van-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 页面底部操作按钮
|
||||
|
||||
一般用于`fixed`在底部的区域或是`popup`弹层的底部，一般只使用`primary`和`normal`两种状态。
|
||||
|
||||
:::demo 页面底部操作按钮
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button type="primary" bottom-action>立即购买</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-button type="primary" bottom-action>立即购买</van-button>
|
||||
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-button bottom-action>加入购物车</van-button>
|
||||
@ -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` | |
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
13
yarn.lock
13
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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user