Commit 39ace875fb71df289f67ffdfef38592bf4a21e1d
1 parent
67d3b6d3
Exists in
master
feat: 按钮支持配置图标
Showing
3 changed files
with
39 additions
and
3 deletions
Show diff stats
examples/views/docs/component/button.md
| ... | ... | @@ -139,6 +139,25 @@ |
| 139 | 139 | |
| 140 | 140 | ::: |
| 141 | 141 | |
| 142 | +## 按钮图标 | |
| 143 | + | |
| 144 | +支持自定义图标 | |
| 145 | + | |
| 146 | +::: snippet 配置`icon`改变图标，支持`String`、`Object`类型 | |
| 147 | + | |
| 148 | +```html | |
| 149 | +<template> | |
| 150 | + <div> | |
| 151 | + <zui-button icon="accountbalancewallet">Default</zui-button> | |
| 152 | + <zui-button :icon="{ name: 'tongzhi', svg: true }">Default</zui-button> | |
| 153 | + <zui-button icon="accountbalancewallet" type="primary">Primary</zui-button> | |
| 154 | + <zui-button :icon="{ src: 'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/top_2@1x-50e9c7fdf4.png' }" type="primary">Primary</zui-button> | |
| 155 | + </div> | |
| 156 | +</template> | |
| 157 | +``` | |
| 158 | + | |
| 159 | +::: | |
| 160 | + | |
| 142 | 161 | ## 按钮形状 |
| 143 | 162 | |
| 144 | 163 | 支持默认、圆角、矩形按钮 | ... | ... |
packages/button/index.scss
| ... | ... | @@ -9,13 +9,17 @@ |
| 9 | 9 | transition: all 70ms ease; |
| 10 | 10 | border-radius: 0.35rem; |
| 11 | 11 | position: relative; |
| 12 | - display: inline-block; | |
| 13 | - text-align: center; | |
| 12 | + display: inline-flex; | |
| 13 | + align-items: center; | |
| 14 | + justify-content: center; | |
| 14 | 15 | border: none; |
| 15 | 16 | outline: none; |
| 16 | 17 | line-height: 1.5; |
| 17 | 18 | box-sizing: border-box; |
| 18 | 19 | border: 1px solid transparent; |
| 20 | + &__icon { | |
| 21 | + padding-right: 0.25rem; | |
| 22 | + } | |
| 19 | 23 | &.red { |
| 20 | 24 | color: $color-red; |
| 21 | 25 | } |
| ... | ... | @@ -26,20 +30,23 @@ |
| 26 | 30 | color: $color-green; |
| 27 | 31 | } |
| 28 | 32 | &.block { |
| 29 | - display: block; | |
| 33 | + display: flex; | |
| 30 | 34 | width: 100%; |
| 31 | 35 | } |
| 32 | 36 | &.sm { |
| 33 | 37 | padding: $h-gap-sm $v-gap-sm; |
| 34 | 38 | font-size: $font-sm; |
| 39 | + height: $font-sm * 3; | |
| 35 | 40 | } |
| 36 | 41 | &.md { |
| 37 | 42 | padding: $h-gap-md $v-gap-md; |
| 38 | 43 | font-size: $font-md; |
| 44 | + height: $font-md * 3; | |
| 39 | 45 | } |
| 40 | 46 | &.lg { |
| 41 | 47 | padding: $h-gap-lg $v-gap-lg; |
| 42 | 48 | font-size: $font-lg; |
| 49 | + height: $font-lg * 3; | |
| 43 | 50 | } |
| 44 | 51 | &.default { |
| 45 | 52 | border-color: $color-border; | ... | ... |
packages/button/index.vue
| 1 | 1 | <template> |
| 2 | 2 | <button class="zui-button" :class="classRender" :style="styleRender" v-on="bindEvents"> |
| 3 | + <span v-if="icon" class="zui-button__icon"> | |
| 4 | + <zui-icon v-bind="bindIcon"></zui-icon> | |
| 5 | + </span> | |
| 3 | 6 | <slot></slot> |
| 4 | 7 | </button> |
| 5 | 8 | </template> |
| ... | ... | @@ -24,6 +27,7 @@ export default { |
| 24 | 27 | type: Boolean, |
| 25 | 28 | default: false, |
| 26 | 29 | }, |
| 30 | + icon: [String, Object], | |
| 27 | 31 | round: Boolean, |
| 28 | 32 | square: Boolean, |
| 29 | 33 | disabled: Boolean, |
| ... | ... | @@ -48,6 +52,12 @@ export default { |
| 48 | 52 | custom: !!this.color, |
| 49 | 53 | }; |
| 50 | 54 | }, |
| 55 | + bindIcon() { | |
| 56 | + if (typeof this.icon === 'object' && this.icon instanceof Object) { | |
| 57 | + return this.icon; | |
| 58 | + } | |
| 59 | + return { name: this.icon }; | |
| 60 | + }, | |
| 51 | 61 | styleRender() { |
| 52 | 62 | if (this.color) { |
| 53 | 63 | if (this.color.includes('linear-gradient')) { | ... | ... |