Issue/16725

packages/cascader-panel/src/cascader-node.vue

@@ -205,20 +205,19 @@
       const disabled = !checkStrictly && isDisabled;
       const events = { on: {} };
 
-      if (!isLeaf) {
-        if (expandTrigger === 'click') {
-          events.on.click = this.handleExpand;
-        } else {
-          events.on.mouseenter = e => {
-            this.handleExpand();
-            this.$emit('expand', e);
-          };
-          events.on.focus = e => {
-            this.handleExpand();
-            this.$emit('expand', e);
-          };
-        }
-      } else if (!isDisabled && !checkStrictly && !multiple) {
+      if (expandTrigger === 'click') {
+        events.on.click = this.handleExpand;
+      } else {
+        events.on.mouseenter = e => {
+          this.handleExpand();
+          this.$emit('expand', e);
+        };
+        events.on.focus = e => {
+          this.handleExpand();
+          this.$emit('expand', e);
+        };
+      }
+      if (isLeaf && !isDisabled && !checkStrictly && !multiple) {
         events.on.click = this.handleCheckChange;
       }
 

packages/cascader-panel/src/cascader-panel.vue

@@ -2,7 +2,8 @@
   <div
     :class="[
       'el-cascader-panel',
-      border && 'is-bordered'
+      border && 'is-bordered',
+      { [`el-cascader-panel--${_computedSize}`] : !!_computedSize }
     ]"
     @keydown="handleKeyDown">
     <cascader-menu
