Commit b6bda1dcb5654a238e5222276603505447655074
1 parent
5a9cda85
update ColorPicker
Showing
4 changed files
with
100 additions
and
8 deletions
Show diff stats
examples/routers/color-picker.vue
| 1 | <template> | 1 | <template> |
| 2 | - | 2 | + <div style="margin: 100px;"> |
| 3 | + <!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>--> | ||
| 4 | + <color-picker placement="bottom-start" size="large"></color-picker> | ||
| 5 | + <!--<Date-picker type="date" placeholder="选择日期" size="large" style="width: 200px"></Date-picker>--> | ||
| 6 | + <color-picker placement="bottom-start" size="default"></color-picker> | ||
| 7 | + <!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>--> | ||
| 8 | + <color-picker placement="bottom-start" size="small"></color-picker> | ||
| 9 | + <!--<Date-picker type="date" placeholder="选择日期" size="small" style="width: 200px"></Date-picker>--> | ||
| 10 | + </div> | ||
| 3 | </template> | 11 | </template> |
| 4 | <script> | 12 | <script> |
| 5 | export default { | 13 | export default { |
src/components/color-picker/color-picker.vue
| 1 | <template> | 1 | <template> |
| 2 | - | 2 | + <Dropdown trigger="click" :transfer="transfer" :placement="placement"> |
| 3 | + <div :class="wrapClasses"> | ||
| 4 | + <i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i> | ||
| 5 | + <div :class="inputClasses"> | ||
| 6 | + <div :class="[prefixCls + '-color']" style="background-color: rgb(32, 160, 255);"></div> | ||
| 7 | + </div> | ||
| 8 | + </div> | ||
| 9 | + <Dropdown-menu slot="list"> | ||
| 10 | + <p>常用于各种自定义下拉内容的场景。</p> | ||
| 11 | + <div style="text-align: right;margin:10px;"> | ||
| 12 | + <Button type="primary">关闭</Button> | ||
| 13 | + </div> | ||
| 14 | + </Dropdown-menu> | ||
| 15 | + </Dropdown> | ||
| 3 | </template> | 16 | </template> |
| 4 | <script> | 17 | <script> |
| 18 | + import Dropdown from '../dropdown/dropdown.vue'; | ||
| 19 | + import DropdownMenu from '../dropdown/dropdown-menu.vue'; | ||
| 20 | + import { oneOf } from '../../utils/assist'; | ||
| 21 | + | ||
| 22 | + const prefixCls = 'ivu-color-picker'; | ||
| 23 | + const inputPrefixCls = 'ivu-input'; | ||
| 24 | + | ||
| 5 | export default { | 25 | export default { |
| 6 | - props: {}, | 26 | + name: 'ColorPicker', |
| 27 | + components: { Dropdown, DropdownMenu }, | ||
| 28 | + props: { | ||
| 29 | + value: { | ||
| 30 | + type: String | ||
| 31 | + }, | ||
| 32 | + alpha: { | ||
| 33 | + type: Boolean, | ||
| 34 | + default: false | ||
| 35 | + }, | ||
| 36 | + format: { | ||
| 37 | + validator (value) { | ||
| 38 | + return oneOf(value, ['hsl', 'hsv', 'hex', 'rgb']); | ||
| 39 | + } | ||
| 40 | + }, | ||
| 41 | + disabled: { | ||
| 42 | + type: Boolean, | ||
| 43 | + default: false | ||
| 44 | + }, | ||
| 45 | + size: { | ||
| 46 | + validator (value) { | ||
| 47 | + return oneOf(value, ['small', 'large', 'default']); | ||
| 48 | + } | ||
| 49 | + }, | ||
| 50 | + placement: { | ||
| 51 | + validator (value) { | ||
| 52 | + return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']); | ||
| 53 | + }, | ||
| 54 | + default: 'bottom' | ||
| 55 | + }, | ||
| 56 | + transfer: { | ||
| 57 | + type: Boolean, | ||
| 58 | + default: false | ||
| 59 | + } | ||
| 60 | + }, | ||
| 7 | data () { | 61 | data () { |
| 8 | - return {}; | 62 | + return { |
| 63 | + prefixCls: prefixCls, | ||
| 64 | + currentValue: this.value | ||
| 65 | + }; | ||
| 66 | + }, | ||
| 67 | + computed: { | ||
| 68 | + wrapClasses () { | ||
| 69 | + return [ | ||
| 70 | + `${prefixCls}-rel`, | ||
| 71 | + `${inputPrefixCls}-wrapper`, | ||
| 72 | + `${inputPrefixCls}-wrapper-${this.size}` | ||
| 73 | + ]; | ||
| 74 | + }, | ||
| 75 | + inputClasses () { | ||
| 76 | + return [ | ||
| 77 | + `${prefixCls}-input`, | ||
| 78 | + `${inputPrefixCls}`, | ||
| 79 | + `${inputPrefixCls}-${this.size}`, | ||
| 80 | + { | ||
| 81 | + [`${inputPrefixCls}-disabled`]: this.disabled | ||
| 82 | + } | ||
| 83 | + ]; | ||
| 84 | + } | ||
| 9 | }, | 85 | }, |
| 10 | - computed: {}, | ||
| 11 | - methods: {} | 86 | + methods: { |
| 87 | + | ||
| 88 | + } | ||
| 12 | }; | 89 | }; |
| 13 | </script> | 90 | </script> |
| 14 | \ No newline at end of file | 91 | \ No newline at end of file |
src/components/input/input.vue
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 | - | 4 | + &-rel{ |
| 5 | + line-height: 0; | ||
| 6 | + } | ||
| 7 | + &-color{ | ||
| 8 | + width: 20px; | ||
| 9 | + height: 100%; | ||
| 10 | + border: 1px solid @text-color; | ||
| 11 | + } | ||
| 5 | } | 12 | } |
| 6 | \ No newline at end of file | 13 | \ No newline at end of file |