mirror of
https://github.com/element-plus/element-plus.git
synced 2025-02-05 11:21:11 +08:00
docs: [el-calendar] add header slot (#3323)
This commit is contained in:
啝裳
GitHub
parent
ee0cc94249
commit
f6833e8846
@ -72,6 +72,46 @@ Display date.
|
||||
|
||||
:::
|
||||
|
||||
### Custom head
|
||||
|
||||
:::demo by setting the name `header` of `scoped-slot` Customize the content displayed in the calendar header. exist `scoped-slot` You can get date (the date of the current cell). For details, please refer to the API documentation below.
|
||||
|
||||
```html
|
||||
<el-calendar ref="calendar">
|
||||
<template #header="{date}">
|
||||
<span>Custom header content</span>
|
||||
<span>{{ date }}</span>
|
||||
<el-button-group>
|
||||
<el-button size="mini" @click="selectDate('prev-year')"
|
||||
>Previous Year</el-button
|
||||
>
|
||||
<el-button size="mini" @click="selectDate('prev-month')"
|
||||
>Previous Month</el-button
|
||||
>
|
||||
<el-button size="mini" @click="selectDate('today')">Today</el-button>
|
||||
<el-button size="mini" @click="selectDate('next-month')"
|
||||
>Next Month</el-button
|
||||
>
|
||||
<el-button size="mini" @click="selectDate('next-year')"
|
||||
>Next Year</el-button
|
||||
>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-calendar>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
selectDate(value) {
|
||||
this.$refs.calendar.selectDate(value)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Localization
|
||||
|
||||
The default locale of is English, if you need to use other languages, please check [Internationalization](#/en-US/component/i18n)
|
||||
@ -90,3 +130,9 @@ Note, date time locale (month name, first day of the week ...) are also configed
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | --------------- | ------- |
|
||||
| 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 | — | — |
|
||||
|
||||
### Methods
|
||||
|
||||
| Event Name | Description | Attribute |
|
||||
| ---------- | ----------- | ------------------------------------------------------- |
|
||||
| selectDate | Switch date | today / prev-month / next-month / prev-year / next-year |
|
||||
|
||||
@ -72,6 +72,46 @@ Muestra fechas.
|
||||
|
||||
:::
|
||||
|
||||
### Cabeza personalizada
|
||||
|
||||
:::demostración configurando el nombre `header` de `scoped-slot` Personaliza el contenido que se muestra en el encabezado del calendario. existe `scoped-slot` Puede obtener la fecha (la fecha de la celda actual). Para obtener más información, consulte la documentación de la API a continuación.
|
||||
|
||||
```html
|
||||
<el-calendar ref="calendar">
|
||||
<template #header="{date}">
|
||||
<span>Contenido de encabezado personalizado</span>
|
||||
<span>{{ date }}</span>
|
||||
<el-button-group>
|
||||
<el-button size="mini" @click="selectDate('prev-year')"
|
||||
>el año pasado</el-button
|
||||
>
|
||||
<el-button size="mini" @click="selectDate('prev-month')"
|
||||
>el mes pasado</el-button
|
||||
>
|
||||
<el-button size="mini" @click="selectDate('today')">Hoy en día</el-button>
|
||||
<el-button size="mini" @click="selectDate('next-month')"
|
||||
>próximo mes</el-button
|
||||
>
|
||||
<el-button size="mini" @click="selectDate('next-year')"
|
||||
>el próximo año</el-button
|
||||
>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-calendar>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
selectDate(value) {
|
||||
this.$refs.calendar.selectDate(value)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Localization
|
||||
|
||||
The default locale of is English, if you need to use other languages, please check [Internationalization](#/es/component/i18n)
|
||||
@ -90,3 +130,9 @@ Note, date time locale (month name, first day of the week ...) are also configed
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ----------------- | ----------- |
|
||||
| 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 | — | — |
|
||||
|
||||
### Methods
|
||||
|
||||
| Event Name | Description | Attribute |
|
||||
| ---------- | ------------- | ------------------------------------------------------- |
|
||||
| selectDate | Cambiar fecha | today / prev-month / next-month / prev-year / next-year |
|
||||
|
||||
@ -72,6 +72,48 @@ Affiche un calendrier.
|
||||
|
||||
:::
|
||||
|
||||
### Tête personnalisée
|
||||
|
||||
:::demo Intervalle en définissant le nom `header` de `scoped-slot` Personnalisez le contenu affiché dans l'en-tête du calendrier. exister `scoped-slot` Vous pouvez obtenir la date (la date de la cellule actuelle). Pour plus de détails, veuillez vous référer à la documentation de l'API ci-dessous.
|
||||
|
||||
```html
|
||||
<el-calendar ref="calendar">
|
||||
<template #header="{date}">
|
||||
<span>Contenu d'en-tête personnalisé</span>
|
||||
<span>{{ date }}</span>
|
||||
<el-button-group>
|
||||
<el-button size="mini" @click="selectDate('prev-year')"
|
||||
>l'année dernière</el-button
|
||||
>
|
||||
<el-button size="mini" @click="selectDate('prev-month')"
|
||||
>le mois dernier</el-button
|
||||
>
|
||||
<el-button size="mini" @click="selectDate('today')"
|
||||
>De nos jours</el-button
|
||||
>
|
||||
<el-button size="mini" @click="selectDate('next-month')"
|
||||
>le mois prochain</el-button
|
||||
>
|
||||
<el-button size="mini" @click="selectDate('next-year')"
|
||||
>L'année prochaine</el-button
|
||||
>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-calendar>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
selectDate(value) {
|
||||
this.$refs.calendar.selectDate(value)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Localization
|
||||
|
||||
The default locale of is English, if you need to use other languages, please check [Internationalization](#/fr-FR/component/i18n)
|
||||
@ -90,3 +132,9 @@ Note, date time locale (month name, first day of the week ...) are also configed
|
||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ | ----------------- | ------ |
|
||||
| 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 | — | — |
|
||||
|
||||
### Methods
|
||||
|
||||
| Event Name | Description | Attribute |
|
||||
| ---------- | --------------- | ------------------------------------------------------- |
|
||||
| selectDate | Changer de date | today / prev-month / next-month / prev-year / next-year |
|
||||
|
||||
@ -71,6 +71,38 @@
|
||||
|
||||
:::
|
||||
|
||||
### カスタムヘッド
|
||||
|
||||
:::demo という名前を設定することで `header` に `scoped-slot` カレンダーヘッダーに表示されるコンテンツをカスタマイズします。 存在 `scoped-slot` 日付（現在のセルの日付）を取得できます。 詳細については、以下の API ドキュメントを参照してください。
|
||||
|
||||
```html
|
||||
<el-calendar ref="calendar">
|
||||
<template #header="{date}">
|
||||
<span>カスタムヘッダーコンテンツ</span>
|
||||
<span>{{ date }}</span>
|
||||
<el-button-group>
|
||||
<el-button size="mini" @click="selectDate('prev-year')">上一年</el-button>
|
||||
<el-button size="mini" @click="selectDate('prev-month')">先月</el-button>
|
||||
<el-button size="mini" @click="selectDate('today')">現在</el-button>
|
||||
<el-button size="mini" @click="selectDate('next-month')">来月</el-button>
|
||||
<el-button size="mini" @click="selectDate('next-year')">来年</el-button>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-calendar>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
selectDate(value) {
|
||||
this.$refs.calendar.selectDate(value)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Localization
|
||||
|
||||
The default locale of is English, if you need to use other languages, please check [Internationalization](#/jp/component/i18n)
|
||||
@ -90,3 +122,9 @@ Note, date time locale (month name, first day of the week ...) are also configed
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | --------------- | ------- |
|
||||
| data | { type, isSelected, day, date }. `type` は日付が属する月を示し、オプションの値は前月、現在の月、次の月です。`isSelected` は日付が選択されているかどうかを示す。`day`は yyyy-MM-dd 形式でフォーマットされた日付です。`date` はセルが表す日付 | Object | — | — |
|
||||
|
||||
### メソッド
|
||||
|
||||
| Event Name | Description | Attribute |
|
||||
| ---------- | -------------- | ------------------------------------------------------- |
|
||||
| selectDate | 日付の切り替え | today / prev-month / next-month / prev-year / next-year |
|
||||
|
||||
@ -72,6 +72,42 @@
|
||||
|
||||
:::
|
||||
|
||||
### 自定义头部
|
||||
|
||||
:::demo 通过设置名为 `header` 的 `scoped-slot` 来自定义日历头部显示的内容。在 `scoped-slot` 可以获取到 date（当前单元格的日期）。详情解释参考下方的 API 文档。
|
||||
|
||||
```html
|
||||
<el-calendar ref="calendar">
|
||||
<template #header="{date}">
|
||||
<span>自定义头部内容</span>
|
||||
<span>{{ date }}</span>
|
||||
<el-button-group>
|
||||
<el-button size="mini" @click="selectDate('prev-year')">上一年</el-button>
|
||||
<el-button size="mini" @click="selectDate('prev-month')"
|
||||
>上个月</el-button
|
||||
>
|
||||
<el-button size="mini" @click="selectDate('today')">今天</el-button>
|
||||
<el-button size="mini" @click="selectDate('next-month')"
|
||||
>下个月</el-button
|
||||
>
|
||||
<el-button size="mini" @click="selectDate('next-year')">下一年</el-button>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-calendar>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
selectDate(value) {
|
||||
this.$refs.calendar.selectDate(value)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 国际化
|
||||
|
||||
默认语言是英语 (English), 如需使用其他语言, 请参考 [国际化](#/zh-CN/component/i18n)
|
||||
@ -90,3 +126,9 @@
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ---- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------ | ------ |
|
||||
| data | { type, isSelected, day, date }，`type` 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；`isSelected` 标明该日期是否被选中；`day` 是格式化的日期，格式为 yyyy-MM-dd；`date` 是单元格的日期 | Object | — | — |
|
||||
|
||||
### Methods
|
||||
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ---------- | -------- | ------------------------------------------------------- |
|
||||
| selectDate | 切换日期 | today / prev-month / next-month / prev-year / next-year |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user