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

support Tree & add dispatch and broadcast methods

Browse source 
support Tree，many component add name $option；add dispatch and broadcast
methods, mixins it
This commit is contained in:
梁灏 2017-03-02 17:40:19 +08:00
parent bb71140e7b
commit 34ee7b4a14
28 changed files with 190 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

174
src/components/tree/tree.vue
View file

@ -1,27 +1,28 @@
<template>
<ul :class="classes">
<li v-for="item in data" :class="itemCls(item)">
<span :class="arrowCls(item)" @click="setExpand(item.disabled, $index)">
<li v-for="(item, index) in data" :class="itemCls(item)">
<span :class="arrowCls(item)" @click="setExpand(item.disabled, index)">
<Icon type="arrow-right-b"></Icon>
</span>
<Checkbox
v-if="showCheckbox"
:checked="item.checked && item.childrenCheckedStatus == 2"
:value="item.checked && item.childrenCheckedStatus == 2"
:disabled="item.disabled || item.disableCheckbox"
:indeterminate="item.checked && item.childrenCheckedStatus == 1"
@click.prevent="setCheck(item.disabled||item.disableCheckbox,$index)"></Checkbox>
<a :class="titleCls(item)" @click="setSelect(item.disabled, $index)">
@click.prevent="setCheck(item.disabled||item.disableCheckbox, index)"></Checkbox>
<a :class="titleCls(item)" @click="setSelect(item.disabled, index)">
<span :class="[prefixCls + '-title']" v-html="item.title"></span>
</a>
<tree
v-if="!item.isLeaf"
v-show="item.expand"
:class="expandCls(item)"
:data.sync="item.children"
:key="this.key+'.'+$index"
:multiple="multiple"
:show-checkbox="showCheckbox"
transition="slide-up"></tree>
<transition name="slide-up">
<Tree
v-if="!item.isLeaf"
v-show="item.expand"
:class="expandCls(item)"
:value="item.children"
:name="item.name+'.'+index"
:multiple="multiple"
:show-checkbox="showCheckbox"></Tree>
</transition>
</li>
</ul>
</template>
@ -29,20 +30,22 @@
import Icon from '../icon/icon.vue';
import Checkbox from '../checkbox/checkbox.vue';
import { t } from '../../locale';
import emitter from '../../mixins/emitter';
const prefixCls = 'ivu-tree';
export default {
name: 'tree',
name: 'Tree',
components: { Icon, Checkbox },
mixins: [ emitter ],
props: {
data: {
value: {
type: Array,
default () {
return [];
}
},
key: {
name: {
type: String,
default: '0'
},
@ -63,12 +66,13 @@
},
data () {
return {
prefixCls: prefixCls
prefixCls: prefixCls,
data: this.value
};
},
computed: {
classes () {
if (this.key === '0') {
if (this.name === '0') {
return this.prefixCls;
} else {
return `${this.prefixCls}-child-tree`;
@ -76,8 +80,11 @@
}
},
watch: {
data(){
if (this.key === '0') {
value (val) {
this.data = val;
},
data () {
if (this.name === '0') {
this.setKey();
this.preHandle();
}
@ -118,55 +125,82 @@
},
setKey () {
for (let i = 0; i < this.data.length; i++) {
this.data[i].key = `${this.key}.${i}`;
this.data[i].name = `${this.name}.${i}`;
}
},
preHandle () {
for (let [i,item] of this.data.entries()) {
for (let [i, item] of this.data.entries()) {
if (!item.children || !item.children.length) {
this.$set(`data[${i}].isLeaf`, true);
this.$set(`data[${i}].childrenCheckedStatus`, 2);
// this.$set(`data[${i}].isLeaf`, true);
// this.$set(`data[${i}].childrenCheckedStatus`, 2);
this.$set(this.data[i], 'isLeaf', true);
this.$set(this.data[i], 'childrenCheckedStatus', 2);
continue;
}
if (item.checked && !item.childrenCheckedStatus) {
this.$set(`data[${i}].childrenCheckedStatus`, 2);
this.$broadcast('parentChecked', true, `${this.key}.${i}`);
// this.$set(`data[${i}].childrenCheckedStatus`, 2);
this.$set(this.data[i], 'childrenCheckedStatus', 2);
// this.$broadcast('parentChecked', true, `${this.name}.${i}`);
this.broadcast('Tree', 'parentChecked', {
status: true,
name: `${this.name}.${i}`
});
} else {
let status = this.getChildrenCheckedStatus(item.children);
this.$set(`data[${i}].childrenCheckedStatus`, status);
if (status !== 0) this.$set(`data[${i}].checked`, true);
// this.$set(`data[${i}].childrenCheckedStatus`, status);
this.$set(this.data[i], 'childrenCheckedStatus', status);
// if (status !== 0) this.$set(`data[${i}].checked`, true);
if (status !== 0) this.$set(this.data[i], 'checked', true);
}
}
},
setExpand (disabled, index) {
if (!disabled) {
this.$set(`data[${index}].expand`, !this.data[index].expand);
// this.$set(`data[${index}].expand`, !this.data[index].expand);
this.$set(this.data[index], 'expand', !this.data[index].expand);
}
},
setSelect (disabled, index) {
if (!disabled) {
const selected = !this.data[index].selected;
if (this.multiple || !selected) {
this.$set(`data[${index}].selected`, selected);
// this.$set(`data[${index}].selected`, selected);
this.$set(this.data[index], 'selected', selected);
} else {
for (let i = 0; i < this.data.length; i++) {
if (i == index) {
this.$set(`data[${i}].selected`, true);
// this.$set(`data[${i}].selected`, true);
this.$set(this.data[i], 'selected', true);
} else {
this.$set(`data[${i}].selected`, false);
// this.$set(`data[${i}].selected`, false);
this.$set(this.data[i], 'selected', false);
}
}
}
this.$dispatch('nodeSelected', this, selected);
// this.$dispatch('nodeSelected', this, selected);
this.dispatch('Tree', 'nodeSelected', {
ori: this,
selected: selected
})
}
},
setCheck (disabled, index) {
if (disabled) return;
const checked = !this.data[index].checked;
this.$set(`data[${index}].checked`, checked);
this.$set(`data[${index}].childrenCheckedStatus`, checked ? 2 : 0);
this.$dispatch('childChecked', this, this.key);
this.$broadcast('parentChecked', checked, `${this.key}.${index}`);
// this.$set(`data[${index}].checked`, checked);
this.$set(this.data[index], 'checked', checked);
// this.$set(`data[${index}].childrenCheckedStatus`, checked ? 2 : 0);
this.$set(this.data[index], 'childrenCheckedStatus', checked ? 2 : 0);
// this.$dispatch('childChecked', this, this.name);
this.dispatch('Tree', 'childChecked', {
ori: this,
name: this.name
});
// this.$broadcast('parentChecked', checked, `${this.name}.${index}`);
this.broadcast('Tree', 'parentChecked', {
status: checked,
name: `${this.name}.${index}`
});
},
getNodes (data, opt) {
data = data || this.data;
@ -215,55 +249,83 @@
}
}
},
ready(){
mounted () {
this.setKey();
this.preHandle();
this.$on('nodeSelected', (ori, selected) => {
if (this.key !== '0') return true;
// this.$on('nodeSelected', (ori, selected) => {
this.$on('nodeSelected', (params) => {
const ori = params.ori;
const selected = params.selected;
if (this.name !== '0') return true;
if (!this.multiple && selected) {
if (this !== ori) {
for (let i = 0; i < this.data.length; i++) {
this.$set(`data[${i}].selected`, false);
// this.$set(`data[${i}].selected`, false);
this.$set(this.data[i], 'selected', false);
}
}
this.$broadcast('cancelSelected', ori);
// this.$broadcast('cancelSelected', ori);
this.broadcast('Tree', 'cancelSelected', ori);
}
this.$nextTick(() => {
this.$emit('on-select-change', this.getSelectedNodes());
});
});
this.$on('cancelSelected', ori => {
this.$broadcast('cancelSelected', ori);
// this.$broadcast('cancelSelected', ori);
this.broadcast('Tree', 'cancelSelected', ori);
if (this !== ori) {
for (let i = 0; i < this.data.length; i++) {
this.$set(`data[${i}].selected`, false);
// this.$set(`data[${i}].selected`, false);
this.$set(this.data[i], 'selected', false);
}
}
});
this.$on('parentChecked', (status, key) => {
if (this.key == key || this.key.startsWith(key + '.')) {
// this.$on('parentChecked', (status, name) => {
this.$on('parentChecked', (params) => {
const status = params.status;
const name = params.name;
if (this.name == name || this.name.startsWith(name + '.')) {
for (let i = 0; i < this.data.length; i++) {
this.$set(`data[${i}].checked`, status);
this.$set(`data[${i}].childrenCheckedStatus`, status ? 2 : 0);
// this.$set(`data[${i}].checked`, status);
this.$set(this.data[i], 'checked', status);
// this.$set(`data[${i}].childrenCheckedStatus`, status ? 2 : 0);
this.$set(this.data[i], 'childrenCheckedStatus', status ? 2 : 0);
}
this.$broadcast('parentChecked', status, key);
// this.$broadcast('parentChecked', status, name);
this.broadcast('Tree', 'parentChecked', {
status: status,
name: name
});
}
});
this.$on('childChecked', (ori, key) => {
if (this.key === '0') {
// this.$on('childChecked', (ori, name) => {
this.$on('childChecked', (params) => {
const ori = params.ori;
const name = params.name;
if (this.name === '0') {
this.$nextTick(() => {
this.$emit('on-check-change', this.getCheckedNodes());
});
}
if (this === ori) return;
for (let [i,item] of this.data.entries()) {
if (this.key + '.' + i == key) {
if (this.name + '.' + i == name) {
let temp = this.getChildrenCheckedStatus(item.children);
if (temp != item.childrenCheckedStatus) {
this.$set(`data[${i}].checked`, !!temp);
this.$set(`data[${i}].childrenCheckedStatus`, temp);
if (this.key !== '0') this.$dispatch('childChecked', this, this.key);
// this.$set(`data[${i}].checked`, !!temp);
this.$set(this.data[i], 'checked', !!temp);
// this.$set(`data[${i}].childrenCheckedStatus`, temp);
this.$set(this.data[i], 'childrenCheckedStatus', temp);
// if (this.name !== '0') this.$dispatch('childChecked', this, this.name);
if (this.name !== '0') this.dispatch('Tree', 'childChecked', {
ori: this,
name: this.name
});
}
}
}