Tree add global setting, update transition component, #5592 , close #5596

梁灏
1 parent d082f8cc
Showing 3 changed files with 61 additions and 6 deletions Show diff stats
src/components/base/collapse-transition.js
src/components/tree/node.vue
src/index.js
@@ -67,9 +67,15 @@ const Transition = {
 export default {
     name: 'CollapseTransition',
     functional: true,
-    render(h, { children }) {
+    props: {
+        appear: Boolean
+    },
+    render(h, { children, props }) {
         const data = {
-            on: Transition
+            on: Transition,
+            props: {
+                appear: props.appear
+            }
         };
  
         return h('transition', data, children);
 <template>
-    <collapse-transition>
+    <collapse-transition :appear="appear">
         <ul :class="classes">
             <li>
                 <span :class="arrowClasses" @click="handleExpand">
-                    <Icon v-if="showArrow" type="ios-arrow-forward"></Icon>
-                    <Icon v-if="showLoading" type="ios-loading" class="ivu-load-loop"></Icon>
+                    <Icon v-if="showArrow" :type="arrowType" :custom="customArrowType" :size="arrowSize" />
+                    <Icon v-if="showLoading" type="ios-loading" class="ivu-load-loop" />
                 </span>
                 <Checkbox
                         v-if="showCheckbox"
@@ -17,6 +17,7 @@
                 <span v-else :class="titleClasses" @click="handleSelect">{{ data.title }}</span>
                 <Tree-node
                         v-if="data.expand"
+                        :appear="appearByClickArrow"
                         v-for="(item, i) in children"
                         :key="i"
                         :data="item"
@@ -61,11 +62,16 @@
             showCheckbox: {
                 type: Boolean,
                 default: false
+            },
+            appear: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
             return {
-                prefixCls: prefixCls
+                prefixCls: prefixCls,
+                appearByClickArrow: false
             };
         },
         computed: {
@@ -127,6 +133,41 @@
             },
             children () {
                 return this.data[this.childrenKey];
+            },
+            // 3.4.0, global setting customArrow 有值时，arrow 赋值空
+            arrowType () {
+                let type = 'ios-arrow-forward';
+
+                if (this.$IVIEW) {
+                    if (this.$IVIEW.tree.customArrow) {
+                        type = '';
+                    } else if (this.$IVIEW.tree.arrow) {
+                        type = this.$IVIEW.tree.arrow;
+                    }
+                }
+                return type;
+            },
+            // 3.4.0, global setting
+            customArrowType () {
+                let type = '';
+
+                if (this.$IVIEW) {
+                    if (this.$IVIEW.tree.customArrow) {
+                        type = this.$IVIEW.tree.customArrow;
+                    }
+                }
+                return type;
+            },
+            // 3.4.0, global setting
+            arrowSize () {
+                let size = '';
+
+                if (this.$IVIEW) {
+                    if (this.$IVIEW.tree.arrowSize) {
+                        size = this.$IVIEW.tree.arrowSize;
+                    }
+                }
+                return size;
             }
         },
         methods: {
@@ -134,6 +175,9 @@
                 const item = this.data;
                 if (item.disabled) return;
  
+                // Vue.js 2.6.9 对 transition 的 appear 进行了调整，导致 iView 初始化时无动画，加此方法来判断通过点击箭头展开时，加 appear，否则初始渲染时 appear 为 false
+                this.appearByClickArrow = true;
+
                 // async loading
                 if (item[this.childrenKey].length === 0) {
                     const tree = findComponentUpward(this, 'Tree');
@@ -183,6 +183,11 @@ const install = function(Vue, opts = {}) {
             arrow: opts.menu ? opts.menu.arrow ? opts.menu.arrow : '' : '',
             customArrow: opts.menu ? opts.menu.customArrow ? opts.menu.customArrow : '' : '',
             arrowSize: opts.menu ? opts.menu.arrowSize ? opts.menu.arrowSize : '' : ''
+        },
+        tree: {
+            arrow: opts.tree ? opts.tree.arrow ? opts.tree.arrow : '' : '',
+            customArrow: opts.tree ? opts.tree.customArrow ? opts.tree.customArrow : '' : '',
+            arrowSize: opts.tree ? opts.tree.arrowSize ? opts.tree.arrowSize : '' : ''
         }
     };