update Tree

update Tree

update Tree
梁灏
1 parent e81207a2
Showing 5 changed files with 56 additions and 38 deletions Show diff stats
src/components/checkbox/checkbox.vue
src/components/collapse/panel.vue
src/components/tree/tree.vue
src/styles/components/tree.less
test/routers/tree.vue
@@ -36,6 +36,10 @@
             checked: {
                 type: Boolean,
                 default: false
+            },
+            indeterminate: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -62,7 +66,8 @@
                     `${prefixCls}`,
                     {
                         [`${prefixCls}-checked`]: this.selected,
-                        [`${prefixCls}-disabled`]: this.disabled
+                        [`${prefixCls}-disabled`]: this.disabled,
+                        [`${prefixCls}-indeterminate`]: this.indeterminate
                     }
                 ];
             },
@@ -10,7 +10,7 @@
     </div>
 </template>
 <script>
-    import Icon from '../icon';
+    import Icon from '../icon/icon.vue';
     const prefixCls = 'ivu-collapse';
     export default {
 <template>
     <ul :class="classes">
         <li v-for="item in data" :class="itemCls(item)">
-            <span :class="arrowCls(item)" @click="setExpand(item.disabled, $index)"></span>
-            <span v-if="showCheckbox" :class="checkboxCls(item)" @click="setCheck(item.disabled||item.disableCheckbox,$index)">
-                <span :class="[prefixCls + '-checkbox-inner']"></span>
+            <span :class="arrowCls(item)" @click="setExpand(item.disabled, $index)">
+                <Icon type="arrow-right-b"></Icon>
             </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)">
                 <span :class="[prefixCls + '-title']" v-html="item.title"></span>
             </a>
@@ -21,12 +27,15 @@
     </ul>
 </template>
 <script>
+    import Icon from '../icon/icon.vue';
+    import Checkbox from '../checkbox/checkbox.vue';
     import { t } from '../../locale';
     const prefixCls = 'ivu-tree';
     export default {
         name: 'tree',
+        components: { Icon, Checkbox },
         props: {
             data: {
                 type: Array,
@@ -135,7 +144,7 @@
                     this.data[i].key = `${this.key}.${i}`;
                 }
             },
-            preHandle(){
+            preHandle () {
                 for (let [i,item] of this.data.entries()) {
                     if (!item.node || !item.node.length) {
                         this.$set(`data[${i}].isLeaf`, true);
@@ -152,12 +161,12 @@
                     }
                 }
             },
-            setExpand(disabled, index){
+            setExpand (disabled, index) {
                 if (!disabled) {
                     this.$set(`data[${index}].expand`, !this.data[index].expand);
                 }
             },
-            setSelect(disabled, index){
+            setSelect (disabled, index) {
                 if (!disabled) {
                     const selected = !this.data[index].selected;
                     if (this.multiple || !selected) {
@@ -174,7 +183,7 @@
                     this.$dispatch('nodeSelected', this, selected);
                 }
             },
-            setCheck(disabled, index){
+            setCheck (disabled, index) {
                 if (disabled) return;
                 const checked = !this.data[index].checked;
                 this.$set(`data[${index}].checked`, checked);
@@ -182,7 +191,7 @@
                 this.$dispatch('childChecked', this, this.key);
                 this.$broadcast('parentChecked', checked, `${this.key}.${index}`);
             },
-            getNodes(data, opt){
+            getNodes (data, opt) {
                 data = data || this.data;
                 let res = [];
                 for (let node of data) {
@@ -202,13 +211,13 @@
                 }
                 return res;
             },
-            getSelectedNodes(){
+            getSelectedNodes () {
                 return this.getNodes(this.data, {selected: true});
             },
-            getCheckedNodes(){
+            getCheckedNodes () {
                 return this.getNodes(this.data, {checked: true, childrenCheckedStatus: 2});
             },
-            getChildrenCheckedStatus(children){
+            getChildrenCheckedStatus (children) {
                 let checkNum = 0, child_childrenAllChecked = true;
                 for (let child of children) {
                     if (child.checked) {
@@ -3,7 +3,7 @@
 .@{tree-prefix-cls} {
     margin: 0;
     padding: 5px;
-    font-size: 12px;
+    font-size: @font-size-small;
     li {
         padding: 0;
         margin: 7px 0;
@@ -46,14 +46,14 @@
         }
         a {
             display: inline-block;
-            padding: 1px 5px;
-            border-radius: 2px;
             margin: 0;
+            padding: 1px 5px;
+            border-radius: @btn-border-radius-small;
             cursor: pointer;
             text-decoration: none;
             vertical-align: top;
-            color: #666;
-            transition: all 0.3s ease;
+            color: @text-color;
+            transition: all @transition-time @ease-in-out;
             &:hover {
                 background-color: tint(@primary-color, 90%);
             }
@@ -67,43 +67,47 @@
             }
             &.@{tree-prefix-cls}-switcher,
             &.@{tree-prefix-cls}-iconEle {
-                margin: 0;
+                display: inline-block;
                 width: 16px;
                 height: 16px;
                 line-height: 16px;
-                display: inline-block;
+                margin: 0;
                 vertical-align: middle;
                 border: 0 none;
                 cursor: pointer;
                 outline: none;
             }
-            &.@{tree-prefix-cls}-icon_loading {
-                &:after {
-                    display: inline-block;
-                    //.iconfont-font("\e6a1");
-                    animation: loadingCircle 1s infinite linear;
-                    color: @primary-color;
-                }
-            }
+            //&.@{tree-prefix-cls}-icon_loading {
+            //    &:after {
+            //        display: inline-block;
+            //        //.iconfont-font("\e6a1");
+            //        animation: loadingCircle 1s infinite linear;
+            //        color: @primary-color;
+            //    }
+            //}
             &.@{tree-prefix-cls}-switcher {
+                i{
+                    transition: all @transition-time @ease-in-out;
+                }
                 &.@{tree-prefix-cls}-switcher-noop {
                     cursor: auto;
+                    i{
+                        display: none;
+                    }
                 }
                 &.@{tree-prefix-cls}-roots_open,
                 &.@{tree-prefix-cls}-center_open,
                 &.@{tree-prefix-cls}-bottom_open,
                 &.@{tree-prefix-cls}-noline_open {
-                    //.antTreeSwitcherIcon();
+                    i {
+                        transform: rotate(90deg);
+                    }
                 }
                 &.@{tree-prefix-cls}-roots_close,
                 &.@{tree-prefix-cls}-center_close,
                 &.@{tree-prefix-cls}-bottom_close,
                 &.@{tree-prefix-cls}-noline_close {
-                    //.antTreeSwitcherIcon();
-                    //.ie-rotate(3);
-                    &:after {
-                        transform: rotate(270deg) scale(0.5);
-                    }
+
                 }
             }
         }
@@ -118,7 +122,7 @@
         >span,
         >a,
         >a span {
-            color: #ccc;
+            color: @input-disabled-bg;
             cursor: not-allowed;
         }
     }
 <template>
     <Tree
         :data.sync="treeData"
-        :checkable="true"
+        :show-checkbox="true"
         :multiple="true"
         :on-select="selectFn"
         :on-check="checkFn"></Tree>
@@ -35,10 +35,10 @@
         },
         methods: {
             selectFn(data){
-                console.log(data);
+//                console.log(data);
             },
             checkFn(data){
-                console.log(data);
+//                console.log(data);
             }
         }
     }