diff --git a/packages/button/demo/index.vue b/packages/button/demo/index.vue index f215872f4..7b490bd2e 100644 --- a/packages/button/demo/index.vue +++ b/packages/button/demo/index.vue @@ -31,13 +31,12 @@ - + - - {{ $t('button') }} - + {{ $t('square') }} + {{ $t('round') }} @@ -49,8 +48,7 @@ export default { title1: '按钮类型', title2: '按钮尺寸', title3: '加载状态', - title4: '自定义按钮标签', - title5: '页面底部操作按钮', + title4: '按钮形状', default: '默认按钮', primary: '主要按钮', danger: '危险按钮', @@ -59,14 +57,15 @@ export default { normal: '普通按钮', small: '小型按钮', mini: '迷你按钮', - plain: '朴素按钮' + plain: '朴素按钮', + square: '方形按钮', + round: '圆形按钮' }, 'en-US': { title1: 'Type', title2: 'Size', title3: 'Loading', - title4: 'Custom Tag', - title5: 'Action Button', + title4: 'Shape', default: 'Default', primary: 'Primary', danger: 'Danger', @@ -75,7 +74,9 @@ export default { normal: 'Normal', small: 'Small', mini: 'Mini', - plain: 'Plain' + plain: 'Plain', + square: 'Square', + round: 'Round' } } }; diff --git a/packages/button/en-US.md b/packages/button/en-US.md index 03a0edaad..4ed14ed27 100644 --- a/packages/button/en-US.md +++ b/packages/button/en-US.md @@ -49,13 +49,11 @@ Vue.use(Button); ``` -#### Custom Tag -Use `tag` prop to custom button tag +#### Shape ```html - - Button - +Square +Round ``` ### API @@ -71,6 +69,7 @@ Use `tag` prop to custom button tag | disabled | Whether to disable button | `Boolean` | `false` | | loading | Whether show loading status | `Boolean` | `false` | | block | Whether to set display block | `Boolean` | `false` | +| round | Whether to be round button | `Boolean` | `false` | | square | Whether to be square button | `Boolean` | `false` | ### Event diff --git a/packages/button/index.vue b/packages/button/index.vue index 6fb8984d7..5cc35393b 100644 --- a/packages/button/index.vue +++ b/packages/button/index.vue @@ -9,6 +9,7 @@ { block, plain, + round, square, loading, disabled, @@ -35,6 +36,7 @@ export default create({ text: String, block: Boolean, plain: Boolean, + round: Boolean, square: Boolean, loading: Boolean, disabled: Boolean, diff --git a/packages/button/test/__snapshots__/demo.spec.js.snap b/packages/button/test/__snapshots__/demo.spec.js.snap index 62f5abf60..49c5e5f40 100644 --- a/packages/button/test/__snapshots__/demo.spec.js.snap +++ b/packages/button/test/__snapshots__/demo.spec.js.snap @@ -31,14 +31,13 @@ exports[`renders demo correctly 1`] = ` -
- - 按钮 - + +
`; diff --git a/packages/button/zh-CN.md b/packages/button/zh-CN.md index 5f79aa613..1e21c7ab5 100644 --- a/packages/button/zh-CN.md +++ b/packages/button/zh-CN.md @@ -39,6 +39,7 @@ Vue.use(Button); ``` #### 禁用状态 + 通过`disabled`属性来禁用按钮,此时按钮不可点击 ```html @@ -52,14 +53,11 @@ Vue.use(Button); ``` -#### 自定义按钮标签 - -按钮标签默认为`button`,可以使用`tag`属性来修改按钮标签 +#### 按钮形状 ```html - - 按钮 - +方形按钮 +圆形按钮 ``` @@ -73,9 +71,10 @@ Vue.use(Button); | tag | 按钮 HTML 标签 | `String` | `button` | | native-type | 按钮类型(原生) | `String` | - | | plain | 是否为朴素按钮 | `Boolean` | `false` | -| disabled | 是否禁用 | `Boolean` | `false` | +| disabled | 是否禁用按钮 | `Boolean` | `false` | | loading | 是否显示为加载状态 | `Boolean` | `false` | | block | 是否为块级元素 | `Boolean` | `false` | +| round | 是否为圆形按钮 | `Boolean` | `false` | | square | 是否为方形按钮 | `Boolean` | `false` | ### Event diff --git a/packages/vant-css/src/button.css b/packages/vant-css/src/button.css index eed4346c4..2b6c6d2c9 100644 --- a/packages/vant-css/src/button.css +++ b/packages/vant-css/src/button.css @@ -140,6 +140,10 @@ border: 1px solid $button-disabled-border-color; } + &--round { + border-radius: 10em; + } + &--square { border-radius: 0; }