Commit 1b9e80dbd4b914f606e6d8db46df2839b057ce36
1 parent
359a08e0
Exists in
master
style: 优化Button组件
Showing
4 changed files
with
205 additions
and
70 deletions
Show diff stats
.gitignore
examples/styles/variables.scss
| @@ -16,4 +16,58 @@ $black: #000; | @@ -16,4 +16,58 @@ $black: #000; | ||
| 16 | $text: #314659; | 16 | $text: #314659; |
| 17 | $border: #e8e8e8; | 17 | $border: #e8e8e8; |
| 18 | $border-light: rgba(#e8e8e8, 0.2); | 18 | $border-light: rgba(#e8e8e8, 0.2); |
| 19 | -$background: #fff; | ||
| 20 | \ No newline at end of file | 19 | \ No newline at end of file |
| 20 | +$background: #fff; | ||
| 21 | + | ||
| 22 | +// NEW STYLE | ||
| 23 | + | ||
| 24 | +// $color-primary: #F39800; | ||
| 25 | + | ||
| 26 | +$color-primary: #FDD108; | ||
| 27 | + | ||
| 28 | +$color-zy-yellow: #FDD108; | ||
| 29 | +$color-zy-orage: #F39800; | ||
| 30 | +$color-zy-green: #074137; | ||
| 31 | + | ||
| 32 | +$color-wx: #07c160; | ||
| 33 | + | ||
| 34 | +$color-blue: #2F86F6; | ||
| 35 | +$color-green: #28AA91; | ||
| 36 | +$color-red: #FF5257; | ||
| 37 | +$color-blue-dark: #5878B4; | ||
| 38 | +$color-ink: #2D2D2D; | ||
| 39 | +$color-grey: #8C8C8C; | ||
| 40 | + | ||
| 41 | +$linear-yellow: linear-gradient(135deg, #FDD108 0%, #FFA000 100%); | ||
| 42 | +$linear-orange: linear-gradient(135deg, #F39800 0%, #FF6400 100%);; | ||
| 43 | +$linear-green: linear-gradient(135deg, #14C3A5 0%, #117361 100%);; | ||
| 44 | + | ||
| 45 | + | ||
| 46 | + | ||
| 47 | +$color-text: #2d2d2d; | ||
| 48 | +$color-text-minor: #8c8c8c; | ||
| 49 | +$color-black: #000; | ||
| 50 | +$color-white: #fff; | ||
| 51 | +$color-border: rgba(151, 151, 151, 0.2); | ||
| 52 | +$color-field: rgba(151, 151, 151, 0.1); | ||
| 53 | + | ||
| 54 | +$color-success: #52c41a; | ||
| 55 | +$color-warning: #fa8c16; | ||
| 56 | +$color-error: #f5222d; | ||
| 57 | + | ||
| 58 | +$color-minor: #8c8c8c; | ||
| 59 | +$color-border: #f0f0f0; | ||
| 60 | +$color-disabled: #ccc; | ||
| 61 | + | ||
| 62 | +$bg-active: #f3f3f3; | ||
| 63 | +$bg-disabled: #f5f5f5; | ||
| 64 | + | ||
| 65 | +$font-lg: 1.3125rem; | ||
| 66 | +$font-md: 0.9375rem; | ||
| 67 | +$font-sm: 0.6875rem; | ||
| 68 | + | ||
| 69 | +$h-gap-lg: 0.625rem; | ||
| 70 | +$h-gap-md: 0.468rem; | ||
| 71 | +$h-gap-sm: 0.3125rem; | ||
| 72 | +$v-gap-lg: 1.4rem; | ||
| 73 | +$v-gap-md: 0.9375rem; | ||
| 74 | +$v-gap-sm: 0.625rem; | ||
| 21 | \ No newline at end of file | 75 | \ No newline at end of file |
packages/button/index.scss
| 1 | -$primary-zeyi: #FCD404; | ||
| 2 | - | ||
| 3 | .zui-button { | 1 | .zui-button { |
| 4 | color: #323233; | 2 | color: #323233; |
| 5 | background-color: #fff; | 3 | background-color: #fff; |
| 6 | - border: 1px solid #ebedf0; | ||
| 7 | - padding: 0.25rem 1rem; | ||
| 8 | - font-size: 0.875rem; | 4 | + padding: $h-gap-md $v-gap-md; |
| 5 | + font-size: $font-md; | ||
| 6 | + font-weight: normal; | ||
| 7 | + font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; | ||
| 9 | cursor: pointer; | 8 | cursor: pointer; |
| 10 | - transition: background-color 70ms; | ||
| 11 | - display: flex; | ||
| 12 | - align-items: center; | ||
| 13 | - justify-content: center; | ||
| 14 | - &.sm { | ||
| 15 | - padding: 0.125rem 0.25rem; | ||
| 16 | - font-size: 0.625rem; | 9 | + transition: all 70ms ease 20ms; |
| 10 | + border-radius: 0.3125rem; | ||
| 11 | + position: relative; | ||
| 12 | + display: inline-block; | ||
| 13 | + text-align: center; | ||
| 14 | + border: none; | ||
| 15 | + outline: none; | ||
| 16 | + line-height: 1.5; | ||
| 17 | + &::after { | ||
| 18 | + line-height: 1.5; | ||
| 19 | + padding: 0; | ||
| 20 | + margin: 0; | ||
| 21 | + border: none; | ||
| 22 | + content: ""; | ||
| 23 | + pointer-events: none; /* 防止点击触发 */ | ||
| 24 | + box-sizing: border-box; | ||
| 25 | + position: absolute; | ||
| 26 | + width: 200%; | ||
| 27 | + height: 200%; | ||
| 28 | + left: 0; | ||
| 29 | + top: 0; | ||
| 30 | + border: 1px solid $color-border; | ||
| 31 | + border-radius: 0.625rem; | ||
| 32 | + transform: scale(0.5); | ||
| 33 | + transform-origin: 0 0; | ||
| 17 | } | 34 | } |
| 18 | - &.lg { | ||
| 19 | - padding: 0.625rem 1.25rem; | ||
| 20 | - font-size: 1.125rem; | 35 | + &.block { |
| 36 | + display: block; | ||
| 37 | + width: 100%; | ||
| 21 | } | 38 | } |
| 22 | - &:active { | ||
| 23 | - background-color: #e6e6e6; | ||
| 24 | - border-color: #e6e6e6; | 39 | + &.sm { |
| 40 | + padding: $h-gap-sm $v-gap-sm; | ||
| 41 | + font-size: $font-sm; | ||
| 25 | } | 42 | } |
| 26 | - &.primary { | ||
| 27 | - background-color: $primary-zeyi; | ||
| 28 | - border-color: $primary-zeyi; | ||
| 29 | - color: #FFF; | ||
| 30 | - &:active { | ||
| 31 | - background-color: darken($primary-zeyi, 3%); | ||
| 32 | - border-color: darken($primary-zeyi, 3%); | 43 | + &.md { |
| 44 | + padding: $h-gap-md $v-gap-md; | ||
| 45 | + font-size: $font-md; | ||
| 46 | + } | ||
| 47 | + &.lg { | ||
| 48 | + padding: $h-gap-lg $v-gap-lg; | ||
| 49 | + font-size: $font-lg; | ||
| 50 | + } | ||
| 51 | + &:active { | ||
| 52 | + background-color: $bg-active; | ||
| 53 | + &, &::after { | ||
| 54 | + border-color: $bg-active; | ||
| 55 | + } | ||
| 56 | + } | ||
| 57 | + &.primary { | ||
| 58 | + background-color: $color-primary; | ||
| 59 | + color: #FFF; | ||
| 60 | + &:active { | ||
| 61 | + background-color: darken($color-primary, 3%); | ||
| 62 | + &, &::after { | ||
| 63 | + border-color: darken($color-primary, 3%); | ||
| 64 | + } | ||
| 65 | + } | ||
| 66 | + &, &::after { | ||
| 67 | + border-color: $color-primary; | ||
| 68 | + } | ||
| 69 | + } | ||
| 70 | + &.secondary { | ||
| 71 | + background-color: lighten($color-primary, 40%); | ||
| 72 | + color: $color-primary; | ||
| 73 | + &:active { | ||
| 74 | + background-color: lighten($color-primary, 30%); | ||
| 75 | + color: darken($color-primary, 3%); | ||
| 76 | + &, &::after { | ||
| 77 | + border-color: lighten($color-primary, 30%); | ||
| 78 | + } | ||
| 79 | + } | ||
| 80 | + &, &::after { | ||
| 81 | + border-color: lighten($color-primary, 40%); | ||
| 82 | + } | ||
| 83 | + } | ||
| 84 | + &.plain { | ||
| 85 | + &.primary { | ||
| 86 | + color: $color-primary; | ||
| 87 | + background-color: transparent; | ||
| 88 | + &:active { | ||
| 89 | + background-color: rgba($color-primary, 0.1); | ||
| 90 | + } | ||
| 33 | } | 91 | } |
| 34 | - } | ||
| 35 | - &.secondary { | ||
| 36 | - color: $primary-zeyi; | ||
| 37 | - background-color: rgba($primary-zeyi, 7%); | ||
| 38 | - border-color: rgba($primary-zeyi, 7%); | ||
| 39 | - &:active { | ||
| 40 | - background-color: rgba($primary-zeyi, 20%); | ||
| 41 | - border-color: rgba($primary-zeyi, 20%); | ||
| 42 | - } | ||
| 43 | - } | ||
| 44 | - &.link { | ||
| 45 | - padding: 0.25rem 1rem; | ||
| 46 | - background: inherit; | ||
| 47 | - border: inherit; | ||
| 48 | - color: $primary-zeyi; | ||
| 49 | - &:active { | ||
| 50 | - color: darken($primary-zeyi, 3%); | 92 | + &.disabled { |
| 93 | + background-color: rgba($bg-disabled, 0.1); | ||
| 94 | + color: $color-disabled; | ||
| 95 | + cursor: not-allowed; | ||
| 96 | + &:active { | ||
| 97 | + color: $color-disabled; | ||
| 98 | + background-color: rgba($bg-disabled, 0.1); | ||
| 99 | + &, &::after { | ||
| 100 | + border-color: $bg-disabled; | ||
| 101 | + } | ||
| 102 | + } | ||
| 103 | + &, &::after { | ||
| 104 | + border-color: $bg-disabled; | ||
| 105 | + } | ||
| 51 | } | 106 | } |
| 52 | } | 107 | } |
| 53 | - &.disabled { | ||
| 54 | - border-color: #f5f5f5; | ||
| 55 | - background-color: #f5f5f5; | ||
| 56 | - color: #ccc; | ||
| 57 | - cursor: not-allowed; | ||
| 58 | - &:active { | ||
| 59 | - border-color: #f5f5f5; | ||
| 60 | - background-color: #f5f5f5; | 108 | + &.link { |
| 109 | + padding: $h-gap-sm $v-gap-sm; | ||
| 110 | + background: inherit; | ||
| 111 | + border: inherit; | ||
| 112 | + color: $color-primary; | ||
| 113 | + &:active { | ||
| 114 | + color: darken($color-primary, 5%); | ||
| 115 | + } | ||
| 116 | + &::after { | ||
| 117 | + display: none; | ||
| 61 | } | 118 | } |
| 62 | - } | 119 | + } |
| 120 | + &.disabled { | ||
| 121 | + background-color: $bg-disabled; | ||
| 122 | + color: $color-disabled; | ||
| 123 | + cursor: not-allowed; | ||
| 124 | + &:active { | ||
| 125 | + background-color: $bg-disabled; | ||
| 126 | + &, &::after { | ||
| 127 | + border-color: $bg-disabled; | ||
| 128 | + } | ||
| 129 | + } | ||
| 130 | + &, &::after { | ||
| 131 | + border-color: $bg-disabled; | ||
| 132 | + } | ||
| 133 | + } | ||
| 134 | + &.round { | ||
| 135 | + border-radius: 1.5rem; | ||
| 136 | + &::after { | ||
| 137 | + border-radius: 3rem; | ||
| 138 | + } | ||
| 139 | + } | ||
| 140 | + &.square { | ||
| 141 | + border-radius: 0; | ||
| 142 | + &::after { | ||
| 143 | + border-radius: 0; | ||
| 144 | + } | ||
| 145 | + } | ||
| 63 | } | 146 | } |
| 64 | \ No newline at end of file | 147 | \ No newline at end of file |
packages/button/index.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div class="zui-button" :class="classRender" :style="style" @click="onClick"> | 2 | + <button class="zui-button" :class="classRender" @click="onClick"> |
| 3 | <slot></slot> | 3 | <slot></slot> |
| 4 | - </div> | 4 | + </button> |
| 5 | </template> | 5 | </template> |
| 6 | 6 | ||
| 7 | <script> | 7 | <script> |
| @@ -23,27 +23,24 @@ export default { | @@ -23,27 +23,24 @@ export default { | ||
| 23 | round: Boolean, | 23 | round: Boolean, |
| 24 | square: Boolean, | 24 | square: Boolean, |
| 25 | disabled: Boolean, | 25 | disabled: Boolean, |
| 26 | + plain: Boolean, | ||
| 26 | }, | 27 | }, |
| 27 | computed: { | 28 | computed: { |
| 28 | - style: function () { | ||
| 29 | - return { display: this.block ? '' : 'inline-block', borderRadius: this.borderRadius }; | ||
| 30 | - }, | ||
| 31 | - borderRadius: function () { | ||
| 32 | - if (this.round) { | ||
| 33 | - return '1.25rem'; | ||
| 34 | - } else if (this.square) { | ||
| 35 | - return '0'; | ||
| 36 | - } else { | ||
| 37 | - return '0.25rem'; | ||
| 38 | - } | ||
| 39 | - }, | ||
| 40 | - classRender: function () { | ||
| 41 | - return [this.size, this.disabled ? 'disabled' : '', this.block ? 'block' : '', this.type]; | 29 | + classRender() { |
| 30 | + return { | ||
| 31 | + [this.size]: true, | ||
| 32 | + [this.type]: true, | ||
| 33 | + disabled: this.disabled, | ||
| 34 | + block: this.block, | ||
| 35 | + round: this.round, | ||
| 36 | + square: this.square, | ||
| 37 | + plain: this.plain, | ||
| 38 | + }; | ||
| 42 | }, | 39 | }, |
| 43 | }, | 40 | }, |
| 44 | methods: { | 41 | methods: { |
| 45 | - onClick: function () { | ||
| 46 | - if (this.$listeners['click'] && !this.disabled) { | 42 | + onClick() { |
| 43 | + if (!this.disabled) { | ||
| 47 | this.$emit('click'); | 44 | this.$emit('click'); |
| 48 | } | 45 | } |
| 49 | }, | 46 | }, |