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

update Tree

Browse source 
update Tree
This commit is contained in:
梁灏 2017-02-07 13:34:16 +08:00
parent e81207a2a2
commit b923c8187c
5 changed files with 56 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/checkbox/checkbox.vue
View file

@ -36,6 +36,10 @@
checked: { checked: {
type: Boolean, type: Boolean,
default: false default: false
},
indeterminate: {
type: Boolean,
default: false
} }
}, },
data () { data () {
@ -62,7 +66,8 @@
`${prefixCls}`, `${prefixCls}`,
{ {
[`${prefixCls}-checked`]: this.selected, [`${prefixCls}-checked`]: this.selected,
[`${prefixCls}-disabled`]: this.disabled [`${prefixCls}-disabled`]: this.disabled,
[`${prefixCls}-indeterminate`]: this.indeterminate
} }
]; ];
}, },

2
src/components/collapse/panel.vue
View file

@ -10,7 +10,7 @@
</div> </div>
</template> </template>
<script> <script>
import Icon from '../icon'; import Icon from '../icon/icon.vue';
const prefixCls = 'ivu-collapse'; const prefixCls = 'ivu-collapse';
export default { export default {

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

@ -1,10 +1,16 @@
<template> <template>
<ul :class="classes"> <ul :class="classes">
<li v-for="item in data" :class="itemCls(item)"> <li v-for="item in data" :class="itemCls(item)">
<span :class="arrowCls(item)" @click="setExpand(item.disabled, $index)"></span> <span :class="arrowCls(item)" @click="setExpand(item.disabled, $index)">
<span v-if="showCheckbox" :class="checkboxCls(item)" @click="setCheck(item.disabled||item.disableCheckbox,$index)"> <Icon type="arrow-right-b"></Icon>
<span :class="[prefixCls + '-checkbox-inner']"></span>
</span> </span>
<!--<span v-if="showCheckbox" :class="checkboxCls(item)" @click="setCheck(item.disabled||item.disableCheckbox,$index)">-->
<!--<span :class="[prefixCls + '-checkbox-inner']"></span>-->
<!--</span>-->
<Checkbox
:checked="item.checked && item.childrenCheckedStatus == 2"
:disabled="item.disabled || item.disableCheckbox"
@click.prevent="setCheck(item.disabled||item.disableCheckbox,$index)"></Checkbox>
<a :class="titleCls(item)" @click="setSelect(item.disabled, $index)"> <a :class="titleCls(item)" @click="setSelect(item.disabled, $index)">
<span :class="[prefixCls + '-title']" v-html="item.title"></span> <span :class="[prefixCls + '-title']" v-html="item.title"></span>
</a> </a>
@ -21,12 +27,15 @@
</ul> </ul>
</template> </template>
<script> <script>
import Icon from '../icon/icon.vue';
import Checkbox from '../checkbox/checkbox.vue';
import { t } from '../../locale'; import { t } from '../../locale';
const prefixCls = 'ivu-tree'; const prefixCls = 'ivu-tree';
export default { export default {
name: 'tree', name: 'tree',
components: { Icon, Checkbox },
props: { props: {
data: { data: {
type: Array, type: Array,
@ -135,7 +144,7 @@
this.data[i].key = `${this.key}.${i}`; this.data[i].key = `${this.key}.${i}`;
} }
}, },
preHandle(){ preHandle () {
for (let [i,item] of this.data.entries()) { for (let [i,item] of this.data.entries()) {
if (!item.node || !item.node.length) { if (!item.node || !item.node.length) {
this.$set(`data[${i}].isLeaf`, true); this.$set(`data[${i}].isLeaf`, true);
@ -152,12 +161,12 @@
} }
} }
}, },
setExpand(disabled, index){ setExpand (disabled, index) {
if (!disabled) { if (!disabled) {
this.$set(`data[${index}].expand`, !this.data[index].expand); this.$set(`data[${index}].expand`, !this.data[index].expand);
} }
}, },
setSelect(disabled, index){ setSelect (disabled, index) {
if (!disabled) { if (!disabled) {
const selected = !this.data[index].selected; const selected = !this.data[index].selected;
if (this.multiple || !selected) { if (this.multiple || !selected) {
@ -174,7 +183,7 @@
this.$dispatch('nodeSelected', this, selected); this.$dispatch('nodeSelected', this, selected);
} }
}, },
setCheck(disabled, index){ setCheck (disabled, index) {
if (disabled) return; if (disabled) return;
const checked = !this.data[index].checked; const checked = !this.data[index].checked;
this.$set(`data[${index}].checked`, checked); this.$set(`data[${index}].checked`, checked);
@ -182,7 +191,7 @@
this.$dispatch('childChecked', this, this.key); this.$dispatch('childChecked', this, this.key);
this.$broadcast('parentChecked', checked, `${this.key}.${index}`); this.$broadcast('parentChecked', checked, `${this.key}.${index}`);
}, },
getNodes(data, opt){ getNodes (data, opt) {
data = data || this.data; data = data || this.data;
let res = []; let res = [];
for (let node of data) { for (let node of data) {
@ -202,13 +211,13 @@
} }
return res; return res;
}, },
getSelectedNodes(){ getSelectedNodes () {
return this.getNodes(this.data, {selected: true}); return this.getNodes(this.data, {selected: true});
}, },
getCheckedNodes(){ getCheckedNodes () {
return this.getNodes(this.data, {checked: true, childrenCheckedStatus: 2}); return this.getNodes(this.data, {checked: true, childrenCheckedStatus: 2});
}, },
getChildrenCheckedStatus(children){ getChildrenCheckedStatus (children) {
let checkNum = 0, child_childrenAllChecked = true; let checkNum = 0, child_childrenAllChecked = true;
for (let child of children) { for (let child of children) {
if (child.checked) { if (child.checked) {

48
src/styles/components/tree.less
View file

@ -3,7 +3,7 @@
.@{tree-prefix-cls} { .@{tree-prefix-cls} {
margin: 0; margin: 0;
padding: 5px; padding: 5px;
font-size: 12px; font-size: @font-size-small;
li { li {
padding: 0; padding: 0;
margin: 7px 0; margin: 7px 0;
@ -46,14 +46,14 @@
} }
a { a {
display: inline-block; display: inline-block;
padding: 1px 5px;
border-radius: 2px;
margin: 0; margin: 0;
padding: 1px 5px;
border-radius: @btn-border-radius-small;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
vertical-align: top; vertical-align: top;
color: #666; color: @text-color;
transition: all 0.3s ease; transition: all @transition-time @ease-in-out;
&:hover { &:hover {
background-color: tint(@primary-color, 90%); background-color: tint(@primary-color, 90%);
} }
@ -67,43 +67,47 @@
} }
&.@{tree-prefix-cls}-switcher, &.@{tree-prefix-cls}-switcher,
&.@{tree-prefix-cls}-iconEle { &.@{tree-prefix-cls}-iconEle {
margin: 0; display: inline-block;
width: 16px; width: 16px;
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
display: inline-block; margin: 0;
vertical-align: middle; vertical-align: middle;
border: 0 none; border: 0 none;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
} }
&.@{tree-prefix-cls}-icon_loading { //&.@{tree-prefix-cls}-icon_loading {
&:after { // &:after {
display: inline-block; // display: inline-block;
//.iconfont-font("\e6a1"); // //.iconfont-font("\e6a1");
animation: loadingCircle 1s infinite linear; // animation: loadingCircle 1s infinite linear;
color: @primary-color; // color: @primary-color;
} // }
} //}
&.@{tree-prefix-cls}-switcher { &.@{tree-prefix-cls}-switcher {
i{
transition: all @transition-time @ease-in-out;
}
&.@{tree-prefix-cls}-switcher-noop { &.@{tree-prefix-cls}-switcher-noop {
cursor: auto; cursor: auto;
i{
display: none;
}
} }
&.@{tree-prefix-cls}-roots_open, &.@{tree-prefix-cls}-roots_open,
&.@{tree-prefix-cls}-center_open, &.@{tree-prefix-cls}-center_open,
&.@{tree-prefix-cls}-bottom_open, &.@{tree-prefix-cls}-bottom_open,
&.@{tree-prefix-cls}-noline_open { &.@{tree-prefix-cls}-noline_open {
//.antTreeSwitcherIcon(); i {
transform: rotate(90deg);
}
} }
&.@{tree-prefix-cls}-roots_close, &.@{tree-prefix-cls}-roots_close,
&.@{tree-prefix-cls}-center_close, &.@{tree-prefix-cls}-center_close,
&.@{tree-prefix-cls}-bottom_close, &.@{tree-prefix-cls}-bottom_close,
&.@{tree-prefix-cls}-noline_close { &.@{tree-prefix-cls}-noline_close {
//.antTreeSwitcherIcon();
//.ie-rotate(3);
&:after {
transform: rotate(270deg) scale(0.5);
}
} }
} }
} }
@ -118,7 +122,7 @@
>span, >span,
>a, >a,
>a span { >a span {
color: #ccc; color: @input-disabled-bg;
cursor: not-allowed; cursor: not-allowed;
} }
} }

6
test/routers/tree.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<Tree <Tree
:data.sync="treeData" :data.sync="treeData"
:checkable="true" :show-checkbox="true"
:multiple="true" :multiple="true"
:on-select="selectFn" :on-select="selectFn"
:on-check="checkFn"></Tree> :on-check="checkFn"></Tree>
@ -35,10 +35,10 @@
}, },
methods: { methods: {
selectFn(data){ selectFn(data){
console.log(data); // console.log(data);
}, },
checkFn(data){ checkFn(data){
console.log(data); // console.log(data);
} }
} }
} }