Commit 1f61a559832b87cc929712fbbbe30d6631e6a3f2
1 parent
c0fa72ca
update ColorPicker
Showing
4 changed files
with
26 additions
and
16 deletions
Show diff stats
examples/routers/color-picker.vue
| ... | ... | @@ -4,12 +4,12 @@ |
| 4 | 4 | <!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>--> |
| 5 | 5 | <!--<color-picker placement="bottom-start" size="large"></color-picker>--> |
| 6 | 6 | <!--<Date-picker type="date" placeholder="选择日期" size="large" style="width: 200px"></Date-picker>--> |
| 7 | - <color-picker ref="xxx" v-model="color" alpha :recommend="true"></color-picker> | |
| 7 | + <color-picker ref="xxx" v-model="color" :recommend="true"></color-picker> | |
| 8 | 8 | <color-picker v-model="color2" :alpha="false" :recommend="false"></color-picker> |
| 9 | 9 | <!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>--> |
| 10 | 10 | <!--<color-picker placement="bottom-start" size="small"></color-picker>--> |
| 11 | 11 | <!--<Date-picker type="date" placeholder="选择日期" size="small" style="width: 200px"></Date-picker>--> |
| 12 | - <Button @click="do2">do2</Button> | |
| 12 | + <Button @click="setColor">set color</Button> | |
| 13 | 13 | </div> |
| 14 | 14 | </template> |
| 15 | 15 | <script> |
| ... | ... | @@ -17,14 +17,14 @@ |
| 17 | 17 | props: {}, |
| 18 | 18 | data () { |
| 19 | 19 | return { |
| 20 | - color: 'rgba(124,24,24,.5)', | |
| 20 | + color: '', | |
| 21 | 21 | color2: '' |
| 22 | 22 | }; |
| 23 | 23 | }, |
| 24 | 24 | computed: {}, |
| 25 | 25 | methods: { |
| 26 | - do2 () { | |
| 27 | - this.$refs.xxx.do2(); | |
| 26 | + setColor () { | |
| 27 | + this.color = '#26bc77'; | |
| 28 | 28 | } |
| 29 | 29 | } |
| 30 | 30 | }; | ... | ... |
src/components/color-picker/color-picker.vue
| ... | ... | @@ -4,10 +4,10 @@ |
| 4 | 4 | <i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i> |
| 5 | 5 | <div :class="inputClasses"> |
| 6 | 6 | <div :class="[prefixCls + '-color']"> |
| 7 | - <div :class="[prefixCls + '-color-empty']" v-if="value === '' && !visible"> | |
| 7 | + <div :class="[prefixCls + '-color-empty']" v-show="value === '' && !visible"> | |
| 8 | 8 | <Icon type="ios-close-empty"></Icon> |
| 9 | 9 | </div> |
| 10 | - <div v-else :style="{backgroundColor: displayedColor}"></div> | |
| 10 | + <div v-show="value || visible" :style="{backgroundColor: displayedColor}"></div> | |
| 11 | 11 | </div> |
| 12 | 12 | </div> |
| 13 | 13 | </div> |
| ... | ... | @@ -22,8 +22,16 @@ |
| 22 | 22 | <div v-if="alpha" :class="[prefixCls + '-picker-alpha-slider']"> |
| 23 | 23 | <Alpha v-model="saturationColors" @change="childChange"></Alpha> |
| 24 | 24 | </div> |
| 25 | - <recommend-colors v-if="colors.length" :list="colors" :class="[prefixCls + '-picker-colors']"></recommend-colors> | |
| 26 | - <recommend-colors v-if="!colors.length && recommend" :list="recommendedColor" :class="[prefixCls + '-picker-colors']"></recommend-colors> | |
| 25 | + <recommend-colors | |
| 26 | + v-if="colors.length" | |
| 27 | + :list="colors" | |
| 28 | + :class="[prefixCls + '-picker-colors']" | |
| 29 | + @picker-color="handleSelectColor"></recommend-colors> | |
| 30 | + <recommend-colors | |
| 31 | + v-if="!colors.length && recommend" | |
| 32 | + :list="recommendedColor" | |
| 33 | + :class="[prefixCls + '-picker-colors']" | |
| 34 | + @picker-color="handleSelectColor"></recommend-colors> | |
| 27 | 35 | <Confirm @on-pick-success="handleSuccess" @on-pick-clear="handleClear"></Confirm> |
| 28 | 36 | </div> |
| 29 | 37 | </Dropdown-menu> |
| ... | ... | @@ -278,6 +286,9 @@ |
| 278 | 286 | handleClear () { |
| 279 | 287 | this.$emit('input', ''); |
| 280 | 288 | this.$refs.picker.handleClose(); |
| 289 | + }, | |
| 290 | + handleSelectColor (color) { | |
| 291 | + this.val = _colorChange(color); | |
| 281 | 292 | } |
| 282 | 293 | } |
| 283 | 294 | }; | ... | ... |
src/components/color-picker/recommend-colors.vue
| 1 | 1 | <template> |
| 2 | 2 | <div> |
| 3 | 3 | <template v-for="(item, index) in list"> |
| 4 | - <span><em :style="{'background': item}"></em></span> | |
| 4 | + <span @click="handleClick(index)"><em :style="{'background': item}"></em></span> | |
| 5 | 5 | <br v-if="(index + 1) % 10 === 0 && index !== 0 && (index + 1) !== list.length"> |
| 6 | 6 | </template> |
| 7 | 7 | </div> |
| ... | ... | @@ -11,13 +11,10 @@ |
| 11 | 11 | props: { |
| 12 | 12 | list: Array |
| 13 | 13 | }, |
| 14 | - data () { | |
| 15 | - return { | |
| 16 | - | |
| 17 | - }; | |
| 18 | - }, | |
| 19 | 14 | methods: { |
| 20 | - | |
| 15 | + handleClick (index) { | |
| 16 | + this.$emit('picker-color', this.list[index]); | |
| 17 | + } | |
| 21 | 18 | } |
| 22 | 19 | }; |
| 23 | 20 | </script> |
| 24 | 21 | \ No newline at end of file | ... | ... |
src/styles/components/color-picker.less
| ... | ... | @@ -152,6 +152,7 @@ |
| 152 | 152 | bottom: 0; |
| 153 | 153 | left: 0; |
| 154 | 154 | overflow: hidden; |
| 155 | + border-radius: 2px; | |
| 155 | 156 | } |
| 156 | 157 | &-checkerboard{ |
| 157 | 158 | position: absolute; |
| ... | ... | @@ -167,6 +168,7 @@ |
| 167 | 168 | right: 0; |
| 168 | 169 | bottom: 0; |
| 169 | 170 | left: 0; |
| 171 | + border-radius: 2px; | |
| 170 | 172 | } |
| 171 | 173 | &-container{ |
| 172 | 174 | cursor: pointer; | ... | ... |