mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-02 03:08:21 +08:00
refactor(components): [calendar] rename slot dateCell to date-cell (#9590)
* refactor(components): [calendar] rename slot dateCell to date-cell closed 9565 * docs: update * fix(components): [calendar] avoid slots taking effect at the same time
This commit is contained in:
qiang
GitHub
parent
86538e441d
commit
1e6dbd8558
@ -17,7 +17,7 @@ calendar/basic
|
||||
|
||||
## Custom Content
|
||||
|
||||
:::demo Customize what is displayed in the calendar cell by setting `scoped-slot` named `dateCell`. In `scoped-slot` you can get the date (the date of the current cell), data (including the type, isSelected, day attribute). For details, please refer to the API documentation below.
|
||||
:::demo Customize what is displayed in the calendar cell by setting `scoped-slot` named `date-cell`. In `scoped-slot` you can get the date (the date of the current cell), data (including the type, isSelected, day attribute). For details, please refer to the API documentation below.
|
||||
|
||||
calendar/customize
|
||||
|
||||
@ -54,6 +54,7 @@ Note, date time locale (month name, first day of the week ...) are also configur
|
||||
|
||||
## Slots
|
||||
|
||||
| Name | Description | Attribute |
|
||||
| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
|
||||
| dateCell | { type, isSelected, day, date }. `type` indicates which month the date belongs, optional values are prev-month, current-month, next-month; `isSelected` indicates whether the date is selected; `day` is the formatted date in the format YYYY-MM-DD; `date` is date the cell represents | data |
|
||||
| Name | Description | Attribute |
|
||||
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
|
||||
| date-cell | { type, isSelected, day, date }. `type` indicates which month the date belongs, optional values are prev-month, current-month, next-month; `isSelected` indicates whether the date is selected; `day` is the formatted date in the format YYYY-MM-DD; `date` is date the cell represents | data |
|
||||
| header | content of the Calendar header | — |
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<el-calendar>
|
||||
<template #dateCell="{ data }">
|
||||
<template #date-cell="{ data }">
|
||||
<p :class="data.isSelected ? 'is-selected' : ''">
|
||||
{{ data.day.split('-').slice(1).join('-') }}
|
||||
{{ data.isSelected ? '✔️' : '' }}
|
||||
|
||||
@ -4,19 +4,19 @@
|
||||
<span>Custom header content</span>
|
||||
<span>{{ date }}</span>
|
||||
<el-button-group>
|
||||
<el-button size="small" @click="selectDate('prev-year')"
|
||||
>Previous Year</el-button
|
||||
>
|
||||
<el-button size="small" @click="selectDate('prev-month')"
|
||||
>Previous Month</el-button
|
||||
>
|
||||
<el-button size="small" @click="selectDate('prev-year')">
|
||||
Previous Year
|
||||
</el-button>
|
||||
<el-button size="small" @click="selectDate('prev-month')">
|
||||
Previous Month
|
||||
</el-button>
|
||||
<el-button size="small" @click="selectDate('today')">Today</el-button>
|
||||
<el-button size="small" @click="selectDate('next-month')"
|
||||
>Next Month</el-button
|
||||
>
|
||||
<el-button size="small" @click="selectDate('next-year')"
|
||||
>Next Year</el-button
|
||||
>
|
||||
<el-button size="small" @click="selectDate('next-month')">
|
||||
Next Month
|
||||
</el-button>
|
||||
<el-button size="small" @click="selectDate('next-year')">
|
||||
Next Year
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-calendar>
|
||||
|
||||
@ -3,6 +3,8 @@ import { mount } from '@vue/test-utils'
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import Calendar from '../src/calendar.vue'
|
||||
|
||||
const AXIOM = 'Rem is the best girl'
|
||||
|
||||
describe('Calendar.vue', () => {
|
||||
it('create', async () => {
|
||||
const wrapper = mount({
|
||||
@ -181,4 +183,18 @@ describe('Calendar.vue', () => {
|
||||
expect(/2022.*January/.test(titleEl.element.innerHTML)).toBeTruthy()
|
||||
expect(cell?.classList.contains('is-selected')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('slots', async () => {
|
||||
const wrapper = mount(() => (
|
||||
<Calendar
|
||||
v-slots={{
|
||||
header: () => AXIOM,
|
||||
'date-cell': () => AXIOM,
|
||||
}}
|
||||
/>
|
||||
))
|
||||
|
||||
expect(wrapper.find('.el-calendar__header').text()).toEqual(AXIOM)
|
||||
expect(wrapper.find('.current.is-today').text()).toEqual(AXIOM)
|
||||
})
|
||||
})
|
||||
|
||||
@ -20,8 +20,12 @@
|
||||
</div>
|
||||
<div v-if="validatedRange.length === 0" :class="ns.e('body')">
|
||||
<date-table :date="date" :selected-day="realSelectedDay" @pick="pickDay">
|
||||
<template v-if="$slots.dateCell" #dateCell="data">
|
||||
<slot name="dateCell" v-bind="data" />
|
||||
<template
|
||||
v-if="$slots['date-cell'] || $slots.dateCell"
|
||||
#date-cell="data"
|
||||
>
|
||||
<slot v-if="$slots['date-cell']" name="date-cell" v-bind="data" />
|
||||
<slot v-else name="dateCell" v-bind="data" />
|
||||
</template>
|
||||
</date-table>
|
||||
</div>
|
||||
@ -35,8 +39,12 @@
|
||||
:hide-header="index !== 0"
|
||||
@pick="pickDay"
|
||||
>
|
||||
<template v-if="$slots.dateCell" #dateCell="data">
|
||||
<slot name="dateCell" v-bind="data" />
|
||||
<template
|
||||
v-if="$slots['date-cell'] || $slots.dateCell"
|
||||
#date-cell="data"
|
||||
>
|
||||
<slot v-if="$slots['date-cell']" name="date-cell" v-bind="data" />
|
||||
<slot v-else name="dateCell" v-bind="data" />
|
||||
</template>
|
||||
</date-table>
|
||||
</div>
|
||||
@ -44,10 +52,10 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { computed, ref, useSlots } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
import { ElButton, ElButtonGroup } from '@element-plus/components/button'
|
||||
import { useLocale, useNamespace } from '@element-plus/hooks'
|
||||
import { useDeprecated, useLocale, useNamespace } from '@element-plus/hooks'
|
||||
import { debugWarn } from '@element-plus/utils'
|
||||
import { INPUT_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
|
||||
import DateTable from './date-table.vue'
|
||||
@ -66,6 +74,7 @@ defineOptions({
|
||||
const props = defineProps(calendarProps)
|
||||
const emit = defineEmits(calendarEmits)
|
||||
|
||||
const solts = useSlots()
|
||||
const ns = useNamespace('calendar')
|
||||
const { t, lang } = useLocale()
|
||||
|
||||
@ -230,6 +239,18 @@ const selectDate = (type: CalendarDateType) => {
|
||||
pickDay(day)
|
||||
}
|
||||
|
||||
useDeprecated(
|
||||
{
|
||||
from: '"dateCell"',
|
||||
replacement: '"date-cell"',
|
||||
scope: 'ElCalendar',
|
||||
version: '2.3.0',
|
||||
ref: 'https://element-plus.org/en-US/component/calendar.html#slots',
|
||||
type: 'Slot',
|
||||
},
|
||||
computed(() => !!solts.dateCell)
|
||||
)
|
||||
|
||||
defineExpose({
|
||||
/** @description currently selected date */
|
||||
selectedDay: realSelectedDay,
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
@click="handlePickDay(cell)"
|
||||
>
|
||||
<div :class="nsDay.b()">
|
||||
<slot name="dateCell" :data="getSlotData(cell)">
|
||||
<slot name="date-cell" :data="getSlotData(cell)">
|
||||
<span>{{ cell.text }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user