Commit 4109bbc6c1ba17b8f0ebbe8a7a8c78852fd9a1b9
1 parent
8105945f
update ColorPicker
Showing
3 changed files
with
85 additions
and
48 deletions
Show diff stats
examples/routers/color-picker.vue
| @@ -2,13 +2,13 @@ | @@ -2,13 +2,13 @@ | ||
| 2 | <div style="margin: 100px;"> | 2 | <div style="margin: 100px;"> |
| 3 | {{ color }} | 3 | {{ color }} |
| 4 | <!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>--> | 4 | <!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>--> |
| 5 | - <!--<color-picker placement="bottom-start" size="large"></color-picker>--> | ||
| 6 | - <Date-picker transfer type="date" placeholder="选择日期" size="large" style="width: 200px"></Date-picker> | 5 | + <color-picker v-model="color" placement="bottom-start" size="large"></color-picker> |
| 6 | + <Date-picker transfer type="date" placeholder="选择日期" style="width: 200px"></Date-picker> | ||
| 7 | <color-picker :transfer="true" ref="xxx" v-model="color" format="rgb" alpha :recommend="true"></color-picker> | 7 | <color-picker :transfer="true" ref="xxx" v-model="color" format="rgb" alpha :recommend="true"></color-picker> |
| 8 | - <color-picker v-model="color2" :alpha="false" :recommend="false"></color-picker> | 8 | + <color-picker v-model="color2" format="hsv" :alpha="true" :recommend="false"></color-picker> |
| 9 | <!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>--> | 9 | <!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>--> |
| 10 | - <!--<color-picker placement="bottom-start" size="small"></color-picker>--> | ||
| 11 | - <!--<Date-picker type="date" placeholder="选择日期" size="small" style="width: 200px"></Date-picker>--> | 10 | + <color-picker v-model="color" placement="bottom-start" size="small"></color-picker> |
| 11 | + <Date-picker type="date" placeholder="选择日期" size="small" style="width: 200px"></Date-picker> | ||
| 12 | <Button @click="setColor">set color</Button> | 12 | <Button @click="setColor">set color</Button> |
| 13 | </div> | 13 | </div> |
| 14 | </template> | 14 | </template> |
| @@ -17,7 +17,7 @@ | @@ -17,7 +17,7 @@ | ||
| 17 | props: {}, | 17 | props: {}, |
| 18 | data () { | 18 | data () { |
| 19 | return { | 19 | return { |
| 20 | - color: 'rgba(255,255,255,.85)', | 20 | + color: 'rgba(12,34,255,.85)', |
| 21 | color2: '' | 21 | color2: '' |
| 22 | }; | 22 | }; |
| 23 | }, | 23 | }, |
src/components/color-picker/color-picker.vue
| 1 | <template> | 1 | <template> |
| 2 | - <Dropdown :class="classes" class-name="ivu-transfer-" ref="picker" trigger="click" :transfer="transfer" :placement="placement" @on-visible-change="handleToggleVisible"> | ||
| 3 | - <div :class="wrapClasses"> | 2 | + <div :class="classes" v-clickoutside="handleClose"> |
| 3 | + <div ref="reference" @click="toggleVisible" :class="wrapClasses"> | ||
| 4 | <i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i> | 4 | <i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i> |
| 5 | <div :class="inputClasses"> | 5 | <div :class="inputClasses"> |
| 6 | <div :class="[prefixCls + '-color']"> | 6 | <div :class="[prefixCls + '-color']"> |
| 7 | <div :class="[prefixCls + '-color-empty']" v-show="value === '' && !visible"> | 7 | <div :class="[prefixCls + '-color-empty']" v-show="value === '' && !visible"> |
| 8 | - <Icon type="ios-close-empty"></Icon> | 8 | + <i class="ivu-icon ivu-icon-ios-close-empty"></i> |
| 9 | </div> | 9 | </div> |
| 10 | <div v-show="value || visible" :style="{backgroundColor: displayedColor}"></div> | 10 | <div v-show="value || visible" :style="{backgroundColor: displayedColor}"></div> |
| 11 | </div> | 11 | </div> |
| 12 | </div> | 12 | </div> |
| 13 | </div> | 13 | </div> |
| 14 | - <Dropdown-menu slot="list"> | ||
| 15 | - <div :class="[prefixCls + '-picker']"> | ||
| 16 | - <div :class="[prefixCls + '-picker-wrapper']"> | ||
| 17 | - <div :class="[prefixCls + '-picker-panel']"> | ||
| 18 | - <Saturation v-model="saturationColors" @change="childChange"></Saturation> | 14 | + <transition :name="transition"> |
| 15 | + <Drop | ||
| 16 | + v-show="visible" | ||
| 17 | + @click.native="handleTransferClick" | ||
| 18 | + :class="{ [prefixCls + '-transfer']: transfer }" | ||
| 19 | + class-name="ivu-transfer-no-max-height" | ||
| 20 | + :placement="placement" | ||
| 21 | + ref="drop" | ||
| 22 | + :data-transfer="transfer" | ||
| 23 | + v-transfer-dom> | ||
| 24 | + <div :class="[prefixCls + '-picker']"> | ||
| 25 | + <div :class="[prefixCls + '-picker-wrapper']"> | ||
| 26 | + <div :class="[prefixCls + '-picker-panel']"> | ||
| 27 | + <Saturation v-model="saturationColors" @change="childChange"></Saturation> | ||
| 28 | + </div> | ||
| 29 | + <div :class="[prefixCls + '-picker-hue-slider']"> | ||
| 30 | + <Hue v-model="saturationColors" @change="childChange"></Hue> | ||
| 31 | + </div> | ||
| 32 | + <div v-if="alpha" :class="[prefixCls + '-picker-alpha-slider']"> | ||
| 33 | + <Alpha v-model="saturationColors" @change="childChange"></Alpha> | ||
| 34 | + </div> | ||
| 35 | + <recommend-colors | ||
| 36 | + v-if="colors.length" | ||
| 37 | + :list="colors" | ||
| 38 | + :class="[prefixCls + '-picker-colors']" | ||
| 39 | + @picker-color="handleSelectColor"></recommend-colors> | ||
| 40 | + <recommend-colors | ||
| 41 | + v-if="!colors.length && recommend" | ||
| 42 | + :list="recommendedColor" | ||
| 43 | + :class="[prefixCls + '-picker-colors']" | ||
| 44 | + @picker-color="handleSelectColor"></recommend-colors> | ||
| 19 | </div> | 45 | </div> |
| 20 | - <div :class="[prefixCls + '-picker-hue-slider']"> | ||
| 21 | - <Hue v-model="saturationColors" @change="childChange"></Hue> | 46 | + <div :class="[prefixCls + '-confirm']"> |
| 47 | + <span :class="[prefixCls + '-confirm-color']">{{ formatColor }}</span> | ||
| 48 | + <Confirm @on-pick-success="handleSuccess" @on-pick-clear="handleClear"></Confirm> | ||
| 22 | </div> | 49 | </div> |
| 23 | - <div v-if="alpha" :class="[prefixCls + '-picker-alpha-slider']"> | ||
| 24 | - <Alpha v-model="saturationColors" @change="childChange"></Alpha> | ||
| 25 | - </div> | ||
| 26 | - <recommend-colors | ||
| 27 | - v-if="colors.length" | ||
| 28 | - :list="colors" | ||
| 29 | - :class="[prefixCls + '-picker-colors']" | ||
| 30 | - @picker-color="handleSelectColor"></recommend-colors> | ||
| 31 | - <recommend-colors | ||
| 32 | - v-if="!colors.length && recommend" | ||
| 33 | - :list="recommendedColor" | ||
| 34 | - :class="[prefixCls + '-picker-colors']" | ||
| 35 | - @picker-color="handleSelectColor"></recommend-colors> | ||
| 36 | - </div> | ||
| 37 | - <div :class="[prefixCls + '-confirm']"> | ||
| 38 | - <span :class="[prefixCls + '-confirm-color']">{{ formatColor }}</span> | ||
| 39 | - <Confirm @on-pick-success="handleSuccess" @on-pick-clear="handleClear"></Confirm> | ||
| 40 | </div> | 50 | </div> |
| 41 | - </div> | ||
| 42 | - </Dropdown-menu> | ||
| 43 | - </Dropdown> | 51 | + </Drop> |
| 52 | + </transition> | ||
| 53 | + </div> | ||
| 44 | </template> | 54 | </template> |
| 45 | <script> | 55 | <script> |
| 46 | import tinycolor from 'tinycolor2'; | 56 | import tinycolor from 'tinycolor2'; |
| 47 | 57 | ||
| 48 | - import Icon from '../icon/icon.vue'; | ||
| 49 | - import Dropdown from '../dropdown/dropdown.vue'; | ||
| 50 | - import DropdownMenu from '../dropdown/dropdown-menu.vue'; | 58 | + import clickoutside from '../../directives/clickoutside'; |
| 59 | + import TransferDom from '../../directives/transfer-dom'; | ||
| 60 | + | ||
| 61 | + import Drop from '../../components/select/dropdown.vue'; | ||
| 51 | import RecommendColors from './recommend-colors.vue'; | 62 | import RecommendColors from './recommend-colors.vue'; |
| 52 | import Confirm from '../date-picker/base/confirm.vue'; | 63 | import Confirm from '../date-picker/base/confirm.vue'; |
| 53 | - | ||
| 54 | import Saturation from './saturation.vue'; | 64 | import Saturation from './saturation.vue'; |
| 55 | import Hue from './hue.vue'; | 65 | import Hue from './hue.vue'; |
| 56 | import Alpha from './alpha.vue'; | 66 | import Alpha from './alpha.vue'; |
| @@ -111,7 +121,8 @@ | @@ -111,7 +121,8 @@ | ||
| 111 | 121 | ||
| 112 | export default { | 122 | export default { |
| 113 | name: 'ColorPicker', | 123 | name: 'ColorPicker', |
| 114 | - components: { Icon, Dropdown, DropdownMenu, Confirm, RecommendColors, Saturation, Hue, Alpha }, | 124 | + components: { Drop, Confirm, RecommendColors, Saturation, Hue, Alpha }, |
| 125 | + directives: { clickoutside, TransferDom }, | ||
| 115 | props: { | 126 | props: { |
| 116 | value: { | 127 | value: { |
| 117 | type: String | 128 | type: String |
| @@ -142,7 +153,8 @@ | @@ -142,7 +153,8 @@ | ||
| 142 | size: { | 153 | size: { |
| 143 | validator (value) { | 154 | validator (value) { |
| 144 | return oneOf(value, ['small', 'large', 'default']); | 155 | return oneOf(value, ['small', 'large', 'default']); |
| 145 | - } | 156 | + }, |
| 157 | + default: 'default' | ||
| 146 | }, | 158 | }, |
| 147 | placement: { | 159 | placement: { |
| 148 | validator (value) { | 160 | validator (value) { |
| @@ -160,6 +172,7 @@ | @@ -160,6 +172,7 @@ | ||
| 160 | val: _colorChange(this.value), | 172 | val: _colorChange(this.value), |
| 161 | prefixCls: prefixCls, | 173 | prefixCls: prefixCls, |
| 162 | visible: false, | 174 | visible: false, |
| 175 | + disableCloseUnderTransfer: false, // transfer 模式下，点击Drop也会触发关闭 | ||
| 163 | recommendedColor: [ | 176 | recommendedColor: [ |
| 164 | '#2d8cf0', | 177 | '#2d8cf0', |
| 165 | '#19be6b', | 178 | '#19be6b', |
| @@ -189,6 +202,13 @@ | @@ -189,6 +202,13 @@ | ||
| 189 | }; | 202 | }; |
| 190 | }, | 203 | }, |
| 191 | computed: { | 204 | computed: { |
| 205 | + transition () { | ||
| 206 | + if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') { | ||
| 207 | + return 'slide-up'; | ||
| 208 | + } else { | ||
| 209 | + return 'fade'; | ||
| 210 | + } | ||
| 211 | + }, | ||
| 192 | saturationColors: { | 212 | saturationColors: { |
| 193 | get () { | 213 | get () { |
| 194 | return this.val; | 214 | return this.val; |
| @@ -266,11 +286,30 @@ | @@ -266,11 +286,30 @@ | ||
| 266 | value (newVal) { | 286 | value (newVal) { |
| 267 | this.val = _colorChange(newVal); | 287 | this.val = _colorChange(newVal); |
| 268 | }, | 288 | }, |
| 269 | - visible () { | 289 | + visible (val) { |
| 270 | this.val = _colorChange(this.value); | 290 | this.val = _colorChange(this.value); |
| 291 | + if (val) { | ||
| 292 | + this.$refs.drop.update(); | ||
| 293 | + } else { | ||
| 294 | + this.$refs.drop.destroy(); | ||
| 295 | + } | ||
| 271 | } | 296 | } |
| 272 | }, | 297 | }, |
| 273 | methods: { | 298 | methods: { |
| 299 | + // 开启 transfer 时，点击 Drop 即会关闭，这里不让其关闭 | ||
| 300 | + handleTransferClick () { | ||
| 301 | + if (this.transfer) this.disableCloseUnderTransfer = true; | ||
| 302 | + }, | ||
| 303 | + handleClose () { | ||
| 304 | + if (this.disableCloseUnderTransfer) { | ||
| 305 | + this.disableCloseUnderTransfer = false; | ||
| 306 | + return false; | ||
| 307 | + } | ||
| 308 | + this.visible = false; | ||
| 309 | + }, | ||
| 310 | + toggleVisible () { | ||
| 311 | + this.visible = !this.visible; | ||
| 312 | + }, | ||
| 274 | childChange (data) { | 313 | childChange (data) { |
| 275 | this.colorChange(data); | 314 | this.colorChange(data); |
| 276 | }, | 315 | }, |
| @@ -300,18 +339,15 @@ | @@ -300,18 +339,15 @@ | ||
| 300 | return data; | 339 | return data; |
| 301 | } | 340 | } |
| 302 | }, | 341 | }, |
| 303 | - handleToggleVisible (visible) { | ||
| 304 | - this.visible = visible; | ||
| 305 | - }, | ||
| 306 | handleSuccess () { | 342 | handleSuccess () { |
| 307 | const color = this.formatColor; | 343 | const color = this.formatColor; |
| 308 | this.$emit('input', color); | 344 | this.$emit('input', color); |
| 309 | this.$emit('on-change', color); | 345 | this.$emit('on-change', color); |
| 310 | - this.$refs.picker.handleClose(); | 346 | + this.handleClose(); |
| 311 | }, | 347 | }, |
| 312 | handleClear () { | 348 | handleClear () { |
| 313 | this.$emit('input', ''); | 349 | this.$emit('input', ''); |
| 314 | - this.$refs.picker.handleClose(); | 350 | + this.handleClose(); |
| 315 | }, | 351 | }, |
| 316 | handleSelectColor (color) { | 352 | handleSelectColor (color) { |
| 317 | this.val = _colorChange(color); | 353 | this.val = _colorChange(color); |
src/styles/components/color-picker.less
| 1 | @color-picker-prefix-cls: ~"@{css-prefix}color-picker"; | 1 | @color-picker-prefix-cls: ~"@{css-prefix}color-picker"; |
| 2 | 2 | ||
| 3 | .@{color-picker-prefix-cls} { | 3 | .@{color-picker-prefix-cls} { |
| 4 | + display: inline-block; | ||
| 4 | & .@{select-dropdown-prefix-cls} { | 5 | & .@{select-dropdown-prefix-cls} { |
| 5 | padding: 0; | 6 | padding: 0; |
| 6 | } | 7 | } |