add popper-class for DatePicker, Select and Tooltip (#1806)

examples/docs/en-US/date-picker.md

@@ -260,6 +260,7 @@ Picking a date range is supported.
 | type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
 | format | format of the picker | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
 | align | alignment | left/center/right | left |
+| popper-class | custom class name for DatePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |
 
 ### Picker Options

examples/docs/en-US/datetime-picker.md

@@ -215,6 +215,7 @@ Select date and time in one picker.
 | type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
 | format | format of the picker | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
 | align | alignment | left/center/right | left |
+| popper-class | custom class name for DateTimePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |
 
 ### Picker Options

examples/docs/en-US/select.md

@@ -640,6 +640,7 @@ Create and select new items that are not included in select options
 | loading-text | displayed text while loading data from server | string | — | Loading |
 | no-match-text | displayed text when no data matches the filtering query | string | — | No matching data |
 | no-data-text | displayed text when there is no options | string | — | No data |
+| popper-class | custom class name for Select's dropdown | string | — | — |
 
 ### Select Events
 | Event Name | Description | Parameters |

examples/docs/en-US/time-picker.md

@@ -151,6 +151,7 @@ Can pick an arbitrary time range.
 | format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
 | value | value of the picker | date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
 | align | alignment | left/center/right | left |
+| popper-class | custom class name for TimePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |
 
 ### Time Select Options

examples/docs/en-US/tooltip.md

@@ -205,3 +205,4 @@ In fact, Tooltip is an extension based on [Vue-popper](https://github.com/elemen
 |  options        | [popper.js](https://popper.js.org/documentation.html) parameters | Object            | refer to [popper.js](https://popper.js.org/documentation.html) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 | openDelay | delay of appearance, in millisecond | number | — | 0 |
 | manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true`事件将不会生效 | boolean | — | false |
+|  popper-class  |  custom class name for Tooltip's popper | string | — | — |

examples/docs/zh-CN/date-picker.md

@@ -294,6 +294,7 @@
 | type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
 | format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
 | align | 对齐方式 | string | left, center, right | left |
+| popper-class | DatePicker 下拉框的类名 | string | — | — |
 |picker-options | 当前时间日期选择器特有的选项参考下表 | object |  — | {} |
 
 ### Picker Options

examples/docs/zh-CN/datetime-picker.md

@@ -238,6 +238,7 @@
 | type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
 | format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
 | align | 对齐方式 | string | left, center, right | left |
+| popper-class | DateTimePicker 下拉框的类名 | string | — | — |
 | picker-options | 当前时间日期选择器特有的选项参考下表 | object |  — | {} |
 
 ### Picker Options

examples/docs/zh-CN/select.md

@@ -642,6 +642,7 @@
 | loading-text | 远程加载时显示的文字 | string | — | 加载中 |
 | no-match-text | 搜索条件无匹配时显示的文字 | string | — | 无匹配数据 |
 | no-data-text | 选项为空时显示的文字 | string | — | 无数据 |
+| popper-class | Select 下拉框的类名 | string | — | — |
 
 ### Select Events
 | 事件名称 | 说明 | 回调参数 |

examples/docs/zh-CN/time-picker.md

@@ -158,6 +158,7 @@
 | format | 时间格式化(TimePicker) | string | 小时：`HH`，分：`mm`，秒：`ss` | 'HH:mm:ss' |
 | value | 绑定值 | TimePicker: DateTimeSelect: String | - | - |
 | align | 对齐方式 | string | left, center, right | left |
+| popper-class | TimePicker 下拉框的类名 | string | — | — |
 | picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
 
 ### Time Select Options

examples/docs/zh-CN/tooltip.md

@@ -209,3 +209,4 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`。
 |  options        | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 | openDelay | 延迟出现，单位毫秒 | Number | — | 0 |
 | manual | 手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效 | Boolean | — | false |
+| popper-class | 为 Tooltip 的 popper 添加类名 | String | - | -|

packages/date-picker/src/panel/date-range.vue

@@ -4,10 +4,10 @@
       v-show="visible"
       :style="{ width: width + 'px' }"
       class="el-picker-panel el-date-range-picker"
-      :class="{
+      :class="[{
         'has-sidebar': $slots.sidebar || shortcuts,
         'has-time': showTime
-      }">
+      }, popperClass]">
       <div class="el-picker-panel__body-wrapper">
         <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
         <div class="el-picker-panel__sidebar" v-if="shortcuts">
@@ -215,6 +215,7 @@
 
     data() {
       return {
+        popperClass: '',
         minPickerWidth: 0,
         maxPickerWidth: 0,
         date: new Date(),

packages/date-picker/src/panel/date.vue

@@ -6,10 +6,10 @@
         width: width + 'px'
       }"
       class="el-picker-panel el-date-picker"
-      :class="{
+      :class="[{
         'has-sidebar': $slots.sidebar || shortcuts,
         'has-time': showTime
-      }">
+      }, popperClass]">
       <div class="el-picker-panel__body-wrapper">
         <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
         <div class="el-picker-panel__sidebar" v-if="shortcuts">
