Cascader add gloabl setting, #5592 , close #5597

梁灏
1 parent bbc31581
Showing 4 changed files with 86 additions and 4 deletions Show diff stats
src/components/cascader/cascader.vue
src/components/cascader/casitem.vue
src/index.js
src/styles/components/cascader.less
@@ -17,7 +17,7 @@
                     v-show="filterable && query === ''"
                     @click="handleFocus">{{ displayRender }}</div>
                 <Icon type="ios-close-circle" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSelect"></Icon>
-                <Icon type="ios-arrow-down" :class="[prefixCls + '-arrow']"></Icon>
+                <Icon :type="arrowType" :custom="customArrowType" :size="arrowSize" :class="[prefixCls + '-arrow']"></Icon>
             </slot>
         </div>
         <transition name="transition-drop">
@@ -232,6 +232,41 @@
                     return item;
                 });
                 return selections;
+            },
+            // 3.4.0, global setting customArrow 有值时，arrow 赋值空
+            arrowType () {
+                let type = 'ios-arrow-down';
+
+                if (this.$IVIEW) {
+                    if (this.$IVIEW.cascader.customArrow) {
+                        type = '';
+                    } else if (this.$IVIEW.cascader.arrow) {
+                        type = this.$IVIEW.cascader.arrow;
+                    }
+                }
+                return type;
+            },
+            // 3.4.0, global setting
+            customArrowType () {
+                let type = '';
+
+                if (this.$IVIEW) {
+                    if (this.$IVIEW.cascader.customArrow) {
+                        type = this.$IVIEW.cascader.customArrow;
+                    }
+                }
+                return type;
+            },
+            // 3.4.0, global setting
+            arrowSize () {
+                let size = '';
+
+                if (this.$IVIEW) {
+                    if (this.$IVIEW.cascader.arrowSize) {
+                        size = this.$IVIEW.cascader.arrowSize;
+                    }
+                }
+                return size;
             }
         },
         methods: {
 <template>
     <li :class="classes">
         {{ data.label }}
-        <i v-if="showArrow" class="ivu-icon ivu-icon-ios-arrow-forward"></i>
+        <Icon :type="arrowType" :custom="customArrowType" :size="arrowSize" v-if="showArrow" />
         <i v-if="showLoading" class="ivu-icon ivu-icon-ios-loading ivu-load-loop"></i>
     </li>
 </template>
 <script>
+    import Icon from '../icon/icon.vue';
+
     export default {
         name: 'Casitem',
+        components: { Icon },
         props: {
             data: Object,
             prefixCls: String,
@@ -28,6 +31,41 @@
             },
             showLoading () {
                 return 'loading' in this.data && this.data.loading;
+            },
+            // 3.4.0, global setting customArrow 有值时，arrow 赋值空
+            arrowType () {
+                let type = 'ios-arrow-forward';
+
+                if (this.$IVIEW) {
+                    if (this.$IVIEW.cascader.customItemArrow) {
+                        type = '';
+                    } else if (this.$IVIEW.cascader.itemArrow) {
+                        type = this.$IVIEW.cascader.itemArrow;
+                    }
+                }
+                return type;
+            },
+            // 3.4.0, global setting
+            customArrowType () {
+                let type = '';
+
+                if (this.$IVIEW) {
+                    if (this.$IVIEW.cascader.customItemArrow) {
+                        type = this.$IVIEW.cascader.customItemArrow;
+                    }
+                }
+                return type;
+            },
+            // 3.4.0, global setting
+            arrowSize () {
+                let size = '';
+
+                if (this.$IVIEW) {
+                    if (this.$IVIEW.cascader.itemArrowSize) {
+                        size = this.$IVIEW.cascader.itemArrowSize;
+                    }
+                }
+                return size;
             }
         }
     };
@@ -188,6 +188,14 @@ const install = function(Vue, opts = {}) {
             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 : '' : ''
+        },
+        cascader: {
+            arrow: opts.cascader ? opts.cascader.arrow ? opts.cascader.arrow : '' : '',
+            customArrow: opts.cascader ? opts.cascader.customArrow ? opts.cascader.customArrow : '' : '',
+            arrowSize: opts.cascader ? opts.cascader.arrowSize ? opts.cascader.arrowSize : '' : '',
+            itemArrow: opts.cascader ? opts.cascader.itemArrow ? opts.cascader.itemArrow : '' : '',
+            customItemArrow: opts.cascader ? opts.cascader.customItemArrow ? opts.cascader.customItemArrow : '' : '',
+            itemArrowSize: opts.cascader ? opts.cascader.itemArrowSize ? opts.cascader.itemArrowSize : '' : ''
         }
     };
  
@@ -68,7 +68,7 @@
         .inner-arrow();
     }
     &-visible &-arrow:nth-of-type(2) {
-        transform: rotate(180deg);
+        transform: translateY(-50%) rotate(180deg);
     }
  
     .@{select-dropdown-prefix-cls} {
@@ -134,7 +134,8 @@
                 position: absolute;
                 right: 15px;
                 top: 50%;
-                margin-top: -6px;
+                //margin-top: -6px;
+                transform: translateY(-50%);
             }
  
             &-active{