drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

support Cascader

Browse source 
support Cascader
This commit is contained in:
梁灏 2017-03-06 17:30:39 +08:00
parent 2d43f26b05
commit 47a7f21dc6
11 changed files with 195 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
CHANGE.md
View file

@ -38,4 +38,6 @@ DropdownItem key 改为 name, Dropdown 的 visible 要使用 @on-visible-change
DropdownItem 里，this.$parent.$parent 与1.0 有区别
### Menu
MenuItem 和 Submenu 的 key 改为了 name
Menu 的 activeKey 改为 activeName,openKeys 改为 openNames
Menu 的 activeKey 改为 activeName,openKeys 改为 openNames
### Cascader
Caspanel 的 sublist 从 prop -> data

2
README.md
View file

@ -29,7 +29,7 @@
- [x] Slider
- [ ] DatePicker
- [ ] TimePicker
- [ ] Cascader
- [x] Cascader
- [ ] Transfer
- [x] InputNumber
- [x] Rate

1
examples/app.vue
View file

@ -42,6 +42,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
<li><router-link to="/breadcrumb">Breadcrumb</router-link></li>
<li><router-link to="/menu">Menu</router-link></li>
<li><router-link to="/spin">Spin</router-link></li>
<li><router-link to="/cascader">Cascader</router-link></li>
</ul>
</nav>
<router-view></router-view>

4
examples/main.js
View file

@ -132,6 +132,10 @@ const router = new VueRouter({
{
path: '/spin',
component: require('./routers/spin.vue')
},
{
path: '/cascader',
component: require('./routers/cascader.vue')
}
]
});

95
examples/routers/cascader.vue
View file