@@ -367,6 +367,7 @@
 
     data() {
       return {
+        popperClass: '',
         pickerWidth: 0,
         date: new Date(),
         value: '',

packages/date-picker/src/panel/time-range.vue

@@ -6,7 +6,8 @@
     <div
       v-show="visible"
       :style="{ width: width + 'px' }"
-      class="el-time-range-picker el-picker-panel">
+      class="el-time-range-picker el-picker-panel"
+      :class="popperClass">
       <div class="el-time-range-picker__content">
         <div class="el-time-range-picker__cell">
           <div class="el-time-range-picker__header">{{ t('el.datepicker.startTime') }}</div>
@@ -97,6 +98,7 @@
       const time = clacTime(this.$options.defaultValue);
 
       return {
+        popperClass: '',
         minTime: time.minTime,
         maxTime: time.maxTime,
         btnDisabled: isDisabled(time.minTime, time.maxTime),

packages/date-picker/src/panel/time-select.vue

@@ -3,7 +3,8 @@
     <div
       v-show="visible"
       :style="{ width: width + 'px' }"
-      class="el-picker-panel time-select">
+      class="el-picker-panel time-select"
+      :class="popperClass">
       <div class="el-picker-panel__content">
         <div class="time-select-item"
           v-for="item in items"
@@ -90,6 +91,7 @@
 
     data() {
       return {
+        popperClass: '',
         start: '09:00',
         end: '18:00',
         step: '00:30',

packages/date-picker/src/panel/time.vue

@@ -3,7 +3,8 @@
     <div
       v-show="currentVisible"
       :style="{width: width + 'px'}"
-      class="el-time-panel">
+      class="el-time-panel"
+      :class="popperClass">
       <div class="el-time-panel__content" :class="{ 'has-seconds': showSeconds }">
         <time-spinner
           ref="spinner"
@@ -82,6 +83,7 @@
 
     data() {
       return {
+        popperClass: '',
         format: 'HH:mm:ss',
         value: '',
         hours: 0,

packages/date-picker/src/picker.vue

@@ -187,6 +187,7 @@ export default {
     readonly: Boolean,
     placeholder: String,
     disabled: Boolean,
+    popperClass: String,
     editable: {
       type: Boolean,
       default: true
@@ -377,6 +378,7 @@ export default {
       if (!this.picker) {
         this.panel.defaultValue = this.internalValue;
         this.picker = new Vue(this.panel).$mount(document.createElement('div'));
+        this.picker.popperClass = this.popperClass;
         this.popperElm = this.picker.$el;
         this.picker.width = this.reference.getBoundingClientRect().width;
         this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';

packages/select/src/select-dropdown.vue

 <template>
   <div
     class="el-select-dropdown"
-    :class="{ 'is-multiple': $parent.multiple }"
+    :class="[{ 'is-multiple': $parent.multiple }, popperClass]"
     :style="{ minWidth: minWidth }">
     <slot></slot>
   </div>
@@ -42,6 +42,12 @@
       };
     },
 
+    computed: {
+      popperClass() {
+        return this.$parent.popperClass;
+      }
+    },
+
     watch: {
       '$parent.inputWidth'() {
         this.minWidth = this.$parent.$el.getBoundingClientRect().width + 'px';

packages/select/src/select.vue

@@ -162,6 +162,7 @@
       filterable: Boolean,
       allowCreate: Boolean,
       loading: Boolean,
+      popperClass: String,
       remote: Boolean,
       loadingText: String,
       noMatchText: String,

packages/tooltip/src/main.vue

@@ -10,7 +10,7 @@
     <transition :name="transition" @after-leave="doDestroy">
       <div
         class="el-tooltip__popper"
-        :class="['is-' + effect]"
+        :class="['is-' + effect, popperClass]"
         ref="popper"
         v-show="!disabled && showPopper">
         <slot name="content"><div v-text="content"></div></slot>
@@ -38,6 +38,7 @@ export default {
       type: String,
       default: 'dark'
     },
+    popperClass: String,
     content: String,
     visibleArrow: {
       default: true

test/unit/specs/select.spec.js

@@ -37,6 +37,7 @@ describe('Select', () => {
             v-model="value"
             :multiple="multiple"
             :multiple-limit="multipleLimit"
+            :popper-class="popperClass"
             :clearable="clearable"
             :filterable="filterable"
             :allow-create="allowCreate"
@@ -62,6 +63,7 @@ describe('Select', () => {
           clearable: configs.clearable,
           filterable: configs.filterable,
           allowCreate: configs.allowCreate,
+          popperClass: configs.popperClass,
           loading: false,
           filterMethod: configs.filterMethod && configs.filterMethod(this),
           remote: configs.remote,
@@ -96,6 +98,12 @@ describe('Select', () => {
     expect(result).to.true;
   });
 
+  it('custom dropdown class', () => {
+    vm = getSelectVm({ popperClass: 'custom-dropdown' });
+    const dropdown = vm.$el.querySelector('.el-select-dropdown');
+    expect(dropdown.classList.contains('custom-dropdown')).to.true;
+  });
+
   it('default value', done => {
     vm = createVue({
       template: `

test/unit/specs/tooltip.spec.js

@@ -15,6 +15,15 @@ describe('Tooltip', () => {
     expect(vm.$el.querySelector('.el-tooltip__popper')).to.have.property('textContent', '提示文字');
   });
 
+  it('custom popper class', () => {
+    vm = createVue(`
+      <el-tooltip content="提示文字" popper-class="custom-popper">
+        <button>click</button>
+      </el-tooltip>`);
+
+    expect(vm.$el.querySelector('.el-tooltip__popper').classList.contains('custom-popper')).to.true;
+  });
+
   describe('manual', () => {
     const vm = createVue({
       template: `