chenhaodong / mew-iview

Commit b4fe39f7e16c434dfb669099c641b424ea4e0b53

Authored by 梁灏
1 parent bfeab68f

Button add ghost prop

Showing 5 changed files with 115 additions and 37 deletions   Show diff stats
Inline Side-by-side
examples/routers/button.vue
  Show/Hide comments   View file @b4fe39f
1 1 <template>
2 2 <div>
  3 + <Button type="default">Default</Button>
  4 + <Button type="primary">Primary</Button>
  5 + <Button type="dashed">Dashed</Button>
  6 + <Button type="info">Info</Button>
  7 + <Button type="success">Success</Button>
  8 + <Button type="warning">Warning</Button>
  9 + <Button type="error">Error</Button>
  10 + <Button type="text">Text</Button>
  11 + <br><br><br>
  12 + <div style="padding: 20px;background: #dddee1">
  13 + <Button type="default" ghost>Default</Button>
  14 + <Button type="primary" ghost>Primary</Button>
  15 + <Button type="dashed" ghost>Dashed</Button>
  16 + <Button type="info" ghost>Info</Button>
  17 + <Button type="success" ghost>Success</Button>
  18 + <Button type="warning" ghost>Warning</Button>
  19 + <Button type="error" ghost>Error</Button>
  20 + <Button type="text" ghost>Text</Button>
  21 + </div>
  22 + <br><br><br>
3 23 <Button type="primary" icon="ios-information-circle" size="small">Search</Button>
4 24 <Button type="primary" icon="ios-information-circle" size="default">Search</Button>
5 25 <Button type="primary" icon="ios-information-circle" size="large">Search</Button>
... ... @@ -19,7 +39,7 @@
19 39 <hr>
20 40 <Button>Default</Button>
21 41 <Button type="primary">Primary</Button>
22   - <Button type="ghost">Ghost</Button>
  42 + <Button type="default">Ghost</Button>
23 43 <Button type="dashed">Dashed</Button>
24 44 <Button type="text">Text</Button>
25 45 <br><br>
... ... @@ -33,10 +53,10 @@
33 53 <Button type="primary" shape="circle" icon="ios-search">Search</Button>
34 54 <Button type="primary" shape="circle">Circle</Button>
35 55 <br><br>
36   - <Button type="ghost" shape="circle" icon="ios-search"></Button>
37   - <Button type="ghost" icon="ios-search">Search</Button>
38   - <Button type="ghost" shape="circle" icon="ios-search">Search</Button>
39   - <Button type="ghost" shape="circle">Circle</Button>
  56 + <Button type="default" shape="circle" icon="ios-search"></Button>
  57 + <Button type="default" icon="ios-search">Search</Button>
  58 + <Button type="default" shape="circle" icon="ios-search">Search</Button>
  59 + <Button type="default" shape="circle">Circle</Button>
40 60 <br><br>
41 61 <Button>Default</Button>
42 62 <Button disabled>Default(Disabled)</Button>
... ... @@ -44,8 +64,8 @@
44 64 <Button type="primary">Primary</Button>
45 65 <Button type="primary" disabled>Primary(Disabled)</Button>
46 66 <br>
47   - <Button type="ghost">Ghost</Button>
48   - <Button type="ghost" disabled>Ghost(Disabled)</Button>
  67 + <Button type="default">Ghost</Button>
  68 + <Button type="default" disabled>Ghost(Disabled)</Button>
49 69 <br>
50 70 <Button type="dashed">Dashed</Button>
51 71 <Button type="dashed" disabled>Dashed(Disabled)</Button>
... ... @@ -69,7 +89,7 @@
69 89 <Button-group>
70 90 <Button type="primary">L</Button>
71 91 <Button>M</Button>
72   - <Button type="ghost">M</Button>
  92 + <Button type="default">M</Button>
