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,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,13 +9,17 @@ | ||
| 9 | transition: all 70ms ease; | 9 | transition: all 70ms ease; |
| 10 | border-radius: 0.35rem; | 10 | border-radius: 0.35rem; |
| 11 | position: relative; | 11 | position: relative; |
| 12 | - display: inline-block; | ||
| 13 | - text-align: center; | 12 | + display: inline-flex; |
| 13 | + align-items: center; | ||
| 14 | + justify-content: center; | ||
| 14 | border: none; | 15 | border: none; |
| 15 | outline: none; | 16 | outline: none; |
| 16 | line-height: 1.5; | 17 | line-height: 1.5; |
| 17 | box-sizing: border-box; | 18 | box-sizing: border-box; |
| 18 | border: 1px solid transparent; | 19 | border: 1px solid transparent; |
| 20 | + &__icon { | ||
| 21 | + padding-right: 0.25rem; | ||
| 22 | + } | ||
| 19 | &.red { | 23 | &.red { |
| 20 | color: $color-red; | 24 | color: $color-red; |
| 21 | } | 25 | } |
| @@ -26,20 +30,23 @@ | @@ -26,20 +30,23 @@ | ||
| 26 | color: $color-green; | 30 | color: $color-green; |
| 27 | } | 31 | } |
| 28 | &.block { | 32 | &.block { |
| 29 | - display: block; | 33 | + display: flex; |
| 30 | width: 100%; | 34 | width: 100%; |
| 31 | } | 35 | } |
| 32 | &.sm { | 36 | &.sm { |
| 33 | padding: $h-gap-sm $v-gap-sm; | 37 | padding: $h-gap-sm $v-gap-sm; |
| 34 | font-size: $font-sm; | 38 | font-size: $font-sm; |
| 39 | + height: $font-sm * 3; | ||
| 35 | } | 40 | } |
| 36 | &.md { | 41 | &.md { |
| 37 | padding: $h-gap-md $v-gap-md; | 42 | padding: $h-gap-md $v-gap-md; |
| 38 | font-size: $font-md; | 43 | font-size: $font-md; |
| 44 | + height: $font-md * 3; | ||
| 39 | } | 45 | } |
| 40 | &.lg { | 46 | &.lg { |
| 41 | padding: $h-gap-lg $v-gap-lg; | 47 | padding: $h-gap-lg $v-gap-lg; |
| 42 | font-size: $font-lg; | 48 | font-size: $font-lg; |
| 49 | + height: $font-lg * 3; | ||
| 43 | } | 50 | } |
| 44 | &.default { | 51 | &.default { |
| 45 | border-color: $color-border; | 52 | border-color: $color-border; |
packages/button/index.vue
| 1 | <template> | 1 | <template> |
| 2 | <button class="zui-button" :class="classRender" :style="styleRender" v-on="bindEvents"> | 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 | <slot></slot> | 6 | <slot></slot> |
| 4 | </button> | 7 | </button> |
| 5 | </template> | 8 | </template> |
| @@ -24,6 +27,7 @@ export default { | @@ -24,6 +27,7 @@ export default { | ||
| 24 | type: Boolean, | 27 | type: Boolean, |
| 25 | default: false, | 28 | default: false, |
| 26 | }, | 29 | }, |
| 30 | + icon: [String, Object], | ||
| 27 | round: Boolean, | 31 | round: Boolean, |
| 28 | square: Boolean, | 32 | square: Boolean, |
| 29 | disabled: Boolean, | 33 | disabled: Boolean, |
| @@ -48,6 +52,12 @@ export default { | @@ -48,6 +52,12 @@ export default { | ||
| 48 | custom: !!this.color, | 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 | styleRender() { | 61 | styleRender() { |
| 52 | if (this.color) { | 62 | if (this.color) { |
| 53 | if (this.color.includes('linear-gradient')) { | 63 | if (this.color.includes('linear-gradient')) { |