add Cascader
add Cascader
This commit is contained in:
梁灏
parent
6ff31952a6
commit
c463ab8757
9 changed files with 345 additions and 60 deletions
|
|
@ -1,22 +1,39 @@
|
|||
<template>
|
||||
<div :class="[prefixCls]">
|
||||
<div :class="classes" v-clickoutside="handleClose">
|
||||
<i-input
|
||||
readonly
|
||||
:disabled="disabled"
|
||||
:value.sync="displayRender"
|
||||
:size="size"
|
||||
:placeholder="placeholder"></i-input>
|
||||
:placeholder="placeholder"
|
||||
@on-focus="onFocus"></i-input>
|
||||
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.stop="clearSelect"></Icon>
|
||||
<Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
|
||||
<Dropdown v-show="visible" transition="slide-up">
|
||||
<div>
|
||||
<Caspanel
|
||||
:prefix-cls="prefixCls"
|
||||
:data.sync="data"
|
||||
:disabled="disabled"
|
||||
:trigger="trigger"
|
||||
@on-update-result="updateResult"></Caspanel>
|
||||
</div>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import iInput from '../input/input.vue';
|
||||
import Dropdown from '../select/dropdown.vue';
|
||||
import Icon from '../icon/icon.vue';
|
||||
import Caspanel from './caspanel.vue';
|
||||
import clickoutside from '../../directives/clickoutside';
|
||||
import { oneOf, MutationObserver } from '../../utils/assist';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-cascader';
|
||||
|
||||
export default {
|
||||
components: { iInput, Dropdown, Icon, Caspanel },
|
||||
directives: { clickoutside },
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
|
|
@ -33,7 +50,7 @@
|
|||
},
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: true
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
|
|
@ -56,18 +73,31 @@
|
|||
},
|
||||
renderFormat: {
|
||||
type: Function,
|
||||
default: (label, selectedData) => {
|
||||
label.join('/');
|
||||
default (label, selectedData) {
|
||||
return label.join('/');
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
selected: []
|
||||
visible: false,
|
||||
selected: [],
|
||||
tmpSelected: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-show-clear`]: this.showCloseIcon
|
||||
}
|
||||
]
|
||||
},
|
||||
showCloseIcon () {
|
||||
return this.value && this.value.length && this.clearable;
|
||||
},
|
||||
displayRender () {
|
||||
let label = [];
|
||||
for (let i = 0; i < this.selected.length; i++) {
|
||||
|
|
@ -78,6 +108,21 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
clearSelect () {
|
||||
|
||||
},
|
||||
handleClose () {
|
||||
this.visible = false;
|
||||
},
|
||||
onFocus () {
|
||||
this.visible = true;
|
||||
},
|
||||
updateResult (result) {
|
||||
console.log(JSON.stringify(result))
|
||||
this.selected = result;
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
25
src/components/cascader/casitem.vue
Normal file
25
src/components/cascader/casitem.vue
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<li :class="classes">{{ data.label }}<i v-if="data.children && data.children.length" class="ivu-icon ivu-icon-ios-arrow-right"></i></li>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: Object,
|
||||
prefixCls: String,
|
||||
tmpItem: Object
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${this.prefixCls}-menu-item`,
|
||||
{
|
||||
[`${this.prefixCls}-menu-item-active`]: this.tmpItem.value === this.data.value
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
95
src/components/cascader/caspanel.vue
Normal file
95
src/components/cascader/caspanel.vue
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<template>
|
||||
<ul v-if="data && data.length" :class="[prefixCls + '-menu']">
|
||||
<Casitem
|
||||
v-for="item in data"
|
||||
:prefix-cls="prefixCls"
|
||||
:data.sync="item"
|
||||
:tmp-item="tmpItem"
|
||||
@click.stop="handleClickItem(item)"
|
||||
@mouseenter.stop="handleHoverItem(item)"></Casitem>
|
||||
</ul><Caspanel v-if="sublist && sublist.length" :prefix-cls="prefixCls" :data.sync="sublist" :disabled="disabled" :trigger="trigger" @on-update-result="updateResult"></Caspanel>
|
||||
</template>
|
||||
<script>
|
||||
import Casitem from './casitem.vue';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
export default {
|
||||
name: 'Caspanel',
|
||||
components: { Casitem },
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
sublist: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
disabled: Boolean,
|
||||
changeOnSelect: Boolean,
|
||||
trigger: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['click', 'hover']);
|
||||
}
|
||||
},
|
||||
prefixCls: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tmpItem: {},
|
||||
result: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClickItem (item) {
|
||||
if (this.trigger !== 'click') return;
|
||||
this.handleTriggerItem(item);
|
||||
},
|
||||
handleHoverItem (item) {
|
||||
if (this.trigger !== 'hover') return;
|
||||
this.handleTriggerItem(item);
|
||||
},
|
||||
handleTriggerItem (item) {
|
||||
if (item.disabled) return;
|
||||
|
||||
if (item.children && item.children.length){
|
||||
this.sublist = item.children;
|
||||
// todo 实时选择
|
||||
} else {
|
||||
this.sublist = [];
|
||||
// todo 选择
|
||||
}
|
||||
|
||||
// return value back
|
||||
const backItem = this.getBaseItem(item);
|
||||
|
||||
this.tmpItem = backItem;
|
||||
this.$emit('on-update-result', [backItem]);
|
||||
},
|
||||
updateResult (item) {
|
||||
this.result = [this.tmpItem].concat(item);
|
||||
this.$emit('on-update-result', this.result);
|
||||
},
|
||||
getBaseItem (item) {
|
||||
let backItem = Object.assign({}, item);
|
||||
if (backItem.children) {
|
||||
delete backItem.children;
|
||||
}
|
||||
|
||||
return backItem;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data () {
|
||||
this.sublist = [];
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
// todo 初始化时，判断预设的值
|
||||
}
|
||||
}
|
||||
</script>
|
||||
85
src/styles/components/cascader.less
Normal file
85
src/styles/components/cascader.less
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
@cascader-prefix-cls: ~"@{css-prefix}cascader";
|
||||
@cascader-item-prefix-cls: ~"@{css-prefix}cascader-menu-item";
|
||||
|
||||
.@{cascader-prefix-cls} {
|
||||
position: relative;
|
||||
|
||||
.@{css-prefix}input{
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.@{cascader-prefix-cls}-arrow:nth-of-type(1) {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.@{cascader-prefix-cls}-arrow:nth-of-type(1) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
&-show-clear:hover .@{cascader-prefix-cls}-arrow:nth-of-type(2){
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 8px;
|
||||
line-height: 1;
|
||||
margin-top: -6px;
|
||||
font-size: @font-size-base;
|
||||
color: @subsidiary-color;
|
||||
.transition(all @transition-time @ease-in-out);
|
||||
}
|
||||
|
||||
.@{select-dropdown-prefix-cls} {
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.select-item(@cascader-prefix-cls, @cascader-item-prefix-cls);
|
||||
|
||||
&-menu{
|
||||
display: inline-block;
|
||||
min-width: 100px;
|
||||
height: 180px;
|
||||
margin: 0;
|
||||
padding: 5px 0;
|
||||
vertical-align: top;
|
||||
list-style: none;
|
||||
border-right: 1px solid @border-color-split;
|
||||
overflow: auto;
|
||||
|
||||
&:first-child {
|
||||
|
||||
}
|
||||
&:last-child {
|
||||
border-right-color: transparent;
|
||||
margin-right: -1px;
|
||||
}
|
||||
&:only-child {
|
||||
|
||||
}
|
||||
|
||||
& &-item{
|
||||
position: relative;
|
||||
padding-right: 24px;
|
||||
.transition(all @transition-time @ease-in-out);
|
||||
|
||||
i{
|
||||
font-size: @font-size-small;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
&-active{
|
||||
background-color: @background-color-select-hover;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -26,3 +26,4 @@
|
|||
@import "poptip";
|
||||
@import "input";
|
||||
@import "slider";
|
||||
@import "cascader";
|
||||
|
|
@ -183,50 +183,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.@{select-item-prefix-cls} {
|
||||
margin: 0;
|
||||
padding: 7px 16px;
|
||||
clear: both;
|
||||
color: @text-color;
|
||||
font-size: @font-size-small !important;
|
||||
//border-radius: @btn-border-radius-small;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
.transition(background @transition-time @ease-in-out);
|
||||
|
||||
&:hover{
|
||||
background: @background-color-select-hover;
|
||||
}
|
||||
|
||||
&-focus {
|
||||
background: @background-color-select-hover;
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
color: @btn-disable-color;
|
||||
cursor: @cursor-disabled;
|
||||
|
||||
&:hover {
|
||||
color: @btn-disable-color;
|
||||
background-color: #fff;
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
&-selected ,&-selected:hover{
|
||||
color: #fff;
|
||||
background: @selected-color;
|
||||
}
|
||||
|
||||
&-selected&-focus {
|
||||
background: shade(@selected-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-large .@{select-item-prefix-cls}{
|
||||
padding: 7px 16px 8px;
|
||||
font-size: @font-size-base !important;
|
||||
}
|
||||
.select-item(@select-prefix-cls, @select-item-prefix-cls);
|
||||
|
||||
.@{select-prefix-cls}-multiple .@{select-item-prefix-cls} {
|
||||
&-selected{
|
||||
|
|
|
|||
|
|
@ -15,3 +15,4 @@
|
|||
@import "mask";
|
||||
@import "content"; // card、modal
|
||||
@import "tooltip";
|
||||
@import "select";
|
||||
46
src/styles/mixins/select.less
Normal file
46
src/styles/mixins/select.less
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
.select-item(@size-class, @item-class) {
|
||||
.@{item-class} {
|
||||
margin: 0;
|
||||
padding: 7px 16px;
|
||||
clear: both;
|
||||
color: @text-color;
|
||||
font-size: @font-size-small !important;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
.transition(background @transition-time @ease-in-out);
|
||||
|
||||
&:hover{
|
||||
background: @background-color-select-hover;
|
||||
}
|
||||
|
||||
&-focus {
|
||||
background: @background-color-select-hover;
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
color: @btn-disable-color;
|
||||
cursor: @cursor-disabled;
|
||||
|
||||
&:hover {
|
||||
color: @btn-disable-color;
|
||||
background-color: #fff;
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
&-selected ,&-selected:hover{
|
||||
color: #fff;
|
||||
background: @selected-color;
|
||||
}
|
||||
|
||||
&-selected&-focus {
|
||||
background: shade(@selected-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.@{size-class}-large .@{item-class} {
|
||||
padding: 7px 16px 8px;
|
||||
font-size: @font-size-base !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div style="margin: 150px;width:300px">
|
||||
<Cascader></Cascader>
|
||||
<div style="margin: 50px;width:300px">
|
||||
<Cascader :data="data" :value="value"></Cascader>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -11,7 +11,37 @@
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
value: [],
|
||||
data: [{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou'
|
||||
}],
|
||||
}, {
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
children: [{
|
||||
value: 'abc',
|
||||
label: 'ABC'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
value: 'hhh',
|
||||
label: 'HHH',
|
||||
children: [{
|
||||
value: 'ddd',
|
||||
label: 'DDD'
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue