:::demo Set `value` to specify the currently displayed month. If `value` is not specified, current month is displayed. `value` supports two-way binding.
:::demo Configure el valor para especificar el mes que se muestra actualmente. Si no se especifica el valor, se muestra el mes actual. el valor soporta la vinculación bidireccional.
```html
<el-calendarv-model="value">
</el-calendar>
...
...
@@ -21,9 +21,10 @@ Display date.
```
:::
### Custom Content
### Contenido personalizado
:::demo Personalice lo que se muestra en la celda del calendario configurando el `scoped-slot` llamada `dateCell`. En la ranura de alcance se puede obtener la fecha (la fecha de la celda actual), los datos (incluyendo el tipo, isSelected, el atributo day). Para obtener más información, consulte la documentación de la API a continuación.
:::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>
<!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->
...
...
@@ -43,23 +44,23 @@ Display date.
```
:::
### Range
### Rango
:::demo Set the `range` attribute to specify the display range of the calendar. Start time must be Monday, end time must be Sunday, and the time span cannot exceed two months.
:::demo Defina el atributo `range` para especificar el rango de visualización del calendario. El tiempo de inicio debe ser el lunes, el tiempo de finalización debe ser el domingo y el período no puede exceder los dos meses.
| value / v-model | binding value | Date/string/number | — | — |
| range | time range, including start time and end time. Start time must be Monday, end time must be Sunday, the time span cannot exceed two months | Array | — | — |
| value / v-model | valor vinculante | Date/string/number | — | — |
| range | rango de tiempo, incluyendo el tiempo de inicio y el tiempo final. El tiempo de inicio debe ser el lunes, el tiempo final debe ser el domingo, el período no puede exceder los dos meses. | Array | — | — |
| 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 | — | — |
| 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 | — | — |
| — | content of Dropdown. Notice: Must be a valid html dom element (ex. `<span>, <button> etc.`) or `el-component`, to attach the trigger listener |
| dropdown | content of the Dropdown Menu, usually a `<el-dropdown-menu>` element |
| — | contenido del Dropdown. Aviso: Debe ser un elemento html dom válido (ej. `<span>, <button>` etc.) o `el-component`, para adjuntar el listener trigger |
| dropdown | contenido del menu Dropdown, normalmente es un elemento `<el-dropdown-menu>` |
Besides the native features of img, support lazy load, custom placeholder and load failure, etc.
Además de las características nativas de img, soporte de carga perezosa, marcador de posición personalizado y fallo de carga, etc.
### Basic Usage
### Uso básico
:::demo Indica cómo se debe cambiar el tamaño de la imagen para que se ajuste a su contenedor por ajuste, igual que el ajuste de objeto nativo. [object-fit](https://developer.mozilla.org/es/docs/Web/CSS/object-fit)。
:::demo Indicate how the image should be resized to fit its container by `fit`, same as native [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)。
```html
<divclass="demo-image">
<divclass="block"v-for="fit in fits":key="fit">
...
...
@@ -30,7 +31,7 @@ Besides the native features of img, support lazy load, custom placeholder and lo
:::demo Personalice el placeholder del contenido mientras la imagen aun no ha sido cargada vía`slot = placeholder`
```html
<divclass="demo-image__placeholder">
<divclass="block">
...
...
@@ -59,9 +60,9 @@ Besides the native features of img, support lazy load, custom placeholder and lo
```
:::
### Load Failed
### Fallo de carga
:::demo Custom failed content when error occurs to image load by`slot = error`
:::demo Personalice el contenido cuando ocurra algun error al cargar la imagen via`slot = error`
```html
<divclass="demo-image__error">
<divclass="block">
...
...
@@ -82,7 +83,8 @@ Besides the native features of img, support lazy load, custom placeholder and lo
### Lazy Load
:::demo Use lazy load by `lazy = true`. Image will load until scroll into view when set. You can indicate scroll container that adds scroll listener to by `scroll-container`. If undefined, will be the nearest parent container whose overflow property is auto or scroll.
:::demo Use lazy load vía `lazy = true`. La imagen se cargará hasta que se desplace a la vista cuando esté configurada. Puede indicar el contenedor de scroll que añade el oyente de scroll vía `scroll-container`. Si no está definido, será el contenedor padre más cercano cuya propiedad overflow es auto o scroll.
```html
<divclass="demo-image__lazy">
<el-imagev-for="url in urls":key="url":src="url"lazy></el-image>
...
...
@@ -108,25 +110,25 @@ Besides the native features of img, support lazy load, custom placeholder and lo
| src | Image source, same as native | string | — | - |
| fit | Indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | fill / contain / cover / none / scale-down | — | - |
| alt | Native alt | string | - | - |
| lazy | Whether to use lazy load | boolean | — | false |
| scroll-container | The container to add scroll listener when using lazy load | string / HTMLElement | — | The nearest parent container whose overflow property is auto or scroll |
### Events
| Event Name | Description | Parameters |
| src | origen de la imagen, igual que en nativo | string | — | - |
| fit | Indica como la imagen debe adaptarse al contenendor, lo mismo que [object-fit](https://developer.mozilla.org/es/docs/Web/CSS/object-fit) | fill / contain / cover / none / scale-down | — | - |
| alt | alt nativo | string | - | - |
| lazy | si se usara lazy load | boolean | — | false |
| scroll-container | El contenedor para añadir el scroll listener cuando se utiliza lazy load | string / HTMLElement | — | El contenedor padre más cercano cuya propiedad de desbordamiento es auto o scroll |
### Eventos
| Nombre del evento | Descripción | Parámetros |
|---------- |-------- |---------- |
| load | Same as native load | (e: Event) |
| error | Same as native error | (e: Error) |
| load | Igual que el load nativo | (e: Event) |
| error | Igual que el error nativo | (e: Error) |
### Slots
| Slot Name | Description |
| Nombre del slot | Descripción |
|---------|-------------|
| placeholder | Triggers when image load |
| error | Triggers when image load failed |
| placeholder | Se activa cuando la imagen se carga |
| error | Se activa cuando la carga de la imagen falla |
:::demo Make the Input clearable with the `clearable` attribute.
:::demo Marque que el input puede ser limpiable con el atributo `clearable`.
```html
<el-input
...
...
@@ -535,9 +535,9 @@ Búsqueda de datos desde el servidor.
:::
### Limit length
### Limitar el tamaño
:::demo `maxlength`and `minlength` are attributes of native input, they declare a limit on the number of characters a user can input. The "number of characters" is measured using JavaScript string length.Setting the `maxlength` prop for a text or textarea type of Input can limit the length of input value, allows you to show word count by setting `show-word-limit` to `true` at the same time.
:::demo `maxlength`y `minlength` son atributos de la entrada nativa, declaran un límite en el número de caracteres que un usuario puede introducir. La configuración de la pro `maxlength` para un tipo de entrada de texto o de área de texto puede limitar la longitud del valor de entrada y le permite mostrar el recuento de palabras al establecer `show-word-limit` a `true` al mismo tiempo.
```html
<el-input
...
...
@@ -579,7 +579,7 @@ export default {
| value / v-model | valor enlazado | boolean / string / number | — | — |
| maxlength | igual que `maxlength` en el input nativo | number | — | — |
| minlength | igual que `minlength` en el input nativo | number | — | — |
| show-word-limit | whether show word count，only works when `type` is 'text' or 'textarea' | boolean | — | false |
| show-word-limit | Si se muesta el contador de palabras, solamente funciona con los tipos 'text' o 'textarea' | boolean | — | false |
@@ -63,7 +63,7 @@ Usa texto para indicar la puntuación
Puede utilizar iconos para diferenciar cada componente.
:::demo You can customize icons by passing `icon-classes` an array with three elements or a object which key is the threshold between two levels and value is the corresponding icon class. En este ejemplo también usamos `void-icon-class` para asignar un icono si no está seleccionado.
:::demo Puede personalizar los iconos pasando `icon-classes` un array con tres elementos o un objeto cuya clave es el umbral entre dos niveles y cuyo valor es la clase de icono correspondiente. En este ejemplo también usamos `void-icon-class` para asignar un icono si no está seleccionado.
```html
<el-rate
...
...
@@ -125,7 +125,7 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e
| colors | colors for icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding color | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
| void-color | color para iconos no seleccionados | string | — | #C6D1DE |
| disabled-void-color | color para las iconos no seleccionados de solo lectura | string | — | #EFF2F7 |
| icon-classes | class names of icons. If array, ot should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding icon class | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
| icon-classes | nombres de clase de los iconos. Si es array, debe tener 3 elementos, cada uno de los cuales corresponde a un nivel de puntuación, en caso contrario, si es objeto, la clave debe ser el valor umbral entre dos niveles, y el valor debe ser la clase de icono correspondiente. | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
| void-icon-class | nombre de clase para iconos no seleccionados | string | — | el-icon-star-off |
| disabled-void-icon-class | nombre de clase para elementos no seleccionados de solo lectura | string | — | el-icon-star-on |
| debounce | retardo al escribir, en milisegundos, funciona cuando`show-input` es true. | number | — | 300 |
| tooltip-class | nombre personalizado de clase para el tooltip | string | — | — |
| marks | marks， type of key must be `number` and must in closed interval `[min, max]`, each mark can custom style| object | — | — |
| marks | marcas, tipo de clave debe ser `number` y debe estar en intervalo cerrado [min, max], cada marca puede tener estilo personalizado | object | — | — |
