mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-12-02 12:18:46 +08:00
add popper-class for DatePicker, Select and Tooltip (#1806)
This commit is contained in:
杨奕
baiyaaaaa
parent
b158e124da
commit
f14628254a
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 |
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 | — | — |
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -642,6 +642,7 @@
|
||||
| loading-text | 远程加载时显示的文字 | string | — | 加载中 |
|
||||
| no-match-text | 搜索条件无匹配时显示的文字 | string | — | 无匹配数据 |
|
||||
| no-data-text | 选项为空时显示的文字 | string | — | 无数据 |
|
||||
| popper-class | Select 下拉框的类名 | string | — | — |
|
||||
|
||||
### Select Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 | - | -|
|
||||
|
||||
@ -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(),
|
||||
|
||||
@ -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: '',
|
||||
|
||||
@ -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),
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<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';
|
||||
|
||||
@ -162,6 +162,7 @@
|
||||
filterable: Boolean,
|
||||
allowCreate: Boolean,
|
||||
loading: Boolean,
|
||||
popperClass: String,
|
||||
remote: Boolean,
|
||||
loadingText: String,
|
||||
noMatchText: String,
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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: `
|
||||
|
||||
@ -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: `
|
||||
|
||||
Loading…
Reference in New Issue
Block a user