Commit b79b53ea6f7f41b7d9d80c3787365a7c08ce8acc
1 parent
5709f32e
Icon add color prop
Icon add color prop
Showing
2 changed files
with
14 additions
and
8 deletions
Show diff stats
src/components/icon/icon.vue
@@ -7,20 +7,25 @@ | @@ -7,20 +7,25 @@ | ||
7 | export default { | 7 | export default { |
8 | props: { | 8 | props: { |
9 | type: String, | 9 | type: String, |
10 | - size: [Number, String] | 10 | + size: [Number, String], |
11 | + color: String | ||
11 | }, | 12 | }, |
12 | computed: { | 13 | computed: { |
13 | classes () { | 14 | classes () { |
14 | return `${prefixCls} ${prefixCls}-${this.type}` | 15 | return `${prefixCls} ${prefixCls}-${this.type}` |
15 | }, | 16 | }, |
16 | styles () { | 17 | styles () { |
18 | + let style = {}; | ||
19 | + | ||
17 | if (!!this.size) { | 20 | if (!!this.size) { |
18 | - return { | ||
19 | - 'font-size': `${this.size}px` | ||
20 | - } | ||
21 | - } else { | ||
22 | - return {} | 21 | + style['font-size'] = `${this.size}px`; |
22 | + } | ||
23 | + | ||
24 | + if (!!this.color) { | ||
25 | + style.color = this.color; | ||
23 | } | 26 | } |
27 | + | ||
28 | + return style; | ||
24 | } | 29 | } |
25 | } | 30 | } |
26 | } | 31 | } |
test/routers/slider.vue
@@ -7,12 +7,13 @@ | @@ -7,12 +7,13 @@ | ||
7 | <!--<Slider :max="10"></Slider>--> | 7 | <!--<Slider :max="10"></Slider>--> |
8 | <!--<Slider :step="13"></Slider>--> | 8 | <!--<Slider :step="13"></Slider>--> |
9 | <!--<Slider :step="13" :max="60"></Slider>--> | 9 | <!--<Slider :step="13" :max="60"></Slider>--> |
10 | + <Icon type="checkmark-circled" size="40" color="#f60"></Icon> | ||
10 | </div> | 11 | </div> |
11 | </template> | 12 | </template> |
12 | <script> | 13 | <script> |
13 | - import { Slider } from 'iview'; | 14 | + import { Slider, Icon } from 'iview'; |
14 | export default { | 15 | export default { |
15 | - components: { Slider }, | 16 | + components: { Slider, Icon }, |
16 | data () { | 17 | data () { |
17 | return { | 18 | return { |
18 | value: [20, 50] | 19 | value: [20, 50] |