@ -1,24 +1,85 @@
<template>
{{ text }}
<Cascader :data="data" @on-change="handleChange">
<a href="javascript:void(0)">选择</a>
</Cascader>
<!--<template>-->
<!--<div>-->
<!--<Cascader :data="data" v-model="value1"></Cascader>-->
<!--{{ value1 }}-->
<!--<div @click="c">change</div>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--value1: [],-->
<!--data: [{-->
<!--value: 'beijing',-->
<!--label: '北京',-->
<!--children: [-->
<!--{-->
<!--value: 'gugong',-->
<!--label: '故宫'-->
<!--},-->
<!--{-->
<!--value: 'tiantan',-->
<!--label: '天坛'-->
<!--},-->
<!--{-->
<!--value: 'wangfujing',-->
<!--label: '王府井'-->
<!--}-->
<!--]-->
<!--}, {-->
<!--value: 'jiangsu',-->
<!--label: '江苏',-->
<!--children: [-->
<!--{-->
<!--value: 'nanjing',-->
<!--label: '南京',-->
<!--children: [-->
<!--{-->
<!--value: 'fuzimiao',-->
<!--label: '夫子庙',-->
<!--}-->
<!--]-->
<!--},-->
<!--{-->
<!--value: 'suzhou',-->
<!--label: '苏州',-->
<!--children: [-->
<!--{-->
<!--value: 'zhuozhengyuan',-->
<!--label: '拙政园',-->
<!--},-->
<!--{-->
<!--value: 'shizilin',-->
<!--label: '狮子林',-->
<!--}-->
<!--]-->
<!--}-->
<!--],-->
<!--}]-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--c () {-->
<!--this.value1 = ['jiangsu', 'suzhou', 'zhuozhengyuan']-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<Row>
<i-col span="4">
Disabled <Switch :checked.sync="disabled"></Switch>
</i-col>
<i-col span="4">
<Cascader :data="data" :value.sync="value1" :disabled="disabled"></Cascader>
</i-col>
</Row>
<template>
<div>
<Cascader :data="data" v-model="value2" change-on-select></Cascader>
{{ value2 }}
<div @click="c">change</div>
</div>
</template>
<script>
export default {
data () {
return {
disabled: false,
text: '未选择',
value2: [],
data: [{
value: 'beijing',
label: '北京',
@ -69,8 +130,8 @@
}
},
methods: {
handleChange (value, selectedData) {
this.text = selectedData.map(o => o.label).join(', ');
c () {
this.value2 = ['jiangsu', 'suzhou', 'zhuozhengyuan']
}
}
}

106
src/components/cascader/cascader.vue
View file

@ -5,39 +5,43 @@
<i-input
readonly
:disabled="disabled"
:value.sync="displayRender"
v-model="displayRender"
:size="size"
:placeholder="placeholder"></i-input>
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.stop="clearSelect"></Icon>
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSelect"></Icon>
<Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
</slot>
</div>
<Dropdown v-show="visible" transition="slide-up">
<div>
<Caspanel
v-ref:caspanel
:prefix-cls="prefixCls"
:data.sync="data"
:disabled="disabled"
:change-on-select="changeOnSelect"
:trigger="trigger"></Caspanel>
</div>
</Dropdown>
<transition name="slide-up">
<Drop v-show="visible">
<div>
<Caspanel
ref="caspanel"
:prefix-cls="prefixCls"
:data="data"
:disabled="disabled"
:change-on-select="changeOnSelect"
:trigger="trigger"></Caspanel>
</div>
</Drop>
</transition>
</div>
</template>
<script>
import iInput from '../input/input.vue';
import Dropdown from '../select/dropdown.vue';
import Drop from '../select/dropdown.vue';
import Icon from '../icon/icon.vue';
import Caspanel from './caspanel.vue';
import clickoutside from '../../directives/clickoutside';
import { oneOf } from '../../utils/assist';
import Emitter from '../../mixins/emitter';
const prefixCls = 'ivu-cascader';
export default {
name: 'Cascader',
components: { iInput, Dropdown, Icon, Caspanel },
mixins: [ Emitter ],
components: { iInput, Drop, Icon, Caspanel },
directives: { clickoutside },
props: {
data: {
@ -92,7 +96,8 @@
visible: false,
selected: [],
tmpSelected: [],
updatingValue: false // to fix set value in changeOnSelect type
updatingValue: false, // to fix set value in changeOnSelect type
currentValue: this.value
};
},
computed: {
@ -107,7 +112,7 @@
];
},
showCloseIcon () {
return this.value && this.value.length && this.clearable;
return this.currentValue && this.currentValue.length && this.clearable;
},
displayRender () {
let label = [];
@ -120,11 +125,12 @@
},
methods: {
clearSelect () {
const oldVal = JSON.stringify(this.value);
this.value = this.selected = this.tmpSelected = [];
const oldVal = JSON.stringify(this.currentValue);
this.currentValue = this.selected = this.tmpSelected = [];
this.handleClose();
this.emitValue(this.value, oldVal);
this.$broadcast('on-clear');
this.emitValue(this.currentValue, oldVal);
// this.$broadcast('on-clear');
this.broadcast('Caspanel', 'on-clear');
},
handleClose () {
this.visible = false;
@ -139,8 +145,8 @@
},
onFocus () {
this.visible = true;
if (!this.value.length) {
this.$broadcast('on-clear');
if (!this.currentValue.length) {
this.broadcast('Caspanel', 'on-clear');
}
},
updateResult (result) {
@ -148,25 +154,30 @@
},
updateSelected (init = false) {
if (!this.changeOnSelect || init) {
this.$broadcast('on-find-selected', this.value);
this.broadcast('Caspanel', 'on-find-selected', {
value: this.currentValue
});
}
},
emitValue (val, oldVal) {
if (JSON.stringify(val) !== oldVal) {
this.$emit('on-change', this.value, JSON.parse(JSON.stringify(this.selected)));
this.$dispatch('on-form-change', this.value, JSON.parse(JSON.stringify(this.selected)));
this.$emit('on-change', this.currentValue, JSON.parse(JSON.stringify(this.selected)));
// todo 事件
// this.$dispatch('on-form-change', this.currentValue, JSON.parse(JSON.stringify(this.selected)));
}
}
},
ready () {
mounted () {
this.updateSelected(true);
},
events: {
// lastValue: is click the final val
// fromInit: is this emit from update value
'on-result-change' (lastValue, changeOnSelect, fromInit) {
this.$on('on-result-change', (params) => {
// lastValue: is click the final val
// fromInit: is this emit from update value
const lastValue = params.lastValue;
const changeOnSelect = params.changeOnSelect;
const fromInit = params.fromInit;
if (lastValue || changeOnSelect) {
const oldVal = JSON.stringify(this.value);
const oldVal = JSON.stringify(this.currentValue);
this.selected = this.tmpSelected;
let newVal = [];
@ -176,30 +187,37 @@
if (!fromInit) {
this.updatingValue = true;
this.value = newVal;
this.emitValue(this.value, oldVal);
this.currentValue = newVal;
this.emitValue(this.currentValue, oldVal);
}
}
if (lastValue && !fromInit) {
this.handleClose();
}
},
'on-form-blur' () {
return false;
},
'on-form-change' () {
return false;
}
});
},
// todo 事件 这是因为内部的input会触发，应该组织
// events: {
// 'on-form-blur' () {
// return false;
// },
// 'on-form-change' () {
// return false;
// }
// },
watch: {
visible (val) {
if (val) {
if (this.value.length) {
if (this.currentValue.length) {
this.updateSelected();
}
}
},
value () {
value (val) {
this.currentValue = val;
},
currentValue () {
this.$emit('input', this.currentValue);
if (this.updatingValue) {
this.updatingValue = false;
return;

1
src/components/cascader/casitem.vue
View file

@ -3,6 +3,7 @@
</template>
<script>
export default {
name: 'Casitem',
props: {
data: Object,
prefixCls: String,

70
src/components/cascader/caspanel.vue
View file

@ -1,19 +1,23 @@
<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" :change-on-select="changeOnSelect"></Caspanel>
<span>
<ul v-if="data && data.length" :class="[prefixCls + '-menu']">
<Casitem
v-for="item in data"
:prefix-cls="prefixCls"
:data="item"
:tmp-item="tmpItem"
@click.native.stop="handleClickItem(item)"
@mouseenter.native.stop="handleHoverItem(item)"></Casitem>
</ul><Caspanel v-if="sublist && sublist.length" :prefix-cls="prefixCls" :data="sublist" :disabled="disabled" :trigger="trigger" :change-on-select="changeOnSelect"></Caspanel>
</span>
</template>
<script>
import Casitem from './casitem.vue';
import Emitter from '../../mixins/emitter';
export default {
name: 'Caspanel',
mixins: [ Emitter ],
components: { Casitem },
props: {
data: {
@ -22,12 +26,6 @@
return [];
}
},
sublist: {
type: Array,
default () {
return [];
}
},
disabled: Boolean,
changeOnSelect: Boolean,
trigger: String,
@ -36,9 +34,15 @@
data () {
return {
tmpItem: {},
result: []
result: [],
sublist: []
};
},
watch: {
data () {
this.sublist = [];
}
},
methods: {
handleClickItem (item) {
if (this.trigger !== 'click' && item.children) return;
@ -58,10 +62,20 @@
if (item.children && item.children.length){
this.sublist = item.children;
this.$dispatch('on-result-change', false, this.changeOnSelect, fromInit);
// this.$dispatch('on-result-change', false, this.changeOnSelect, fromInit);
this.dispatch('Cascader', 'on-result-change', {
lastValue: false,
changeOnSelect: this.changeOnSelect,
fromInit: fromInit
});
} else {
this.sublist = [];
this.$dispatch('on-result-change', true, this.changeOnSelect, fromInit);
// this.$dispatch('on-result-change', true, this.changeOnSelect, fromInit);
this.dispatch('Cascader', 'on-result-change', {
lastValue: true,
changeOnSelect: this.changeOnSelect,
fromInit: fromInit
});
}
},
updateResult (item) {
@ -84,13 +98,9 @@
}
}
},
watch: {
data () {
this.sublist = [];
}
},
events: {
'on-find-selected' (val) {
mounted () {
this.$on('on-find-selected', (params) => {
const val = params.value;
let value = [...val];
for (let i = 0; i < value.length; i++) {
for (let j = 0; j < this.data.length; j++) {
@ -98,17 +108,19 @@
this.handleTriggerItem(this.data[j], true);
value.splice(0, 1);
this.$nextTick(() => {
this.$broadcast('on-find-selected', value);
this.broadcast('Caspanel', 'on-find-selected', {
value: value
});
});
return false;
}
}
}
},
'on-clear' () {
});
this.$on('on-clear', () => {
this.sublist = [];
this.tmpItem = {};
}
});
}
};
</script>

1
src/components/spin/spin.vue
View file

@ -14,6 +14,7 @@
const prefixCls = 'ivu-spin';
export default {
name: 'Spin',
props: {
size: {
validator (value) {

4
src/index.js
View file

@ -9,7 +9,7 @@ import Breadcrumb from './components/breadcrumb';
import Button from './components/button';
import Card from './components/card';
import Carousel from './components/carousel';
// import Cascader from './components/cascader';
import Cascader from './components/cascader';
import Checkbox from './components/checkbox';
import Circle from './components/circle';
import Collapse from './components/collapse';
@ -59,7 +59,7 @@ const iview = {
Card,
Carousel,
CarouselItem: Carousel.Item,
// Cascader,
Cascader,
Checkbox,
CheckboxGroup: Checkbox.Group,
iCircle: Circle,

1
src/mixins/emitter.js
View file

@ -5,6 +5,7 @@ function broadcast(componentName, eventName, params) {
if (name === componentName) {
child.$emit.apply(child, [eventName].concat(params));
} else {
// todo 如果 params 是空数组，接收到的会是 undefined
broadcast.apply(child, [componentName, eventName].concat([params]));
}
});