frontend / zui

Download as
Browse Code »

Commit 1b9e80dbd4b914f606e6d8db46df2839b057ce36

Authored by 刘汉宸
1 parent 359a08e0
Exists in master

style: 优化Button组件

Showing 4 changed files with 205 additions and 70 deletions   Show diff stats
.gitignore
  Diff comments   View file @1b9e80d
1 1 .DS_Store
2 2 node_modules
3 3 /dist
  4 +/release
4 5  
5 6 # local env files
6 7 .env.local
... ...
examples/styles/variables.scss
  Diff comments   View file @1b9e80d
... ... @@ -16,4 +16,58 @@ $black: #000;
16 16 $text: #314659;
17 17 $border: #e8e8e8;
18 18 $border-light: rgba(#e8e8e8, 0.2);
19   -$background: #fff;
20 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 75 \ No newline at end of file
... ...
packages/button/index.scss
  Diff comments   View file @1b9e80d
1   -$primary-zeyi: #FCD404;
2   -
3 1 .zui-button {
4 2 color: #323233;
5 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 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 147 \ No newline at end of file
... ...
packages/button/index.vue
  Diff comments   View file @1b9e80d
1 1 <template>
2   - <div class="zui-button" :class="classRender" :style="style" @click="onClick">
  2 + <button class="zui-button" :class="classRender" @click="onClick">
3 3 <slot></slot>
4   - </div>
  4 + </button>
5 5 </template>
6 6  
7 7 <script>
... ... @@ -23,27 +23,24 @@ export default {
23 23 round: Boolean,
24 24 square: Boolean,
25 25 disabled: Boolean,
  26 + plain: Boolean,
26 27 },
27 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 41 methods: {
45   - onClick: function () {
46   - if (this.$listeners['click'] && !this.disabled) {
  42 + onClick() {
  43 + if (!this.disabled) {
47 44 this.$emit('click');
48 45 }
49 46 },
... ...