drip-public/iview
5
0
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 有区别 DropdownItem 里，this.$parent.$parent 与1.0 有区别
### Menu ### Menu
MenuItem 和 Submenu 的 key 改为了 name 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 - [x] Slider
- [ ] DatePicker - [ ] DatePicker
- [ ] TimePicker - [ ] TimePicker
- [ ] Cascader - [x] Cascader
- [ ] Transfer - [ ] Transfer
- [x] InputNumber - [x] InputNumber
- [x] Rate - [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="/breadcrumb">Breadcrumb</router-link></li>
<li><router-link to="/menu">Menu</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="/spin">Spin</router-link></li>
<li><router-link to="/cascader">Cascader</router-link></li>
</ul> </ul>
</nav> </nav>
<router-view></router-view> <router-view></router-view>

4
examples/main.js
View file

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

95
examples/routers/cascader.vue
View file

@ -1,24 +1,85 @@
<template> <!--<template>-->
{{ text }} <!--<div>-->
<Cascader :data="data" @on-change="handleChange"> <!--<Cascader :data="data" v-model="value1"></Cascader>-->
<a href="javascript:void(0)">选择</a> <!--{{ value1 }}-->
</Cascader> <!--<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"> <template>
Disabled <Switch :checked.sync="disabled"></Switch> <div>
</i-col> <Cascader :data="data" v-model="value2" change-on-select></Cascader>
<i-col span="4"> {{ value2 }}
<Cascader :data="data" :value.sync="value1" :disabled="disabled"></Cascader> <div @click="c">change</div>
</i-col> </div>
</Row>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
disabled: false, value2: [],
text: '未选择',
data: [{ data: [{
value: 'beijing', value: 'beijing',
label: '北京', label: '北京',
@ -69,8 +130,8 @@
} }
}, },
methods: { methods: {
handleChange (value, selectedData) { c () {
this.text = selectedData.map(o => o.label).join(', '); this.value2 = ['jiangsu', 'suzhou', 'zhuozhengyuan']
} }
} }
} }

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

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

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

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

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

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

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

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

4
src/index.js
View file

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

1
src/mixins/emitter.js
View file

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