mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-18 10:59:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix DateRangePicker custom style & class bug (#5300)

Browse Source
This commit is contained in:
0song 2022-01-11 14:27:45 +08:00 committed by GitHub
parent a2cfb64028
commit 2606778d30
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/components/date-picker/__tests__/date-picker.spec.ts
View File

@ -842,16 +842,21 @@ describe('DatePicker keyboard events', () => {
}) })
describe('DateRangePicker', () => { describe('DateRangePicker', () => {
it('create', async () => { it('create & custom class & style', async () => {
let calendarChangeValue = null let calendarChangeValue = null
const changeHandler = jest.fn() const changeHandler = jest.fn()
const popperClassName = 'popper-class-test'
const customClassName = 'custom-class-test'
const wrapper = _mount( const wrapper = _mount(
`<el-date-picker `<el-date-picker
type='daterange' type='daterange'
v-model="value" v-model="value"
@CalendarChange="onCalendarChange" @calendarChange="onCalendarChange"
/>`, :style="{color:'red'}"
() => ({ value: '' }), :class="customClassName"
:popperClass="popperClassName"
/>`,
() => ({ value: '', popperClassName, customClassName }),
{ {
methods: { methods: {
onCalendarChange(e) { onCalendarChange(e) {
@ -866,6 +871,9 @@ describe('DateRangePicker', () => {
inputs[0].trigger('focus') inputs[0].trigger('focus')
await nextTick() await nextTick()
const outterInput = wrapper.find('.el-range-editor.el-input__inner')
expect(outterInput.classes()).toContain(customClassName)
expect(outterInput.attributes().style).toBeDefined()
const panels = document.querySelectorAll('.el-date-range-picker__content') const panels = document.querySelectorAll('.el-date-range-picker__content')
expect(panels.length).toBe(2) expect(panels.length).toBe(2)
;(panels[0].querySelector('td.available') as HTMLElement).click() ;(panels[0].querySelector('td.available') as HTMLElement).click()
@ -875,6 +883,12 @@ describe('DateRangePicker', () => {
inputs[0].trigger('blur') inputs[0].trigger('blur')
inputs[0].trigger('focus') inputs[0].trigger('focus')
await nextTick() await nextTick()
// popperClassName
expect(
document
.querySelector('.el-picker__popper')
.classList.contains(popperClassName)
).toBe(true)
// correct highlight // correct highlight
const startDate = document.querySelectorAll('.start-date') const startDate = document.querySelectorAll('.start-date')
const endDate = document.querySelectorAll('.end-date') const endDate = document.querySelectorAll('.end-date')

2
packages/components/time-picker/src/common/picker.vue
View File

@ -68,7 +68,9 @@
pickerSize ? `el-range-editor--${pickerSize}` : '', pickerSize ? `el-range-editor--${pickerSize}` : '',
pickerDisabled ? 'is-disabled' : '', pickerDisabled ? 'is-disabled' : '',
pickerVisible ? 'is-active' : '', pickerVisible ? 'is-active' : '',
$attrs.class || undefined,
]" ]"
:style="$attrs.style || undefined"
@click="handleFocus" @click="handleFocus"
@mouseenter="onMouseEnter" @mouseenter="onMouseEnter"
@mouseleave="onMouseLeave" @mouseleave="onMouseLeave"