@@ -88,6 +89,7 @@ export default {
 
   props: {
     value: {},
+    size: String,
     options: Array,
     props: Object,
     border: {
@@ -132,6 +134,9 @@ export default {
     },
     renderLabelFn() {
       return this.renderLabel || this.$scopedSlots.default;
+    },
+    _computedSize() {
+      return this.size || (this.$ELEMENT || {}).size;
     }
   },
 

packages/cascader/src/cascader.vue

@@ -77,6 +77,7 @@
           :options="options"
           :props="config"
           :border="false"
+          :size="realSize"
           :render-label="$scopedSlots.default"
           @expand-change="handleExpandChange"
           @close="toggleDropDownVisible(false)"></el-cascader-panel>
@@ -300,6 +301,9 @@ export default {
   },
 
   watch: {
+    disabled() {
+      this.computePresentContent();
+    },
     value(val) {
       if (!isEqual(val, this.checkedValue)) {
         this.checkedValue = val;

packages/input/src/input.vue

@@ -61,6 +61,7 @@
           </template>
           <i v-if="showClear"
             class="el-input__icon el-icon-circle-close el-input__clear"
+            @mousedown.prevent
             @click="clear"
           ></i>
           <i v-if="showPwdVisible"

packages/radio/src/radio-group.vue

@@ -1,11 +1,12 @@
 <template>
-  <div
+  <component
+    :is="_elTag"
     class="el-radio-group"
     role="radiogroup"
     @keydown="handleKeydown"
   >
     <slot></slot>
-  </div>
+  </component>
 </template>
 <script>
   import Emitter from 'element-ui/src/mixins/emitter';
@@ -41,6 +42,9 @@
       _elFormItemSize() {
         return (this.elFormItem || {}).elFormItemSize;
       },
+      _elTag() {
+        return (this.$vnode.data || {}).tag || 'div';
+      },
       radioGroupSize() {
         return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
       }

packages/select/src/select-dropdown.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="el-select-dropdown el-popper"
-    :class="[{ 'is-multiple': $parent.multiple }, popperClass]"
+    :class="[{ 'is-multiple': $parent.multiple }, popperClass, { [`el-select-dropdown--${_computedSize}`] : !!_computedSize }]"
     :style="{ minWidth: minWidth }">
     <slot></slot>
   </div>
@@ -18,6 +18,7 @@
     mixins: [Popper],
 
     props: {
+      size: String,
       placement: {
         default: 'bottom-start'
       },
@@ -53,6 +54,9 @@
     computed: {
       popperClass() {
         return this.$parent.popperClass;
+      },
+      _computedSize() {
+        return this.size || (this.$ELEMENT || {}).size;
       }
     },
 

packages/select/src/select.vue

@@ -105,6 +105,7 @@
       @after-leave="doDestroy">
       <el-select-menu
         ref="popper"
+        :size="selectSize"
         :append-to-body="popperAppendToBody"
         v-show="visible && emptyText !== false">
         <el-scrollbar

packages/tabs/src/tab-nav.vue

@@ -85,19 +85,30 @@
         const activeTab = this.$el.querySelector('.is-active');
         if (!activeTab) return;
         const navScroll = this.$refs.navScroll;
+        const isHorizontal = ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1;
         const activeTabBounding = activeTab.getBoundingClientRect();
         const navScrollBounding = navScroll.getBoundingClientRect();
-        const maxOffset = nav.offsetWidth - navScrollBounding.width;
+        const maxOffset = isHorizontal
+          ? nav.offsetWidth - navScrollBounding.width
+          : nav.offsetHeight - navScrollBounding.height;
         const currentOffset = this.navOffset;
         let newOffset = currentOffset;
 
-        if (activeTabBounding.left < navScrollBounding.left) {
-          newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);
-        }
-        if (activeTabBounding.right > navScrollBounding.right) {
-          newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
+        if (isHorizontal) {
+          if (activeTabBounding.left < navScrollBounding.left) {
+            newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);
+          }
+          if (activeTabBounding.right > navScrollBounding.right) {
+            newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
+          }
+        } else {
+          if (activeTabBounding.top < navScrollBounding.top) {
+            newOffset = currentOffset - (navScrollBounding.top - activeTabBounding.top);
+          }
+          if (activeTabBounding.bottom > navScrollBounding.bottom) {
+            newOffset = currentOffset + (activeTabBounding.bottom - navScrollBounding.bottom);
+          }
         }
-
         newOffset = Math.max(newOffset, 0);
         this.navOffset = Math.min(newOffset, maxOffset);
       },

packages/theme-chalk/src/cascader-panel.scss

@@ -13,6 +13,77 @@
     border: $--cascader-menu-border;
     border-radius: $--cascader-menu-radius;
   }
+  @include m(medium) {
+    @include b(cascader-menu) {
+      min-width: 170px;
+    }
+    @include b(cascader-node) {
+      padding: 0 26px 0 16px;
+      height: 28px;
+      line-height: 28px;
+      font-size: 14px;
+
+      @include e(prefix) {
+        left: 10px;
+      }
+
+      @include e(postfix) {
+        right: 10px;
+      }
+
+      @include e(label) {
+        padding: 0 10px;
+      }
+    }
+  }
+
+  @include m(small) {
+    @include b(cascader-menu) {
+      min-width: 160px;
+    }
+    @include b(cascader-node) {
+      padding: 0 24px 0 14px;
+      height: 26px;
+      line-height: 26px;
+      font-size: 13px;
+
+      @include e(prefix) {
+        left: 8px;
+      }
+
+      @include e(postfix) {
+        right: 8px;
+      }
+
+      @include e(label) {
+        padding: 0 8px;
+      }
+    }
+  }
+
+  @include m(mini) {
+    @include b(cascader-menu) {
+      min-width: 140px;
+    }
+    @include b(cascader-node) {
+      padding: 0 20px 0 10px;
+      height: 24px;
+      line-height: 24px;
+      font-size: 12px;
+
+      @include e(prefix) {
+        left: 6px;
+      }
+
+      @include e(postfix) {
+        right: 6px;
+      }
+
+      @include e(label) {
+        padding: 0 6px;
+      }
+    }
+  }
 }
 
 @include b(cascader-menu) {

packages/theme-chalk/src/select-dropdown.scss

@@ -34,6 +34,33 @@
     }
   }
 
+  @include m(medium) {
+    @include e(item) {
+      height: 30px;
+      line-height: 30px;
+      padding: 0 17px;
+      font-size: 14px;
+    }
+  }
+
+  @include m(small) {
+    @include e(item) {
+      height: 27px;
+      line-height: 27px;
+      padding: 0 15px;
+      font-size: 13px;
+    }
+  }
+
+  @include m(mini) {
+    @include e(item) {
+      height: 24px;
+      line-height: 24px;
+      padding: 0 10px;
+      font-size: 12px;
+    }
+  }
+
   .el-scrollbar.is-empty .el-select-dropdown__list{
     padding: 0;
   }

test/unit/specs/cascader-panel.spec.js

@@ -88,6 +88,23 @@ const options2 = [{
   }]
 }];
 
