diff --git a/examples/docs/en-US/date-picker.md b/examples/docs/en-US/date-picker.md index d7dc4545c..3c2eeed8a 100644 --- a/examples/docs/en-US/date-picker.md +++ b/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 diff --git a/examples/docs/en-US/datetime-picker.md b/examples/docs/en-US/datetime-picker.md index f2d4e675d..dbd481c48 100644 --- a/examples/docs/en-US/datetime-picker.md +++ b/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 diff --git a/examples/docs/en-US/select.md b/examples/docs/en-US/select.md index 5ea61c3d2..96534724a 100644 --- a/examples/docs/en-US/select.md +++ b/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 | diff --git a/examples/docs/en-US/time-picker.md b/examples/docs/en-US/time-picker.md index e08906329..b73cd083d 100644 --- a/examples/docs/en-US/time-picker.md +++ b/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 diff --git a/examples/docs/en-US/tooltip.md b/examples/docs/en-US/tooltip.md index 1463e2ce4..d1caf16bd 100644 --- a/examples/docs/en-US/tooltip.md +++ b/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 | — | — | diff --git a/examples/docs/zh-CN/date-picker.md b/examples/docs/zh-CN/date-picker.md index 31490b60b..287eff225 100644 --- a/examples/docs/zh-CN/date-picker.md +++ b/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 diff --git a/examples/docs/zh-CN/datetime-picker.md b/examples/docs/zh-CN/datetime-picker.md index 642bc89fa..52adf6457 100644 --- a/examples/docs/zh-CN/datetime-picker.md +++ b/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 diff --git a/examples/docs/zh-CN/select.md b/examples/docs/zh-CN/select.md index dd0e65b26..7e296d814 100644 --- a/examples/docs/zh-CN/select.md +++ b/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 | 事件名称 | 说明 | 回调参数 | diff --git a/examples/docs/zh-CN/time-picker.md b/examples/docs/zh-CN/time-picker.md index 363ed06f3..2cf364f91 100644 --- a/examples/docs/zh-CN/time-picker.md +++ b/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 diff --git a/examples/docs/zh-CN/tooltip.md b/examples/docs/zh-CN/tooltip.md index acbf78dac..3716be6a9 100644 --- a/examples/docs/zh-CN/tooltip.md +++ b/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 | - | -| diff --git a/packages/date-picker/src/panel/date-range.vue b/packages/date-picker/src/panel/date-range.vue index e23ad662d..05487771e 100644 --- a/packages/date-picker/src/panel/date-range.vue +++ b/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]">
@@ -215,6 +215,7 @@ data() { return { + popperClass: '', minPickerWidth: 0, maxPickerWidth: 0, date: new Date(), diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue index 4e6a796fb..0eaa0a4a3 100644 --- a/packages/date-picker/src/panel/date.vue +++ b/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]">
@@ -367,6 +367,7 @@ data() { return { + popperClass: '', pickerWidth: 0, date: new Date(), value: '', diff --git a/packages/date-picker/src/panel/time-range.vue b/packages/date-picker/src/panel/time-range.vue index 4d9594ab6..53761b659 100644 --- a/packages/date-picker/src/panel/time-range.vue +++ b/packages/date-picker/src/panel/time-range.vue @@ -6,7 +6,8 @@
+ class="el-time-range-picker el-picker-panel" + :class="popperClass">
{{ t('el.datepicker.startTime') }}
@@ -97,6 +98,7 @@ const time = clacTime(this.$options.defaultValue); return { + popperClass: '', minTime: time.minTime, maxTime: time.maxTime, btnDisabled: isDisabled(time.minTime, time.maxTime), diff --git a/packages/date-picker/src/panel/time-select.vue b/packages/date-picker/src/panel/time-select.vue index 4179a1bec..d9cdc39a6 100644 --- a/packages/date-picker/src/panel/time-select.vue +++ b/packages/date-picker/src/panel/time-select.vue @@ -3,7 +3,8 @@
+ class="el-picker-panel time-select" + :class="popperClass">
+ class="el-time-panel" + :class="popperClass">
@@ -42,6 +42,12 @@ }; }, + computed: { + popperClass() { + return this.$parent.popperClass; + } + }, + watch: { '$parent.inputWidth'() { this.minWidth = this.$parent.$el.getBoundingClientRect().width + 'px'; diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue index f972bf59c..0bc0ed3eb 100644 --- a/packages/select/src/select.vue +++ b/packages/select/src/select.vue @@ -162,6 +162,7 @@ filterable: Boolean, allowCreate: Boolean, loading: Boolean, + popperClass: String, remote: Boolean, loadingText: String, noMatchText: String, diff --git a/packages/tooltip/src/main.vue b/packages/tooltip/src/main.vue index 6774d9d13..74f20b3b3 100644 --- a/packages/tooltip/src/main.vue +++ b/packages/tooltip/src/main.vue @@ -10,7 +10,7 @@
@@ -38,6 +38,7 @@ export default { type: String, default: 'dark' }, + popperClass: String, content: String, visibleArrow: { default: true diff --git a/test/unit/specs/select.spec.js b/test/unit/specs/select.spec.js index 7bf2633e9..b0a72ba0d 100644 --- a/test/unit/specs/select.spec.js +++ b/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: ` diff --git a/test/unit/specs/tooltip.spec.js b/test/unit/specs/tooltip.spec.js index f9e0ef276..a56058655 100644 --- a/test/unit/specs/tooltip.spec.js +++ b/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(` + + + `); + + expect(vm.$el.querySelector('.el-tooltip__popper').classList.contains('custom-popper')).to.true; + }); + describe('manual', () => { const vm = createVue({ template: `