mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-04 20:27:44 +08:00
fix(docs): fix calendar doc params (#911)
This commit is contained in:
kooriookami
GitHub
parent
33cf09ad24
commit
709ec69c12
@ -92,7 +92,7 @@ export default defineComponent({
|
||||
})
|
||||
}
|
||||
|
||||
const getFormateDate = (day, type): Dayjs => {
|
||||
const getFormattedDate = (day, type): Dayjs => {
|
||||
let result
|
||||
if (type === 'prev') {
|
||||
result = props.date.startOf('month').subtract(1, 'month').date(day)
|
||||
@ -107,7 +107,7 @@ export default defineComponent({
|
||||
const getCellClass = ({ text, type }) => {
|
||||
const classes = [type]
|
||||
if (type === 'current') {
|
||||
const date_ = getFormateDate(text, type)
|
||||
const date_ = getFormattedDate(text, type)
|
||||
if (date_.isSame(props.selectedDay, 'day')) {
|
||||
classes.push('is-selected')
|
||||
}
|
||||
@ -119,12 +119,12 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
const pickDay = ({ text, type }) => {
|
||||
const date = getFormateDate(text, type)
|
||||
const date = getFormattedDate(text, type)
|
||||
ctx.emit('pick', date)
|
||||
}
|
||||
|
||||
const getSlotData = ({ text, type }) => {
|
||||
const day = getFormateDate(text, type)
|
||||
const day = getFormattedDate(text, type)
|
||||
return {
|
||||
isSelected: day.isSame(props.selectedDay),
|
||||
type: `${type}-month`,
|
||||
|
||||
@ -26,9 +26,7 @@ Display date.
|
||||
:::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.
|
||||
```html
|
||||
<el-calendar>
|
||||
<template
|
||||
#dateCell="{data}"
|
||||
>
|
||||
<template #dateCell="{data}">
|
||||
<p :class="data.isSelected ? 'is-selected' : ''">
|
||||
{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
|
||||
</p>
|
||||
@ -60,5 +58,4 @@ Display date.
|
||||
### dateCell scoped slot 参数
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|-----------------|-------------- |---------- |---------------------- |--------- |
|
||||
| date | date the cell represents | Date | — | — |
|
||||
| data | { type, isSelected, day}. `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 | Object | — | — |
|
||||
| data | { 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 | Object | — | — |
|
||||
|
||||
@ -27,9 +27,7 @@ Muestra fechas.
|
||||
|
||||
```html
|
||||
<el-calendar>
|
||||
<template
|
||||
#dateCell="{data}"
|
||||
>
|
||||
<template #dateCell="{data}">
|
||||
<p :class="data.isSelected ? 'is-selected' : ''">
|
||||
{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
|
||||
</p>
|
||||
@ -61,6 +59,5 @@ Muestra fechas.
|
||||
### dateCell scoped slot
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
|-----------------|-------------- |---------- |---------------------- |--------- |
|
||||
| date | fecha que la celda representa | Date | — | — |
|
||||
| data | { type, isSelected, day}. `type` indica el mes al que pertenece la fecha, los valores opcionales son mes anterior, mes actual, mes siguiente; `isSelected` indica si la fecha está seleccionada; `day` es la fecha formateada en el formato yyyy-MM-dd | Object | — | — |
|
||||
| data | { type, isSelected, day, date}. `type` indica el mes al que pertenece la fecha, los valores opcionales son mes anterior, mes actual, mes siguiente; `isSelected` indica si la fecha está seleccionada; `day` es la fecha formateada en el formato yyyy-MM-dd; `date` es la fecha que la celda representa | Object | — | — |
|
||||
|
||||
|
||||
@ -26,9 +26,7 @@ Affiche un calendrier.
|
||||
:::demo Personnalisez le contenu du calendrier en utilisant le `scoped-slot` appelé `dateCell`. Dans ce `scoped-slot` vous aurez accès au paramètres date (date de la cellule courante), data (incluant les attributs type, isSelected et day). Pour plus d'informations, référez-vous à la documentation ci-dessous.
|
||||
```html
|
||||
<el-calendar>
|
||||
<template
|
||||
#dateCell="{data}"
|
||||
>
|
||||
<template #dateCell="{data}">
|
||||
<p :class="data.isSelected ? 'is-selected' : ''">
|
||||
{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
|
||||
</p>
|
||||
@ -62,5 +60,4 @@ Affiche un calendrier.
|
||||
|
||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||
|-----------------|-------------- |---------- |---------------------- |--------- |
|
||||
| date | Date de la cellule courante. | Date | — | — |
|
||||
| data | { type, isSelected, day }. `type` indique le mois de la date courante, les valeurs prev-month, current-month et next-month pouvant être utilisées; `isSelected` indique si la date est sélectionnée; `day` est la date formattée en yyyy-MM-dd. | Object | — | — |
|
||||
| data | { type, isSelected, day, date }. `type` indique le mois de la date courante, les valeurs prev-month, current-month et next-month pouvant être utilisées; `isSelected` indique si la date est sélectionnée; `day` est la date formattée en yyyy-MM-dd; `date` est la date de la cellule courante. | Object | — | — |
|
||||
|
||||
@ -26,9 +26,7 @@
|
||||
:::demo `scoped-slot` に `dateCell` という名前を設定することで、calendarセルに表示する内容をカスタマイズすることができる。`scoped-slot`では、日付(現在のセルの日付)とデータ(type, isSelected, day属性を含む)を取得することができます。詳細は以下のAPIドキュメントを参照のこと。
|
||||
```html
|
||||
<el-calendar>
|
||||
<template
|
||||
#dateCell="{data}"
|
||||
>
|
||||
<template #dateCell="{data}">
|
||||
<p :class="data.isSelected ? 'is-selected' : ''">
|
||||
{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
|
||||
</p>
|
||||
@ -61,5 +59,4 @@
|
||||
### デートセルスコープスロット
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|-----------------|-------------- |---------- |---------------------- |--------- |
|
||||
| date | セルが表す日付 | Date | — | — |
|
||||
| data | {type, isSelected, day}. `type` は日付が属する月を示し、オプションの値は前月、現在の月、次の月です。`isSelected` は日付が選択されているかどうかを示す。`day`はyyyy-MM-dd形式でフォーマットされた日付です。 | Object | — | — |
|
||||
| data | { type, isSelected, day, date }. `type` は日付が属する月を示し、オプションの値は前月、現在の月、次の月です。`isSelected` は日付が選択されているかどうかを示す。`day`はyyyy-MM-dd形式でフォーマットされた日付です。`date` はセルが表す日付 | Object | — | — |
|
||||
|
||||
@ -26,9 +26,7 @@
|
||||
:::demo 通过设置名为 `dateCell` 的 `scoped-slot` 来自定义日历单元格中显示的内容。在 `scoped-slot` 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。详情解释参考下方的 API 文档。
|
||||
```html
|
||||
<el-calendar>
|
||||
<template
|
||||
#dateCell="{data}"
|
||||
>
|
||||
<template #dateCell="{data}">
|
||||
<p :class="data.isSelected ? 'is-selected' : ''">
|
||||
{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
|
||||
</p>
|
||||
@ -60,5 +58,4 @@
|
||||
### dateCell scoped slot 参数
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|-----------------|-------------- |---------- |------------ |-------- |
|
||||
| date | 单元格代表的日期 | Date | — | — |
|
||||
| data | { type, isSelected, day}，`type` 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；`isSelected` 标明该日期是否被选中；`day` 是格式化的日期，格式为 yyyy-MM-dd | Object | — | — |
|
||||
| data | { type, isSelected, day, date }，`type` 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；`isSelected` 标明该日期是否被选中；`day` 是格式化的日期，格式为 yyyy-MM-dd；`date` 是单元格的日期 | Object | — | — |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user