Commit 8105945f4ff3b69b7c22434df1ab730af4ac9353
1 parent
59dc2df0
update ColorPicker
Showing
4 changed files
with
19 additions
and
4 deletions
Show diff stats
examples/routers/color-picker.vue
| @@ -3,8 +3,8 @@ | @@ -3,8 +3,8 @@ | ||
| 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>--> | 5 | <!--<color-picker placement="bottom-start" size="large"></color-picker>--> |
| 6 | - <!--<Date-picker type="date" placeholder="选择日期" size="large" style="width: 200px"></Date-picker>--> | ||
| 7 | - <color-picker ref="xxx" v-model="color" format="rgb" alpha :recommend="true"></color-picker> | 6 | + <Date-picker transfer type="date" placeholder="选择日期" size="large" style="width: 200px"></Date-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" :alpha="false" :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>--> | 10 | <!--<color-picker placement="bottom-start" size="small"></color-picker>--> |
src/components/color-picker/color-picker.vue
| 1 | <template> | 1 | <template> |
| 2 | - <Dropdown :class="[prefixCls]" ref="picker" trigger="click" :transfer="transfer" :placement="placement" @on-visible-change="handleToggleVisible"> | 2 | + <Dropdown :class="classes" class-name="ivu-transfer-" ref="picker" trigger="click" :transfer="transfer" :placement="placement" @on-visible-change="handleToggleVisible"> |
| 3 | <div :class="wrapClasses"> | 3 | <div :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"> |
| @@ -197,6 +197,14 @@ | @@ -197,6 +197,14 @@ | ||
| 197 | this.val = newVal; | 197 | this.val = newVal; |
| 198 | } | 198 | } |
| 199 | }, | 199 | }, |
| 200 | + classes () { | ||
| 201 | + return [ | ||
| 202 | + `${prefixCls}`, | ||
| 203 | + { | ||
| 204 | + [`${prefixCls}-transfer`]: this.transfer | ||
| 205 | + } | ||
| 206 | + ]; | ||
| 207 | + }, | ||
| 200 | wrapClasses () { | 208 | wrapClasses () { |
| 201 | return [ | 209 | return [ |
| 202 | `${prefixCls}-rel`, | 210 | `${prefixCls}-rel`, |
src/components/select/dropdown.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div class="ivu-select-dropdown" :style="styles"><slot></slot></div> | 2 | + <div class="ivu-select-dropdown" :class="className" :style="styles"><slot></slot></div> |
| 3 | </template> | 3 | </template> |
| 4 | <script> | 4 | <script> |
| 5 | import Vue from 'vue'; | 5 | import Vue from 'vue'; |
| @@ -13,6 +13,9 @@ | @@ -13,6 +13,9 @@ | ||
| 13 | placement: { | 13 | placement: { |
| 14 | type: String, | 14 | type: String, |
| 15 | default: 'bottom-start' | 15 | default: 'bottom-start' |
| 16 | + }, | ||
| 17 | + className: { | ||
| 18 | + type: String | ||
| 16 | } | 19 | } |
| 17 | }, | 20 | }, |
| 18 | data () { | 21 | data () { |
src/styles/components/select-dropdown.less
| 1 | @select-dropdown-prefix-cls: ~"@{css-prefix}select-dropdown"; | 1 | @select-dropdown-prefix-cls: ~"@{css-prefix}select-dropdown"; |
| 2 | +@transfer-no-max-height: ~"@{css-prefix}transfer-no-max-height"; | ||
| 2 | 3 | ||
| 3 | .@{select-dropdown-prefix-cls} { | 4 | .@{select-dropdown-prefix-cls} { |
| 4 | width: inherit; | 5 | width: inherit; |
| @@ -17,6 +18,9 @@ | @@ -17,6 +18,9 @@ | ||
| 17 | &-transfer{ | 18 | &-transfer{ |
| 18 | z-index: @zindex-transfer; | 19 | z-index: @zindex-transfer; |
| 19 | } | 20 | } |
| 21 | + &.@{transfer-no-max-height} { | ||
| 22 | + max-height: none; | ||
| 23 | + } | ||
| 20 | } | 24 | } |
| 21 | .@{modal-prefix-cls} { | 25 | .@{modal-prefix-cls} { |
| 22 | .@{select-dropdown-prefix-cls} { | 26 | .@{select-dropdown-prefix-cls} { |