Commit 59dc2df009500d8f5fe43fe69acff22e0f020570
1 parent
77950c30
update ColorPicker
Showing
3 changed files
with
48 additions
and
30 deletions
Show diff stats
src/components/color-picker/color-picker.vue
| @@ -34,7 +34,10 @@ | @@ -34,7 +34,10 @@ | ||
| 34 | :class="[prefixCls + '-picker-colors']" | 34 | :class="[prefixCls + '-picker-colors']" |
| 35 | @picker-color="handleSelectColor"></recommend-colors> | 35 | @picker-color="handleSelectColor"></recommend-colors> |
| 36 | </div> | 36 | </div> |
| 37 | - <Confirm @on-pick-success="handleSuccess" @on-pick-clear="handleClear"></Confirm> | 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> | ||
| 38 | </div> | 41 | </div> |
| 39 | </Dropdown-menu> | 42 | </Dropdown-menu> |
| 40 | </Dropdown> | 43 | </Dropdown> |
| @@ -58,7 +61,7 @@ | @@ -58,7 +61,7 @@ | ||
| 58 | const inputPrefixCls = 'ivu-input'; | 61 | const inputPrefixCls = 'ivu-input'; |
| 59 | 62 | ||
| 60 | function _colorChange (data, oldHue) { | 63 | function _colorChange (data, oldHue) { |
| 61 | - data = data === '' ? '#ff0000' : data; | 64 | + data = data === '' ? '#2d8cf0' : data; |
| 62 | const alpha = data && data.a; | 65 | const alpha = data && data.a; |
| 63 | let color; | 66 | let color; |
| 64 | 67 | ||
| @@ -170,12 +173,16 @@ | @@ -170,12 +173,16 @@ | ||
| 170 | '#00c2b1', | 173 | '#00c2b1', |
| 171 | '#ac7a33', | 174 | '#ac7a33', |
| 172 | '#1d35ea', | 175 | '#1d35ea', |
| 173 | - '#42bd82', | 176 | + '#8bc34a', |
| 174 | '#f16b62', | 177 | '#f16b62', |
| 175 | '#ea4ca3', | 178 | '#ea4ca3', |
| 176 | '#0d94aa', | 179 | '#0d94aa', |
| 177 | '#febd79', | 180 | '#febd79', |
| 178 | - '#3b90fc', | 181 | + '#5d4037', |
| 182 | + '#00bcd4', | ||
| 183 | + '#f06292', | ||
| 184 | + '#cddc39', | ||
| 185 | + '#607d8b', | ||
| 179 | '#000000', | 186 | '#000000', |
| 180 | '#ffffff' | 187 | '#ffffff' |
| 181 | ] | 188 | ] |
| @@ -222,6 +229,29 @@ | @@ -222,6 +229,29 @@ | ||
| 222 | color = tinycolor(this.value).toRgb(); | 229 | color = tinycolor(this.value).toRgb(); |
| 223 | } | 230 | } |
| 224 | return `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`; | 231 | return `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`; |
| 232 | + }, | ||
| 233 | + formatColor () { | ||
| 234 | + const value = this.saturationColors; | ||
| 235 | + const format = this.format; | ||
| 236 | + let color; | ||
| 237 | + | ||
| 238 | + const rgba = `rgba(${value.rgba.r}, ${value.rgba.g}, ${value.rgba.b}, ${value.rgba.a})`; | ||
| 239 | + if (format) { | ||
| 240 | + if (format === 'hsl') { | ||
| 241 | + color = tinycolor(value.hsl).toHslString(); | ||
| 242 | + } else if (format === 'hsv') { | ||
| 243 | + color = tinycolor(value.hsv).toHsvString(); | ||
| 244 | + } else if (format === 'hex') { | ||
| 245 | + color = value.hex; | ||
| 246 | + } else if (format === 'rgb') { | ||
| 247 | + color = rgba; | ||
| 248 | + } | ||
| 249 | + } else if (this.alpha) { | ||
| 250 | + color = rgba; | ||
| 251 | + } else { | ||
| 252 | + color = value.hex; | ||
| 253 | + } | ||
| 254 | + return color; | ||
| 225 | } | 255 | } |
| 226 | }, | 256 | }, |
| 227 | watch: { | 257 | watch: { |
| @@ -265,31 +295,10 @@ | @@ -265,31 +295,10 @@ | ||
| 265 | handleToggleVisible (visible) { | 295 | handleToggleVisible (visible) { |
| 266 | this.visible = visible; | 296 | this.visible = visible; |
| 267 | }, | 297 | }, |
| 268 | - getFormatColor () { | ||
| 269 | - const value = this.saturationColors; | ||
| 270 | - const format = this.format; | ||
| 271 | - let color; | ||
| 272 | - | ||
| 273 | - const rgba = `rgba(${value.rgba.r}, ${value.rgba.g}, ${value.rgba.b}, ${value.rgba.a})`; | ||
| 274 | - if (format) { | ||
| 275 | - if (format === 'hsl') { | ||
| 276 | - color = tinycolor(value.hsl).toHslString(); | ||
| 277 | - } else if (format === 'hsv') { | ||
| 278 | - color = tinycolor(value.hsv).toHsvString(); | ||
| 279 | - } else if (format === 'hex') { | ||
| 280 | - color = value.hex; | ||
| 281 | - } else if (format === 'rgb') { | ||
| 282 | - color = rgba; | ||
| 283 | - } | ||
| 284 | - } else if (this.alpha) { | ||
| 285 | - color = rgba; | ||
| 286 | - } else { | ||
| 287 | - color = value.hex; | ||
| 288 | - } | ||
| 289 | - return color; | ||
| 290 | - }, | ||
| 291 | handleSuccess () { | 298 | handleSuccess () { |
| 292 | - this.$emit('input', this.getFormatColor()); | 299 | + const color = this.formatColor; |
| 300 | + this.$emit('input', color); | ||
| 301 | + this.$emit('on-change', color); | ||
| 293 | this.$refs.picker.handleClose(); | 302 | this.$refs.picker.handleClose(); |
| 294 | }, | 303 | }, |
| 295 | handleClear () { | 304 | handleClear () { |
src/components/color-picker/recommend-colors.vue
| @@ -2,7 +2,7 @@ | @@ -2,7 +2,7 @@ | ||
| 2 | <div> | 2 | <div> |
| 3 | <template v-for="(item, index) in list"> | 3 | <template v-for="(item, index) in list"> |
| 4 | <span @click="handleClick(index)"><em :style="{'background': item}"></em></span> | 4 | <span @click="handleClick(index)"><em :style="{'background': item}"></em></span> |
| 5 | - <br v-if="(index + 1) % 10 === 0 && index !== 0 && (index + 1) !== list.length"> | 5 | + <br v-if="(index + 1) % 12 === 0 && index !== 0 && (index + 1) !== list.length"> |
| 6 | </template> | 6 | </template> |
| 7 | </div> | 7 | </div> |
| 8 | </template> | 8 | </template> |
src/styles/components/color-picker.less
| @@ -45,7 +45,7 @@ | @@ -45,7 +45,7 @@ | ||
| 45 | padding: 8px 8px 0; | 45 | padding: 8px 8px 0; |
| 46 | } | 46 | } |
| 47 | &-panel{ | 47 | &-panel{ |
| 48 | - width: 200px; | 48 | + width: 240px; |
| 49 | margin: 0 auto; | 49 | margin: 0 auto; |
| 50 | box-sizing: initial; | 50 | box-sizing: initial; |
| 51 | position: relative; | 51 | position: relative; |
| @@ -197,4 +197,13 @@ | @@ -197,4 +197,13 @@ | ||
| 197 | transform: translateX(-2px); | 197 | transform: translateX(-2px); |
| 198 | } | 198 | } |
| 199 | } | 199 | } |
| 200 | + | ||
| 201 | + &-confirm{ | ||
| 202 | + position: relative; | ||
| 203 | + &-color{ | ||
| 204 | + position: absolute; | ||
| 205 | + top: 11px; | ||
| 206 | + left: 8px; | ||
| 207 | + } | ||
| 208 | + } | ||
| 200 | } | 209 | } |
| 201 | \ No newline at end of file | 210 | \ No newline at end of file |