73 93 <Button type="dashed">R</Button>
74 94 </Button-group>
75 95 <br><br>
... ... @@ -90,10 +110,10 @@
90 110 <Button type="primary" icon="ios-skipforward"></Button>
91 111 </Button-group>
92 112 <Button-group>
93   - <Button type="ghost" icon="ios-color-wand-outline"></Button>
94   - <Button type="ghost" icon="ios-sunny-outline"></Button>
95   - <Button type="ghost" icon="ios-crop"></Button>
96   - <Button type="ghost" icon="ios-color-filter-outline"></Button>
  113 + <Button type="default" icon="ios-color-wand-outline"></Button>
  114 + <Button type="default" icon="ios-sunny-outline"></Button>
  115 + <Button type="default" icon="ios-crop"></Button>
  116 + <Button type="default" icon="ios-color-filter-outline"></Button>
97 117 </Button-group>
98 118 <br><br>
99 119 <h4>圆角</h4>
... ... @@ -113,38 +133,38 @@
113 133 <Button type="primary" icon="ios-skipforward"></Button>
114 134 </Button-group>
115 135 <Button-group shape="circle">
116   - <Button type="ghost" icon="ios-color-wand-outline"></Button>
117   - <Button type="ghost" icon="ios-sunny-outline"></Button>
118   - <Button type="ghost" icon="ios-crop"></Button>
119   - <Button type="ghost" icon="ios-color-filter-outline"></Button>
  136 + <Button type="default" icon="ios-color-wand-outline"></Button>
  137 + <Button type="default" icon="ios-sunny-outline"></Button>
  138 + <Button type="default" icon="ios-crop"></Button>
  139 + <Button type="default" icon="ios-color-filter-outline"></Button>
120 140 </Button-group>
121 141 <br><br>
122 142 <h4>尺寸</h4>
123 143 <br><br>
124 144 <Button-group size="large">
125   - <Button type="ghost">Large</Button>
126   - <Button type="ghost">Large</Button>
  145 + <Button type="default">Large</Button>
  146 + <Button type="default">Large</Button>
127 147 </Button-group>
128 148 <Button-group>
129   - <Button type="ghost">Default</Button>
130   - <Button type="ghost">Default</Button>
  149 + <Button type="default">Default</Button>
  150 + <Button type="default">Default</Button>
131 151 </Button-group>
132 152 <Button-group size="small">
133   - <Button type="ghost">Small</Button>
134   - <Button type="ghost">Small</Button>
  153 + <Button type="default">Small</Button>
  154 + <Button type="default">Small</Button>
135 155 </Button-group>
136 156 <br><br>
137 157 <Button-group size="large" shape="circle">
138   - <Button type="ghost">Large</Button>
139   - <Button type="ghost">Large</Button>
  158 + <Button type="default">Large</Button>
  159 + <Button type="default">Large</Button>
140 160 </Button-group>
141 161 <Button-group shape="circle">
142   - <Button type="ghost">Default</Button>
143   - <Button type="ghost">Default</Button>
  162 + <Button type="default">Default</Button>
  163 + <Button type="default">Default</Button>
144 164 </Button-group>
145 165 <Button-group size="small" shape="circle">
146   - <Button type="ghost">Small</Button>
147   - <Button type="ghost">Small</Button>
  166 + <Button type="default">Small</Button>
  167 + <Button type="default">Small</Button>
148 168 </Button-group>
149 169 </div>
150 170 </template>
... ...
src/components/button/button.vue
  Show/Hide comments   View file @b4fe39f
... ... @@ -35,8 +35,9 @@
35 35 props: {
36 36 type: {
37 37 validator (value) {
38   - return oneOf(value, ['primary', 'ghost', 'dashed', 'text', 'info', 'success', 'warning', 'error', 'default']);
39   - }
  38 + return oneOf(value, ['default', 'primary', 'dashed', 'text', 'info', 'success', 'warning', 'error']);
  39 + },
  40 + default: 'default'
40 41 },
41 42 shape: {
42 43 validator (value) {
... ... @@ -68,6 +69,10 @@
68 69 type: Boolean,
69 70 default: false
70 71 },
  72 + ghost: {
  73 + type: Boolean,
  74 + default: false
  75 + }
71 76 },
72 77 data () {
73 78 return {
... ... @@ -84,7 +89,8 @@
84 89 [`${prefixCls}-${this.shape}`]: !!this.shape,
85 90 [`${prefixCls}-${this.size}`]: !!this.size,
86 91 [`${prefixCls}-loading`]: this.loading != null && this.loading,
87   - [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || !!this.customIcon || this.loading)
  92 + [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || !!this.customIcon || this.loading),
  93 + [`${prefixCls}-ghost`]: this.ghost
88 94 }
89 95 ];
90 96 }
... ...
src/styles/components/button.less
  Show/Hide comments   View file @b4fe39f
