update ColorPicker
This commit is contained in:
parent
59dc2df009
commit
8105945f4f
4 changed files with 19 additions and 4 deletions
|
@ -3,8 +3,8 @@
|
||||||
{{ color }}
|
{{ color }}
|
||||||
<!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>-->
|
<!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>-->
|
||||||
<!--<color-picker placement="bottom-start" size="large"></color-picker>-->
|
<!--<color-picker placement="bottom-start" size="large"></color-picker>-->
|
||||||
<!--<Date-picker type="date" placeholder="选择日期" size="large" style="width: 200px"></Date-picker>-->
|
<Date-picker transfer type="date" placeholder="选择日期" size="large" style="width: 200px"></Date-picker>
|
||||||
<color-picker ref="xxx" v-model="color" format="rgb" alpha :recommend="true"></color-picker>
|
<color-picker :transfer="true" ref="xxx" v-model="color" format="rgb" alpha :recommend="true"></color-picker>
|
||||||
<color-picker v-model="color2" :alpha="false" :recommend="false"></color-picker>
|
<color-picker v-model="color2" :alpha="false" :recommend="false"></color-picker>
|
||||||
<!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>-->
|
<!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>-->
|
||||||
<!--<color-picker placement="bottom-start" size="small"></color-picker>-->
|
<!--<color-picker placement="bottom-start" size="small"></color-picker>-->
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<Dropdown :class="[prefixCls]" ref="picker" trigger="click" :transfer="transfer" :placement="placement" @on-visible-change="handleToggleVisible">
|
<Dropdown :class="classes" class-name="ivu-transfer-" ref="picker" trigger="click" :transfer="transfer" :placement="placement" @on-visible-change="handleToggleVisible">
|
||||||
<div :class="wrapClasses">
|
<div :class="wrapClasses">
|
||||||
<i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i>
|
<i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i>
|
||||||
<div :class="inputClasses">
|
<div :class="inputClasses">
|
||||||
|
@ -197,6 +197,14 @@
|
||||||
this.val = newVal;
|
this.val = newVal;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
classes () {
|
||||||
|
return [
|
||||||
|
`${prefixCls}`,
|
||||||
|
{
|
||||||
|
[`${prefixCls}-transfer`]: this.transfer
|
||||||
|
}
|
||||||
|
];
|
||||||
|
},
|
||||||
wrapClasses () {
|
wrapClasses () {
|
||||||
return [
|
return [
|
||||||
`${prefixCls}-rel`,
|
`${prefixCls}-rel`,
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="ivu-select-dropdown" :style="styles"><slot></slot></div>
|
<div class="ivu-select-dropdown" :class="className" :style="styles"><slot></slot></div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
|
@ -13,6 +13,9 @@
|
||||||
placement: {
|
placement: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'bottom-start'
|
default: 'bottom-start'
|
||||||
|
},
|
||||||
|
className: {
|
||||||
|
type: String
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
@select-dropdown-prefix-cls: ~"@{css-prefix}select-dropdown";
|
@select-dropdown-prefix-cls: ~"@{css-prefix}select-dropdown";
|
||||||
|
@transfer-no-max-height: ~"@{css-prefix}transfer-no-max-height";
|
||||||
|
|
||||||
.@{select-dropdown-prefix-cls} {
|
.@{select-dropdown-prefix-cls} {
|
||||||
width: inherit;
|
width: inherit;
|
||||||
|
@ -17,6 +18,9 @@
|
||||||
&-transfer{
|
&-transfer{
|
||||||
z-index: @zindex-transfer;
|
z-index: @zindex-transfer;
|
||||||
}
|
}
|
||||||
|
&.@{transfer-no-max-height} {
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.@{modal-prefix-cls} {
|
.@{modal-prefix-cls} {
|
||||||
.@{select-dropdown-prefix-cls} {
|
.@{select-dropdown-prefix-cls} {
|
||||||
|
|
Loading…
Add table
Reference in a new issue