+const options3 = [
+  {
+    value: 'shanghai',
+    label: '上海',
+    children: [
+      {
+        value: 'baoshan',
+        label: '宝山'
+      }
+    ]
+  },
+  {
+    value: 'beijing',
+    label: '北京'
+  }
+];
+
 const getMenus = el => el.querySelectorAll('.el-cascader-menu');
 const getOptions = (el, menuIndex) => getMenus(el)[menuIndex].querySelectorAll('.el-cascader-node');
 const getValidOptions = (el, menuIndex) => getMenus(el)[menuIndex].querySelectorAll('.el-cascader-node[tabindex="-1"]');
@@ -532,5 +549,33 @@ describe('CascaderPanel', () => {
     await waitImmediate();
     expect(vm.value.length).to.equal(3);
   });
+
+  it('click leaf hidden children', async() => {
+    vm = createVue({
+      template: `
+        <el-cascader-panel
+          ref="panel"
+          v-model="value"
+          :options="options"></el-cascader-panel>
+      `,
+      data() {
+        return {
+          value: [],
+          options: options3
+        };
+      }
+    }, true);
+
+    const el = vm.$el;
+    const elOptions = getOptions(el, 0);
+    const firstOption = elOptions[0];
+    const twoOption = elOptions[1];
+    firstOption.click();
+    await waitImmediate();
+    expect(getMenus(el).length).to.equal(2);
+    twoOption.click();
+    await waitImmediate();
+    expect(getMenus(el).length).to.equal(1);
+  });
 });
 

test/unit/specs/cascader.spec.js

@@ -50,6 +50,7 @@ const options = [{
 const getMenus = el => el.querySelectorAll('.el-cascader-menu');
 const getOptions = (el, menuIndex) => getMenus(el)[menuIndex].querySelectorAll('.el-cascader-node');
 const selectedValue = ['zhejiang', 'hangzhou', 'xihu'];
+const getCloseButton = el => el.querySelectorAll('i.el-tag__close');
 
 describe('Cascader', () => {
   let vm;
@@ -242,12 +243,14 @@ describe('Cascader', () => {
         <el-cascader
           v-model="value"
           :options="options"
+          :disabled="disabled"
           :props="props"></el-cascader>
       `,
       data() {
         return {
           value: [],
           options,
+          disabled: false,
           props: {
             multiple: true
           }
@@ -258,6 +261,7 @@ describe('Cascader', () => {
     getOptions(document.body, 0)[0].querySelector('.el-checkbox input').click();
     await waitImmediate();
     expect(vm.value.length).to.equal(3);
+    expect(getCloseButton(vm.$el).length).to.equal(3);
 
     const tags = vm.$el.querySelectorAll('.el-tag');
     const closeBtn = tags[0].querySelector('.el-tag__close');
@@ -267,6 +271,10 @@ describe('Cascader', () => {
     await waitImmediate();
     expect(vm.value.length).to.equal(2);
     expect(vm.$el.querySelectorAll('.el-tag').length).to.equal(2);
+
+    vm.disabled = true;
+    await waitImmediate();
+    expect(getCloseButton(vm.$el).length).to.equal(0);
   });
 
   it('clearable in multiple mode', async() => {