... ... @@ -60,9 +60,9 @@
60 60 }
61 61 }
62 62  
63   - &-ghost {
64   - .btn-ghost;
65   - }
  63 + //&-ghost {
  64 + // .btn-ghost;
  65 + //}
66 66  
67 67 &-dashed{
68 68 .btn-dashed;
... ... @@ -125,4 +125,56 @@
125 125 &-group-vertical {
126 126 .btn-group-vertical(@btn-prefix-cls);
127 127 }
  128 +
  129 + // The new ghost in 3.0
  130 + &-ghost{
  131 + color: #fff;
  132 + background: transparent;
  133 + &:hover{
  134 + background: transparent;
  135 + }
  136 + }
  137 + &-ghost&-dashed, &-ghost&-default{
  138 + color: #fff;
  139 + border-color: #fff;
  140 + &:hover{
  141 + color: tint(@primary-color, 20%);
  142 + border-color: tint(@primary-color, 20%);
  143 + }
  144 + }
  145 + &-ghost&-primary{
  146 + color: @primary-color;
  147 + &:hover{
  148 + color: tint(@primary-color, 20%);
  149 + background: fade(tint(@primary-color, 95%), 50%);
  150 + }
  151 + }
  152 + &-ghost&-info{
  153 + color: @info-color;
  154 + &:hover{
  155 + color: tint(@info-color, 20%);
  156 + background: fade(tint(@info-color, 95%), 50%);
  157 + }
  158 + }
  159 + &-ghost&-success{
  160 + color: @success-color;
  161 + &:hover{
  162 + color: tint(@success-color, 20%);
  163 + background: fade(tint(@success-color, 95%), 50%);
  164 + }
  165 + }
  166 + &-ghost&-warning{
  167 + color: @warning-color;
  168 + &:hover{
  169 + color: tint(@warning-color, 20%);
  170 + background: fade(tint(@warning-color, 95%), 50%);
  171 + }
  172 + }
  173 + &-ghost&-error{
  174 + color: @error-color;
  175 + &:hover{
  176 + color: tint(@error-color, 20%);
  177 + background: fade(tint(@error-color, 95%), 50%);
  178 + }
  179 + }
128 180 }
... ...
src/styles/custom.less
  Show/Hide comments   View file @b4fe39f
... ... @@ -81,14 +81,14 @@
81 81 @btn-disable-border : @border-color-base;
82 82  
83 83 @btn-default-color : @text-color;
84   -@btn-default-bg : @background-color-base;
  84 +@btn-default-bg : #fff;
85 85 @btn-default-border : @border-color-base;
86 86  
87 87 @btn-primary-color : #fff;
88 88 @btn-primary-bg : @primary-color;
89 89  
90 90 @btn-ghost-color : @text-color;
91   -@btn-ghost-bg : transparent;
  91 +@btn-ghost-bg : #fff;
92 92 @btn-ghost-border : @border-color-base;
93 93  
94 94 @btn-circle-size : 32px;
... ...
src/styles/mixins/button.less
  Show/Hide comments   View file @b4fe39f
... ... @@ -246,7 +246,7 @@
246 246  
247 247 // Text
248 248 .btn-text() {
249   - .button-variant(@btn-ghost-color, @btn-ghost-bg, transparent);
  249 + .button-variant(@btn-ghost-color, transparent, transparent);
250 250  
251 251 // for disabled
252 252 &.disabled,
... ...