frontend / zui

Download as
Browse Code »

Commit b4db79b0b324b8bd5f1c8b6ac86f2a975412e1a4

Authored by 刘汉宸
1 parent 4737d3cd
Exists in master

fix: 修复Button组件基线，支持圆形

Showing 3 changed files with 47 additions and 24 deletions   Show diff stats
examples/views/docs/component/button.md
  Diff comments   View file @b4db79b
... ... @@ -178,6 +178,8 @@
178 178 <zui-button>默认按钮</zui-button>
179 179 <zui-button round>圆角按钮</zui-button>
180 180 <zui-button square>矩形按钮</zui-button>
  181 + <zui-button circle>圆</zui-button>
  182 + <zui-button circle icon="search" color="linear-gradient(to right, #4bb0ff, #6149f6)"></zui-button>
181 183 </div>
182 184 </template>
183 185 ```
... ...
packages/button/index.scss
  Diff comments   View file @b4db79b
1 1 .zui-button {
2   - color: #323233;
3   - background-color: #fff;
4   - padding: $h-gap-md $v-gap-md;
5   - font-size: $font-md;
6   - font-weight: normal;
  2 + color: $color-text;
  3 + background-color: $color-white;
7 4 cursor: pointer;
8   - transition: all 70ms ease;
9 5 border-radius: 0.35rem;
10   - position: relative;
11 6 display: inline-flex;
12 7 align-items: center;
13 8 justify-content: center;
... ... @@ -16,6 +11,7 @@
16 11 line-height: 1.5;
17 12 box-sizing: border-box;
18 13 border: 1px solid transparent;
  14 + vertical-align: middle;
19 15 &__icon {
20 16 padding-right: 0.25rem;
21 17 }
... ... @@ -36,16 +32,37 @@
36 32 padding: $h-gap-sm $v-gap-sm;
37 33 font-size: $font-sm;
38 34 height: $font-sm * 3;
  35 + &.circle {
  36 + height: $font-sm * 3;
  37 + width: $font-sm * 3;
  38 + .zui-icon {
  39 + font-size: $font-md;
  40 + }
  41 + }
39 42 }
40 43 &.md {
41 44 padding: $h-gap-md $v-gap-md;
42 45 font-size: $font-md;
43 46 height: $font-md * 3;
  47 + &.circle {
  48 + height: $font-md * 3;
  49 + width: $font-md * 3;
  50 + .zui-icon {
  51 + font-size: $font-lg;
  52 + }
  53 + }
44 54 }
45 55 &.lg {
46 56 padding: $h-gap-lg $v-gap-lg;
47 57 font-size: $font-lg;
48 58 height: $font-lg * 3;
  59 + &.circle {
  60 + height: $font-lg * 3;
  61 + width: $font-lg * 3;
  62 + .zui-icon {
  63 + font-size: $font-lg * 1.5;
  64 + }
  65 + }
49 66 }
50 67 &.default {
51 68 border-color: $color-border;
... ... @@ -166,4 +183,12 @@
166 183 &.square {
167 184 border-radius: 0;
168 185 }
  186 + &.circle {
  187 + border-radius: 50%;
  188 + overflow: hidden;
  189 + line-height: 1;
  190 + .zui-button__icon {
  191 + padding-right: 0;
  192 + }
  193 + }
169 194 }
170 195 \ No newline at end of file
... ...
packages/button/index.vue
  Diff comments   View file @b4db79b
... ... @@ -29,6 +29,7 @@ export default {
29 29 },
30 30 icon: [String, Object],
31 31 round: Boolean,
  32 + circle: Boolean,
32 33 square: Boolean,
33 34 theme: String,
34 35 color: String,
... ... @@ -47,6 +48,7 @@ export default {
47 48 disabled: this.disabled,
48 49 block: this.block,
49 50 round: this.round,
  51 + circle: this.circle,
50 52 square: this.square,
51 53 custom: !!this.color,
52 54 };
... ... @@ -70,33 +72,27 @@ export default {
70 72 opacity: this.isHover ? 0.9 : 1,
71 73 };
72 74 }
73   - if (this.type === 'primary') {
74   - return {
  75 + const config = {
  76 + primary: {
75 77 backgroundColor: this.isHover ? color(this.color).lighten(0.2) : this.color,
76 78 borderColor: this.isHover ? color(this.color).lighten(0.2) : this.color,
77   - };
78   - } else if (this.type === 'secondary') {
79   - return {
  79 + },
  80 + secondary: {
80 81 backgroundColor: this.isHover ? color(this.color).lightness(90) : color(this.color).lightness(95),
81 82 color: this.color,
82   - };
83   - } else if (this.type === 'plain') {
84   - return {
  83 + },
  84 + plain: {
85 85 borderColor: this.color,
86 86 color: this.color,
87 87 backgroundColor: this.isHover ? color(this.color).lightness(90) : color(this.color).lightness(95),
88   - };
89   - } else if (this.type === 'ghost') {
90   - return {
  88 + },
  89 + ghost: {
91 90 borderColor: this.color,
92 91 color: this.color,
93 92 backgroundColor: this.isHover ? color(this.color).lightness(95) : undefined,
94   - };
95   - } else {
96   - return {
97   - color: this.isHover ? color(this.color).lighten(0.2) : this.color,
98   - };
99   - }
  93 + },
  94 + };
  95 + return config[this.type] || { color: this.isHover ? color(this.color).lighten(0.2) : this.color };
100 96 }
101 97 return {};
102 98 },
... ...