mirror of https://github.com/ElemeFE/element
杨奕
GitHub
commit
f01ebad0b1
|
|
@ -0,0 +1,253 @@
|
|||
## Changelog
|
||||
|
||||
### 2.0.7
|
||||
|
||||
*2017-11-29*
|
||||
|
||||
- Solucionado el estilo disabled en el texto de button, #8570
|
||||
|
||||
### 2.0.6
|
||||
|
||||
*2017-11-29*
|
||||
|
||||
- Corregido error de estilo de los iconos de ordenación de Table, #8405
|
||||
- Corregido activacion para Popover cuando `trigger` es manual, #8467
|
||||
- Añadidos los atributos `prefix-icon` y `suffix-icon` para Autocomplete, #8446 (por @liyanlong)
|
||||
- Añadido el atributo `separator` para Cascader, #8501
|
||||
- Añadido atributo `clearable` para Input, #8509 (by @lbogdan)
|
||||
- Añadido atributo `background` para Pagination, #8553
|
||||
|
||||
### 2.0.5
|
||||
|
||||
*2017-11-17*
|
||||
|
||||
- Solucionado regresion en 2.0.4 de Popover, Tree, Breadcrumb and Cascader, #8188 #8217 #8283
|
||||
- Solucionado Fuga de memoria de la directiva clickoutside, #8168 #8225 (por @badpunman @STLighter)
|
||||
- Solucionada la altura en multiple Select cuando se borra su valor, #8317 (por @luciy)
|
||||
- Añadido el atributo `collapse-tags` para multiple Select para reemplazar las tags con una línea de texto, #8190
|
||||
- Solucionado el alto consumo de CPU causado por Table cuando esta oculta, #8351
|
||||
- Ahora puede usar el método `doLayout` de Table para actualizar su diseño, #8351
|
||||
|
||||
### 2.0.4
|
||||
|
||||
*2017-11-10*
|
||||
|
||||
- Accesibilidad mejorada para Cascader, Dropdown, Message, Notification, Popover, Tooltip y Tree
|
||||
- Arreglado el cambio de tamaño del Container cuando el ancho de la vista disminuye, #8042
|
||||
- Arreglado Tree's `updateKeyChildren` borraba incorrectamente los nodos hijos, #8100
|
||||
- Arreglado la altura de los bordes de CheckboxBotón's cuando esta anidado en un Form, #8100
|
||||
- Arreglado error de análisis de los Menu's para los colores personalizados, #8153 (by @zhouyixiang)
|
||||
|
||||
### 2.0.3
|
||||
|
||||
*2017-11-03*
|
||||
|
||||
- Solucionado atributos `editable` and `readonly` de DatePicker de los rangos, #7922
|
||||
- Corregido error de estilo de los Tabs anidados, #7941
|
||||
- Corregido error de estilo del último Step de Steps verticales, #7980
|
||||
- Corregido el tiempo de activación del evento `current-change` para Pagination, #7995
|
||||
- Corregido Tooltip no registrado en el Menu, #7995
|
||||
|
||||
### 2.0.2
|
||||
|
||||
*2017-10-31*
|
||||
|
||||
- Ahora haciendo clic con el botón derecho del ratón en los botones de InputNumber no cambiará su valor, #7817
|
||||
- El metodo `validate` de Form ahora puede esperar por validaciones asíncronas antes de ejecutar su devolución de llamada, #7774 (por @Allenice)
|
||||
- Corregido la selección de rango de DatePicker no funcionaba en los navegadores Chromium 53-57, #7838
|
||||
- Corregido la perdida de previsualización e iconos de eliminar de Upload cuando su `list-type` es picture-card, #7857
|
||||
- Añadido el atributo `sort-by` para TableColumn, #7828 (por @wangfengming)
|
||||
- Corregido que a veces DatePicker muestra un número de año incorrecto al seleccionar la primera semana en modo week, #7860 (por @hh23485)
|
||||
- Corregido error de estilo de icono de Step vertical, #7891
|
||||
- El área hot para las flechas de nodo en Tree se expandia, #7891
|
||||
|
||||
### 2.0.1
|
||||
|
||||
*2017-10-28*
|
||||
|
||||
- Fixed style error of RadioButton and CheckboxButton, #7793
|
||||
- Fixed TimePicker not respond to mouse scroll in some conditions, #7811
|
||||
- Fixed incomplete styles of some components when imported on demand, #7811
|
||||
- Corregido error de estilo de RadioButton y CheckboxButton, #7793
|
||||
- Corregido TimePicker no responde al desplazamiento del ratón en algunas condiciones, #7811
|
||||
- Corregido estilos incompletos de algunos componentes cuando se importan bajo demanda, #7811
|
||||
|
||||
### 2.0.0 Carbon
|
||||
|
||||
*2017-10-27*
|
||||
|
||||
#### New features
|
||||
|
||||
- General
|
||||
- Un nuevo tema: `theme-chalk`
|
||||
- Se ha mejorado la accesibilidad de los siguientes componentes: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload
|
||||
- Añadido tipografías TypeScript
|
||||
- Todos los iconos existentes son rediseñados. Se han añadido algunos iconos nuevos
|
||||
- Añadida una serie de clases de utilidades basadas en puntos de ruptura que ocultan elementos cuando el tamaño del viewport cumple ciertas condiciones
|
||||
- Componentes de diseño añadidos: Container, Header, Aside, Main, Footer.
|
||||
- Ahora puede configurar los tamaños de componentes a nivel global. Al importar Element, puede añadir un objeto de configuración global con un prop `size` para configurar tamaños predeterminados para todos los componentes.
|
||||
- Button
|
||||
- Atributo `round` añadido. Se usa para botones de esquinas redondas #6643
|
||||
- TimeSelect
|
||||
- Ahora puede ser navegado por `Up` y `Down`, y presionando `Enter` selecciona la hora #6023
|
||||
- TimePicker
|
||||
- Ahora puede ser navegado por `Up` y `Down`, y presionando `Enter` selecciona la hora #6050
|
||||
- Añadido `start-placeholder` y `end-placeholder`. Son placeholder's para las dos casillas de input en modo range #7169
|
||||
- Añadido el atributo `arrow-control` para hacer girar el tiempo con las flechas #7438
|
||||
- Tree
|
||||
- Ahora los nodos hijo no se renderizan antes de la primera expansión #6257
|
||||
- Añadido el atributo `check-descendants`. Determina si los nodos hijo se seleccionan al seleccionar su nodo padre en modo `lazy` #6235
|
||||
- Tag
|
||||
- Atributo `size` añadido #7203
|
||||
- Datepicker
|
||||
- Ahora `timeFormat` puede dar formato al TimePicker cuando type está configurado en `datetimerange` #6052
|
||||
- Añadido `start-placeholder` y `end-placeholder`. Son placeholder's para las dos casillas de input en modo range #7169
|
||||
- Atributo `value-format` añadido para personalizar el formato del valor enlazado, #7367
|
||||
- Añadido el atributo `unlink-panels` para desacoplar los dos paneles de fechas al seleccionar un rango.
|
||||
- MessageBox
|
||||
- Añadido el atributo `closeOnHashChange` #6043
|
||||
- Atributo `center` agregado para que el contenido pueda ser centrado #7029
|
||||
- Añadido atributo `roundButton` para mostrar Botones redondeados #7029
|
||||
- Añadido atributo `dangerouslyUseHTMLString`. Cuando está configurado en true, el mensaje será analizado como cadena HTML<sup>*</sup> #6043
|
||||
- Añadido atributo `inputType` para asignar el tipo para el input interno, #7651
|
||||
- Dialog
|
||||
- Añadidos los atributos `width`, `fullscreen`, `append-to-body`. Ahora Dialog puede ser anidado
|
||||
- Atributo `center` agregado para que el contenido pueda ser centrado #7042
|
||||
- Añadidos `focus-after-closed`, `focus-after-open` para mejorar la accesibilidad #6511
|
||||
- ColorPicker
|
||||
- Ahora puede escribir colores en el input #6167
|
||||
- Añadidos atributos `size` y `disabled` #7026
|
||||
- Añadido atributo `popper-class` #7351
|
||||
- Message
|
||||
- Ahora el color de los iconos puede ser sustituido por CSS #6207
|
||||
- Añadido atributo `dangerouslyUseHTMLString`. Cuando está configurado en true, el mensaje será analizado como cadena HTML<sup>*</sup> #6207
|
||||
- Atributo `center` agregado para que el contenido pueda ser centrado #6875
|
||||
- Notification
|
||||
- Añadido atributo `position` para configurar donde aparece Notification #6231
|
||||
- Añadido atributo `dangerouslyUseHTMLString` . Cuando está configurado en true, el mensaje será analizado como cadena HTML<sup>*</sup> #6231
|
||||
- Añadido el atributo `showClose` para ocultar el botón de cierre #6402
|
||||
- Rate
|
||||
- Añadido el atributo `show-score` para determinar si la puntuación actual se muestra #6295
|
||||
- Tabs
|
||||
- Añadido el atributo `tab-position` #6096
|
||||
- Radio
|
||||
- Añadidos los atributos `border` y `size` #6690
|
||||
- Checkbox
|
||||
- Añadidos los atributos `border` y `size` #6690
|
||||
- Alert
|
||||
- Atributo `center` agregado para que el contenido pueda ser centrado #6876
|
||||
- Menu
|
||||
- Añadidos los atributos `background-color`, `text-color` y `active-text-color` #7064
|
||||
- Añadidos los methods `open` and `close` para abrir y cerrar los SubMenu con programación, #7412
|
||||
- Form
|
||||
- Añadido el atributo `inline-message` para determinar si el mensaje de validación se muestra inline #7032
|
||||
- Añadido el atributo `status-icon` para mostrar un icono de retroalimentación cuando se valida #7032
|
||||
- Form y FormItem ahora tienen un atributo `size`. Los componentes internos heredarán este tamaño si no se especifica en ellos mismos, #7428
|
||||
- Método `validate` devolverá ahora una promesa si se omite la llamada de retorno, #7405
|
||||
- Añadido método `clearValidate` para limpiar los resultados de las validaciones de todos los form items, #7623
|
||||
- Input
|
||||
- Añadido slots con nombres `suffix` y `prefix` y atributos `suffixIcon` y `prefixIcon` para añadir contenido dentro del input #7032
|
||||
- Breadcrumb
|
||||
- Añadido el atributo `separator-class` para dar soporte a los iconos como separadores de items #7203
|
||||
- Steps
|
||||
- Añadido atributo `simple` para activar Steps de estilo sencillo #7274
|
||||
- Pagination
|
||||
- Añadidos los atributos `prev-text` y `next-text` para personalizar los textos de la página anterior y de la página siguiente #7005
|
||||
- Loading
|
||||
- Ahora usted puede personalizar el ícono del spinner y el color de fondo con los props `spinner` y `background` , #7390
|
||||
- Autocomplete
|
||||
- Añadido atributo `debounce`, #7413
|
||||
- Upload
|
||||
- Añadidos los atributos `limit` and `on-exceed` para limitar la cantidad de archivos, #7405
|
||||
- DateTimePicker
|
||||
- Añadido el atributo `time-arrow-control` para activar `arrow-control` del TimePicker anidado, #7438
|
||||
- Layout
|
||||
- Añadido un nuevo breakpoint `xl` para viewport más ancho que 1920px
|
||||
- Table
|
||||
- Añadido el atributo `span-method` para combinar celdas
|
||||
- Añadido el método `clearSort` para borrar la clasificación programáticamente
|
||||
- Añadido el método `clearFilter` para limpiar el filtro de forma programática
|
||||
- Para las filas ampliables, cuando se amplía una fila, se añadirá una clase `.expanded` a su lista de clases, para que pueda personalizar su estilo.
|
||||
- Atributo de `size` añadido
|
||||
- Añadido el método `toggleRowExpansion` para expandir o contraer filas expandibles programáticamente.
|
||||
- Añadido el atributo `cell-class-name` para asignar el nombre de la clase para las celdas
|
||||
- Añadido atributo `cell-style` para dar estilo a las celdas
|
||||
- Añadido atributo `header-row-class-name` para asignar el nombre de clase para las filas de encabezado.
|
||||
- Añadido un atributo `header-row-style` para el estilo de encabezado
|
||||
- Añadido el atributo `header-cell-class-name` para asignar el nombre de la clase para las celdas de encabezado.
|
||||
- Añadido el atributo `header-cell-style` a las celdas de encabezado de estilo
|
||||
- El atributo prop de TableColumn ahora acepta las notaciones `object[key]`
|
||||
- Atributo de `index` añadido para TableColumn para personalizar índices de filas
|
||||
- Select
|
||||
- Añadido el atributo `reserve-keyword` para reservar la palabra clave de búsqueda actual después de seleccionar una opción.
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- DatePicker
|
||||
- Arreglado `v-model` que devolvia el segundo día de la semana seleccionada en modo week #6038
|
||||
- Arreglado el primer input comenzaba borrado con el type `daterange` #6021
|
||||
- DateTimePicker
|
||||
- Arreglado DateTimePicker y TimePicker que se afectaban entre sí cuando se seleccionaban #6090
|
||||
- Arreglado la hora y el segundo podian estar más allá del límite al seleccionar el tiempo #6076
|
||||
- TimePicker
|
||||
- Arreglado `v-model` que no se actualizaba correctamente cuando no tenia el foco #6023
|
||||
- Dialog
|
||||
- Arreglado textos que tenian bordes borrosos al abrir y cerrar dropdowns anidados #6088
|
||||
- Select
|
||||
- Rendimiento mejorado. Ahora Vue dev-tool no se bloqueará cuando un gran número de Selects sean destruidos #6151
|
||||
- Table
|
||||
- Corregido un bug de Table permanecía oculto cuando su elemento padre tenia el atributo `display: none`
|
||||
- Arreglado Table ahora amplia su ancho cuando el elemento padre tiene `display: flex`
|
||||
- Arreglado un bug que corregía las columnas de una tabla con slot con nombre `append` que desaparecia cuando los datos eran recuperados dinámicamente.
|
||||
- Arreglado el atributo `expand-row-keys` que no funcionan con el valor inicial
|
||||
- Fallo del filtro corregido al actualizar los datos
|
||||
- Se ha corregido un error de cálculo de la disposición de columnas fijas con cabeceras agrupadas.
|
||||
- Corregido un error de `max-height` dinámico
|
||||
- Corregidos algunos errores de cálculo de estilo
|
||||
|
||||
#### Breaking changes
|
||||
|
||||
- General
|
||||
- Eliminado `theme-default`
|
||||
- Compatible con Vue 2.5.2+ e IE 10+
|
||||
- Evento `change` de componentes del formulario y evento `current-change` de Pagination ahora sólo se activa en la interacción del usuario.
|
||||
- El atributo `size` del botón y los componentes del formulario aceptan ahora los tamaños `medium`, `small` y `mini`.
|
||||
- Para facilitar el uso de iconos de terceros, los atributos `icon` de Button y Steps y los atributos `prefix-icon` y `suffix-icon` del input ahora requieren un nombre de clase completo.
|
||||
- Dialog
|
||||
- Atributo `size` eliminado. Ahora el tamaño de Dialog se puede configurar con `width` y `fullscreen`
|
||||
- Ahora la visibilidad del Diálogo no puede ser controlada por `v-model`
|
||||
- Rate
|
||||
- `text-template` a sido renombrado a `score-template`
|
||||
- Dropdown
|
||||
- `menu-align` a sido renombrado a `placement`. Ahora soporta más posiciones
|
||||
- Transfer
|
||||
- `footer-format` a sido renombrado a `format`
|
||||
- Switch
|
||||
- Los atributos que comienzan con `on*` serán analizados en eventos en JSX, haciendo que todos los atributos `on*` de Switch no puedan trabajar en JSX. Por lo tanto, los atributos `on*` se renombran a `active-*`, y por consiguiente los atributos `off-*` se renombran a `inactivado-*`. Este cambio afecta a los siguientes atributos: `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value`.
|
||||
- Los atributos `active-text` y `inactive-text` ahora no tienen valores por defecto.
|
||||
- Tag
|
||||
- El atributo type acepta ahora `success`, `info`, `warning` y `danger`
|
||||
- Menu
|
||||
- Atributo `theme` eliminado. El color de Menu se puede configurar utilizando `background-color`, `text-color` y `active-text-color`
|
||||
- Input
|
||||
- Atributo `icon` eliminado. Ahora el icono del sufijo puede configurarse usando el atributo `suffix-icon` o el slot con nombre `suffix`.
|
||||
- Eliminado el atributo `on-icon-click` y el evento `click`. Ahora para añadir el manejador de clics en los iconos, por favor use los slots con nombre.
|
||||
- El evento `change` se comporta ahora como el nativo, que se activa sólo en la perdida del foco o presionando enter. Si necesita responder a las entradas de usuario en tiempo real, puede utilizar el evento `input`.
|
||||
- Autocomplete
|
||||
- Atributo `custom-item` eliminado. Ahora la plantilla de sugerencias del input se puede personalizar utilizando `scoped slot`
|
||||
- Atributo `props` eliminado. Ahora puede utilizar el atributo `value-key` para designar el nombre de la clave del objeto de sugerencia del input para su visualización.
|
||||
- Steps
|
||||
- Atributo `center` eliminado
|
||||
- Ahora Steps llenara su contenedor padre por defecto
|
||||
- DatePicker
|
||||
- Los parámetros del evento `change` de DatePicker son ahora el valor vinculante en sí mismo. Su formato es controlado por `value-format`
|
||||
- Table
|
||||
- Soporte eliminado para personalizar la plantilla de columnas mediante `inline-template`
|
||||
- `sort-method` ahora se alinea con `Array.sort`. Debería devolver un número en lugar de un booleano
|
||||
- El slot `append` se desplazo fuera del elemento `tbody` para evitar múltiples renderizados.
|
||||
- Evento `expand` se renombro a `expand-change`
|
||||
- Los parametros de los métodos `row-class-name` y `row-style` son ahora un objeto
|
||||
|
||||
# #
|
||||
|
||||
<i><sup>*</sup> El procesamiento dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a [ataques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Por lo tanto, cuando `dangerouslyUseHTMLString` está encendido, por favor asegúrese de que el contenido de `message` es confiable, y **nunca** asigne el `message` al contenido proporcionado por el usuario.</i>
|
||||
|
|
@ -22,7 +22,7 @@ if (componentFile.some(item => item.lang === lang)) {
|
|||
console.error(`${lang} already exists.`);
|
||||
process.exit(1);
|
||||
}
|
||||
let componentNew = Object.assign({}, componentFile.filter(item => item.lang === 'en-us')[0], { lang });
|
||||
let componentNew = Object.assign({}, componentFile.filter(item => item.lang === 'en-US')[0], { lang });
|
||||
componentFile.push(componentNew);
|
||||
fileSave(path.join(__dirname, '../../examples/i18n/component.json'))
|
||||
.write(JSON.stringify(componentFile, null, ' '), 'utf8')
|
||||
|
|
@ -30,7 +30,7 @@ fileSave(path.join(__dirname, '../../examples/i18n/component.json'))
|
|||
|
||||
// 添加到 page.json
|
||||
const pageFile = require('../../examples/i18n/page.json');
|
||||
let pageNew = Object.assign({}, pageFile.filter(item => item.lang === 'en-us')[0], { lang });
|
||||
let pageNew = Object.assign({}, pageFile.filter(item => item.lang === 'en-US')[0], { lang });
|
||||
pageFile.push(pageNew);
|
||||
fileSave(path.join(__dirname, '../../examples/i18n/page.json'))
|
||||
.write(JSON.stringify(pageFile, null, ' '), 'utf8')
|
||||
|
|
@ -45,7 +45,7 @@ fileSave(path.join(__dirname, '../../examples/i18n/route.json'))
|
|||
|
||||
// 添加到 nav.config.json
|
||||
const navFile = require('../../examples/nav.config.json');
|
||||
navFile[lang] = navFile['en-us'];
|
||||
navFile[lang] = navFile['en-US'];
|
||||
fileSave(path.join(__dirname, '../../examples/nav.config.json'))
|
||||
.write(JSON.stringify(navFile, null, ' '), 'utf8')
|
||||
.end('\n');
|
||||
|
|
|
|||
|
|
@ -187,7 +187,22 @@
|
|||
import { use } from 'main/locale';
|
||||
import zhLocale from 'main/locale/lang/zh-CN';
|
||||
import enLocale from 'main/locale/lang/en';
|
||||
use(location.href.indexOf('zh-CN') > -1 ? zhLocale : enLocale);
|
||||
import esLocale from 'main/locale/lang/es';
|
||||
|
||||
const lang = location.hash.replace('#', '').split('/')[1] || 'zh-CN';
|
||||
const localize = lang => {
|
||||
switch (lang) {
|
||||
case 'zh-CN':
|
||||
use(zhLocale);
|
||||
break;
|
||||
case 'es':
|
||||
use(esLocale);
|
||||
break;
|
||||
default:
|
||||
use(enLocale);
|
||||
}
|
||||
};
|
||||
localize(lang);
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
|
|
@ -206,14 +221,11 @@
|
|||
if (val === 'zh-CN') {
|
||||
this.suggestJump();
|
||||
}
|
||||
this.localize();
|
||||
localize(val);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
localize() {
|
||||
use(this.lang === 'zh-CN' ? zhLocale : enLocale);
|
||||
},
|
||||
suggestJump() {
|
||||
const href = location.href;
|
||||
const preferGithub = localStorage.getItem('PREFER_GITHUB');
|
||||
|
|
@ -232,8 +244,10 @@
|
|||
},
|
||||
|
||||
mounted() {
|
||||
this.localize();
|
||||
this.suggestJump();
|
||||
localize(this.lang);
|
||||
if (this.lang === 'zh-CN') {
|
||||
this.suggestJump();
|
||||
}
|
||||
setTimeout(() => {
|
||||
const notified = localStorage.getItem('ES_NOTIFIED');
|
||||
if (!notified && this.lang !== 'zh-CN') {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,225 @@
|
|||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
hello() {
|
||||
alert('Hello World!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-box.demo-alert .el-alert {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
|
||||
.demo-box.demo-alert .el-alert:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Alert
|
||||
|
||||
Mostrar mensajes de alertas importantes.
|
||||
|
||||
### Uso básico
|
||||
|
||||
Los componentes de alertas no son elementos overlay de la página y no desaparecen automáticamente.
|
||||
|
||||
::: demo Alert provee 4 tipos de temas definidos por `type`, el valor por defecto es `info`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="success alert"
|
||||
type="success">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="info alert"
|
||||
type="info">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="warning alert"
|
||||
type="warning">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="error alert"
|
||||
type="error">
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Personalización del botón de cerrar
|
||||
|
||||
Personalizar el botón de cerrar como texto u otros símbolos.
|
||||
|
||||
::: demo Alert permite configurar si es posible cerrarla. El texto del botón de cerrado, así como los callbacks de cerrado son personalizables. El atributo `closable` define si el componente puede cerrarse o no. Acepta un `boolean`, que por defecto es `true`. También puede configurar el atributo `close-text` para reemplazar el símbolo de cerrado que se muestra por defecto. El atributo `close-text` debe ser un string. El evento `close` se dispara cuando el componente se cierra.
|
||||
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="unclosable alert"
|
||||
type="success"
|
||||
:closable="false">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="customized close-text"
|
||||
type="info"
|
||||
close-text="Gotcha">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="alert with callback"
|
||||
type="warning"
|
||||
@close="hello">
|
||||
</el-alert>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
hello() {
|
||||
alert('Hello World!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Usar iconos
|
||||
|
||||
Mostrar un icono mejora la legibilidad.
|
||||
|
||||
::: demo Setear el atributo `show-icon` muestra un icono que corresponde al tipo de Alert que se está mostrando.
|
||||
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="success alert"
|
||||
type="success"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="info alert"
|
||||
type="info"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="warning alert"
|
||||
type="warning"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="error alert"
|
||||
type="error"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Texto centrado
|
||||
|
||||
Para centrar el texto utilice el atributo `center`.
|
||||
|
||||
::: demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="success alert"
|
||||
type="success"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="info alert"
|
||||
type="info"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="warning alert"
|
||||
type="warning"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="error alert"
|
||||
type="error"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Con descripción
|
||||
|
||||
Descripción incluye un mensaje con información más detallada.
|
||||
|
||||
::: demo Además del atributo requerido `title`, se puede agregar el atributo `description` para ayudar a describir la alerta con mas detalles. La descripción puede contener solamente un string y va a usar word wrap automáticamente.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="with description"
|
||||
type="success"
|
||||
description="This is a description.">
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Utilizando icono y descripción
|
||||
|
||||
::: demo Finalmente este es un ejemplo utilizando icono y descripción.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="success alert"
|
||||
type="success"
|
||||
description="more text description"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="info alert"
|
||||
type="info"
|
||||
description="more text description"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="warning alert"
|
||||
type="warning"
|
||||
description="more text description"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="error alert"
|
||||
type="error"
|
||||
description="more text description"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ----------- | ---------------------------------------- | ------- | -------------------------- | ----------- |
|
||||
| title | título. Requerido | string | — | — |
|
||||
| type | tipo de componente | string | success/warning/info/error | info |
|
||||
| description | texto descriptivo. También puede ser pasado con el slot por defecto | string | — | — |
|
||||
| closable | si se puede cerrar o no | boolean | — | true |
|
||||
| center | si el texto debe estar centrado | boolean | — | false |
|
||||
| close-text | texto de cerrado personalizado | string | — | — |
|
||||
| show-icon | si un icono del tipo de alerta se debe mostrar | boolean | — | false |
|
||||
|
||||
|
||||
### Eventos
|
||||
| Nombre del evento | Descripción | Parámetros |
|
||||
| ----------------- | ------------------------------------- | ---------- |
|
||||
| close | Se dispara cuando la alerta se cierra | — |
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
## Badge
|
||||
|
||||
Marcas en forma de número o estado para botones e iconos.
|
||||
|
||||
### Uso básico
|
||||
|
||||
Muestra la cantidad de mensajes nuevos.
|
||||
|
||||
:::demo La cantidad está definida por `value` que acepta `Number` o `String`.
|
||||
|
||||
```html
|
||||
<el-badge :value="12" class="item">
|
||||
<el-button size="small">comments</el-button>
|
||||
</el-badge>
|
||||
<el-badge :value="3" class="item">
|
||||
<el-button size="small">replies</el-button>
|
||||
</el-badge>
|
||||
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
Click Me<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item class="clearfix">
|
||||
comments
|
||||
<el-badge class="mark" :value="12" />
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item class="clearfix">
|
||||
replies
|
||||
<el-badge class="mark" :value="3" />
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Valor máximo
|
||||
|
||||
Se puede personalizar el valor máximo.
|
||||
|
||||
::: demo El valor máximo se define como `max` el cual es un `Number`. Nota: solo funciona si `value` es también un `Number`.
|
||||
|
||||
```html
|
||||
<el-badge :value="200" :max="99" class="item">
|
||||
<el-button size="small">comments</el-button>
|
||||
</el-badge>
|
||||
<el-badge :value="100" :max="10" class="item">
|
||||
<el-button size="small">replies</el-button>
|
||||
</el-badge>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Personalizaciones
|
||||
|
||||
Mostrar texto en vez de números.
|
||||
|
||||
:::demo Cuando `value` es un `String`, puede mostrar texto personalizado.
|
||||
|
||||
```html
|
||||
<el-badge value="new" class="item">
|
||||
<el-button size="small">comments</el-button>
|
||||
</el-badge>
|
||||
<el-badge value="hot" class="item">
|
||||
<el-button size="small">replies</el-button>
|
||||
</el-badge>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Pequeño punto rojo
|
||||
|
||||
Puede utilizar un punto rojo para marcar contenido que debe ser notado.
|
||||
|
||||
:::demo Use el atributo `is-dot`. Es un `Boolean`.
|
||||
|
||||
```html
|
||||
<el-badge is-dot class="item">query</el-badge>
|
||||
<el-badge is-dot class="item">
|
||||
<el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
|
||||
</el-badge>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
<style scoped>
|
||||
.share-button {
|
||||
width: 36px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mark {
|
||||
margin-top: 8px;
|
||||
line-height: 1;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
@utils-clearfix;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ---------------------------------------- | -------------- | ----------------- | ----------- |
|
||||
| value | valor a mostrar | string, number | — | — |
|
||||
| max | valor máximo, Muestra '{max}+' cuando se excede. Solo funciona si `value` es un `Number` | number | — | — |
|
||||
| is-dot | si se debe mostrar un pequeño punto | boolean | — | false |
|
||||
| hidden | hidden badge | boolean | — | false |
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
## Breadcrumb
|
||||
|
||||
Muestra la localización de la página actual, haciendo más fácil el poder ir a la página anterior.
|
||||
|
||||
### Uso básico
|
||||
|
||||
|
||||
:::demo En `el-breadcrumb`, cada `el-breadcrumb-item` es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo `String` llamado `separator`, el mismo determina el caracter separador. El valor por defecto es '/'.
|
||||
|
||||
```html
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>promotion management</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
```
|
||||
:::
|
||||
|
||||
### Icono separador
|
||||
|
||||
:::demo Setee `separator-class` para que utilice `iconfont` como separador，el mismo va a cubrir `separator`
|
||||
|
||||
```html
|
||||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>promotion management</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
```
|
||||
:::
|
||||
|
||||
### Breadcrumb atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| --------------- | -------------------------------------- | ------ | ----------------- | ----------- |
|
||||
| separator | caracter separador | string | — | / |
|
||||
| separator-class | nombre de la clase del icono separador | string | — | - |
|
||||
|
||||
### Breadcrumb Item atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ---------------------------------------- | ------------- | ----------------- | ----------- |
|
||||
| to | ruta del link, lo mismo que `to` de `vue-router` | string/object | — | — |
|
||||
| replace | si `true`, la navegación no dejara una entrada en la historia | boolean | — | false |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
<style>
|
||||
.demo-box.demo-button {
|
||||
.el-row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.el-button + .el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-button-group {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-button + .el-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
& + .el-button-group {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Button
|
||||
|
||||
Botones comúnmente usados.
|
||||
|
||||
### Uso básico
|
||||
|
||||
::: demo Use `type`, `plain` y `round` para definir estilos a los botones.
|
||||
|
||||
```html
|
||||
<div>
|
||||
<el-button>Default</el-button>
|
||||
<el-button type="primary">Primary</el-button>
|
||||
<el-button type="success">Success</el-button>
|
||||
<el-button type="info">Info</el-button>
|
||||
<el-button type="warning">Warning</el-button>
|
||||
<el-button type="danger">Danger</el-button>
|
||||
</div>
|
||||
|
||||
<div style="margin: 20px 0">
|
||||
<el-button plain>Plain</el-button>
|
||||
<el-button type="primary" plain>Primary</el-button>
|
||||
<el-button type="success" plain>Success</el-button>
|
||||
<el-button type="info" plain>Info</el-button>
|
||||
<el-button type="warning" plain>Warning</el-button>
|
||||
<el-button type="danger" plain>Danger</el-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-button round>Round</el-button>
|
||||
<el-button type="primary" round>Primary</el-button>
|
||||
<el-button type="success" round>Success</el-button>
|
||||
<el-button type="info" round>Info</el-button>
|
||||
<el-button type="warning" round>Warning</el-button>
|
||||
<el-button type="danger" round>Danger</el-button>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### Botón deshabilitado
|
||||
|
||||
El atributo `disabled` determina su un botón esta deshabilitado.
|
||||
|
||||
:::demo Use el atributo `disabled` para determinar si un botón esta deshabilitado. Acepta un valor `Boolean`.
|
||||
|
||||
```html
|
||||
<div>
|
||||
<el-button disabled>Default</el-button>
|
||||
<el-button type="primary" disabled>Primary</el-button>
|
||||
<el-button type="success" disabled>Success</el-button>
|
||||
<el-button type="info" disabled>Info</el-button>
|
||||
<el-button type="warning" disabled>Warning</el-button>
|
||||
<el-button type="danger" disabled>Danger</el-button>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 20px">
|
||||
<el-button plain disabled>Plain</el-button>
|
||||
<el-button type="primary" plain disabled>Primary</el-button>
|
||||
<el-button type="success" plain disabled>Success</el-button>
|
||||
<el-button type="info" plain disabled>Info</el-button>
|
||||
<el-button type="warning" plain disabled>Warning</el-button>
|
||||
<el-button type="danger" plain disabled>Danger</el-button>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### Botón de texto
|
||||
|
||||
Botones sin borde ni fondo.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-button type="text">Text Button</el-button>
|
||||
<el-button type="text" disabled>Text Button</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### Botón icono
|
||||
|
||||
Use iconos para darle mayor significado a Button. Se puede usar simplemente un icono o un icono con texto.
|
||||
|
||||
:::demo Use el atributo `icon` para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag `<i>`. También se pueden usar iconos custom.
|
||||
|
||||
```html
|
||||
<el-button type="primary" icon="el-icon-edit"></el-button>
|
||||
<el-button type="primary" icon="el-icon-share"></el-button>
|
||||
<el-button type="primary" icon="el-icon-delete"></el-button>
|
||||
<el-button type="primary" icon="el-icon-search">Search</el-button>
|
||||
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### Grupo de botones
|
||||
|
||||
Mostrar un grupo de botones puede ser usado para mostrar un grupo de operaciones similares.
|
||||
|
||||
:::demo Use el tag `<el-button-group>` para agrupar sus botones.
|
||||
|
||||
```html
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>
|
||||
<el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>
|
||||
</el-button-group>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="el-icon-edit"></el-button>
|
||||
<el-button type="primary" icon="el-icon-share"></el-button>
|
||||
<el-button type="primary" icon="el-icon-delete"></el-button>
|
||||
</el-button-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### Botón de descarga
|
||||
|
||||
Cuando se hace clic en un botón para descargar datos, el botón muestra un estado de descarga.
|
||||
|
||||
:::demo Ajuste el atributo `loading` a `true` para mostrar el estado de descarga.
|
||||
|
||||
```html
|
||||
<el-button type="primary" :loading="true">Loading</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### Tamaños
|
||||
|
||||
Además del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios.
|
||||
|
||||
:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small` or `mini`.
|
||||
|
||||
```html
|
||||
<div>
|
||||
<el-button>Default</el-button>
|
||||
<el-button size="medium">Medium</el-button>
|
||||
<el-button size="small">Small</el-button>
|
||||
<el-button size="mini">Mini</el-button>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-button round>Default</el-button>
|
||||
<el-button size="medium" round>Medium</el-button>
|
||||
<el-button size="small" round>Small</el-button>
|
||||
<el-button size="mini" round>Mini</el-button>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ----------- | ---------------------------------------- | ------- | ---------------------------------------- | ----------- |
|
||||
| size | tamaño del botón | string | medium / small / mini | — |
|
||||
| type | tipo de botón | string | primary / success / warning / danger / info / text | — |
|
||||
| plain | determinar si es o no un botón plano | boolean | — | false |
|
||||
| round | determinar si es o no un botón redondo | boolean | — | false |
|
||||
| loading | determinar si es o no un botón de descarga | boolean | — | false |
|
||||
| disabled | deshabilitar el botón | boolean | — | false |
|
||||
| icon | nombre de la clase del icono | string | — | — |
|
||||
| autofocus | misma funcionalidad que la nativa `autofocus` | boolean | — | false |
|
||||
| native-type | misma funcionalidad que la nativa `type` | string | button / submit / reset | button |
|
||||
|
|
@ -0,0 +1,192 @@
|
|||
<script>
|
||||
import dateUtil from 'main/utils/date'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: dateUtil.format(new Date(), 'yyyy-MM-dd HH:mm')
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 13px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
@utils-clearfix;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 480px;
|
||||
}
|
||||
</style>
|
||||
## Card
|
||||
Muestra información dentro de un contenedor `card`
|
||||
|
||||
### Uso Basico
|
||||
|
||||
`Card` incluye titulo, contenido y operaciones.
|
||||
|
||||
:::demo Card se compone de cabecera y cuerpo. La cabecera es opcional y la colocación de su contenido depende de un slot con nombre.
|
||||
|
||||
```html
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Card name</span>
|
||||
<el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>
|
||||
</div>
|
||||
<div v-for="o in 4" :key="o" class="text item">
|
||||
{{'List item ' + o }}
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<style>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 480px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Card simple
|
||||
|
||||
La parte de la cabecera puede omitirse.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-card class="box-card">
|
||||
<div v-for="o in 4" :key="o" class="text item">
|
||||
{{'List item ' + o }}
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<style>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 480px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Con imágenes
|
||||
|
||||
Muestre un contenido más rico añadiendo algunas configuraciones.
|
||||
|
||||
:::demo El atributo `body-style` define el estilo CSS del `body` personalizado. Este ejemplo también utiliza `el-col` para el layout.
|
||||
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
|
||||
<el-card :body-style="{ padding: '0px' }">
|
||||
<img src="~examples/assets/images/hamburger.png" class="image">
|
||||
<div style="padding: 14px;">
|
||||
<span>Yummy hamburger</span>
|
||||
<div class="bottom clearfix">
|
||||
<time class="time">{{ currentDate }}</time>
|
||||
<el-button type="text" class="button">Operating button</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.time {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 13px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: new Date()
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ---------- | ---------------------------------------- | ------ | ----------------- | ------------------- |
|
||||
| header | Titulo del card. También acepta DOM pasado por `slot#header` | string | — | — |
|
||||
| body-style | Estilo CSS del cuerpo | object | — | { padding: '20px' } |
|
||||
|
|
@ -0,0 +1,244 @@
|
|||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
const demos = document.querySelectorAll('.source');
|
||||
demos[0].style.padding = '0';
|
||||
demos[0].className += ' small';
|
||||
demos[3].className += ' medium';
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-carousel .block {
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
border-right: solid 1px #EFF2F6;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-carousel .demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.demo-carousel .el-carousel__container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.demo-carousel .el-carousel__item {
|
||||
h3 {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
line-height: 300px;
|
||||
margin: 0;
|
||||
}
|
||||
&:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
&:nth-child(2n+1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-carousel .small h3 {
|
||||
font-size: 14px;
|
||||
line-height: 150px;
|
||||
}
|
||||
|
||||
.demo-carousel .medium h3 {
|
||||
font-size: 14px;
|
||||
line-height: 200px;
|
||||
}
|
||||
</style>
|
||||
## Carousel
|
||||
|
||||
Presenta una serie de imágenes o textos en un espacio limitado
|
||||
|
||||
### Uso básico
|
||||
|
||||
::: demo Combine `el-carousel` con `el-carousel-item`, para conseguir el carrusel. El contenido de cada diapositiva es completamente personalizable, y sólo tiene que colocarla dentro de la etiqueta `el-carousel-item` . Por defecto, el carrusel cambia cuando el ratón pasa por encima de un indicador. Fije `trigger` para `click`, si lo que se desea es que el carrusel cambie sólo cuando se haga clic en un indicador.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Switch when indicator is hovered (default)</span>
|
||||
<el-carousel height="150px">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Switch when indicator is clicked</span>
|
||||
<el-carousel trigger="click" height="150px">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
font-size: 14px;
|
||||
opacity: 0.75;
|
||||
line-height: 150px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n+1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Indicadores
|
||||
|
||||
Los indicadores de paginacion pueden mostrarse fuera del carrusel
|
||||
|
||||
::: demo El atributo `indicator-position` determina dónde se encuentran los indicadores de paginación. Por defecto están dentro del carrusel, y el ajuste de `indicator-position` a `outside` los mueve hacia fuera; en cambio `indicator-position` a `none` los oculta.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-carousel indicator-position="outside">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
font-size: 18px;
|
||||
opacity: 0.75;
|
||||
line-height: 300px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n+1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Flechas
|
||||
|
||||
Puede definir cuando se visualizan las flechas
|
||||
|
||||
::: demo El atributo `arrow` determina cuándo se visualizan las flechas. Por defecto aparecen cuando el ratón se desplaza sobre el carrusel. Ajuste `arrow` a `always` o `never` para mostrar u ocultar las flechas permanentemente.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-carousel :interval="5000" arrow="always">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
font-size: 18px;
|
||||
opacity: 0.75;
|
||||
line-height: 300px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n+1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Modo Card
|
||||
|
||||
Cuando una página es suficientemente ancha pero tiene una altura limitada, puede activar el modo `card` para carrusel.
|
||||
|
||||
::: demo Ajuste `type` a `card` para activar el modo tarjeta. Aparte de la apariencia, la mayor diferencia entre el modo tarjeta y el modo común es que al hacer clic en las diapositivas de ambos lados, el carrusel cambia directamente en modo tarjeta.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-carousel :interval="4000" type="card" height="200px">
|
||||
<el-carousel-item v-for="item in 6" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
font-size: 14px;
|
||||
opacity: 0.75;
|
||||
line-height: 200px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n+1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos de Carousel
|
||||
| Atributo | Descripcion | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------------ | ---------------------------------------- | ------- | ------------------ | ----------- |
|
||||
| height | Alto del carrusel | string | — | — |
|
||||
| initial-index | Indice del slider inicial activo (empieza desde 0) | number | — | 0 |
|
||||
| trigger | Evento que muestra los indicadores | string | hover/click | hover |
|
||||
| autoplay | Si se enlazan automáticamente las diapositivas | boolean | — | true |
|
||||
| interval | Intervalo del auto loop, en milisegundos | number | — | 3000 |
|
||||
| indicator-position | Posición del indicador de paginación | string | outside/none | — |
|
||||
| arrow | Cuando se muestran las flechas | string | always/hover/never | hover |
|
||||
| type | Tipo de carrusel | string | card | — |
|
||||
|
||||
### Eventos de Carousel
|
||||
| Nombre evento | Descripción | Parametros |
|
||||
| ------------- | ---------------------------------------- | ---------------------------------------- |
|
||||
| change | Se dispara cuando el slider activo cambia | Indice del nuevo slider activo, indice del anterior slider activo. |
|
||||
|
||||
### Metodos de Carousel
|
||||
| Metodos | Descripción | Parametros |
|
||||
| ------------- | -------------------------- | ---------------------------------------- |
|
||||
| setActiveItem | Cambio manual de slider | indice del slider al que se va a cambiar, empezando por 0; o el `name` del `el-carousel-item` correspondiente |
|
||||
| prev | Cambia al slider anterior | — |
|
||||
| next | Cambia al slider siguiente | — |
|
||||
|
||||
### Atributos de Carousel-Item
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ---------------------------------------- | ------ | ----------------- | ----------- |
|
||||
| name | Nombre del item que puede ser usado en `setActiveItem` | string | — | — |
|
||||
| label | Texto que se mostrara en el indicador de paginacion correspondiente | string | — | — |
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,327 @@
|
|||
<script>
|
||||
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
checkList: ['seleccionado y deshabilitado','Opción A'],
|
||||
// checkList2: ['Opción A'],
|
||||
checked: true,
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
checked3: true,
|
||||
checked4: false,
|
||||
checked5: false,
|
||||
checked6: true,
|
||||
isValid: 'valid',
|
||||
checkAll: false,
|
||||
cities: cityOptions,
|
||||
checkedCities: ['Shanghai', 'Beijing'],
|
||||
checkedCities1: ['Shanghai', 'Beijing'],
|
||||
isIndeterminate: true,
|
||||
checkboxGroup1: ['Shanghai'],
|
||||
checkboxGroup2: ['Shanghai'],
|
||||
checkboxGroup3: ['Shanghai'],
|
||||
checkboxGroup4: ['Shanghai'],
|
||||
checkboxGroup5: [],
|
||||
checkboxGroup6: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange(ev) {
|
||||
console.log(ev);
|
||||
},
|
||||
handleCheckAllChange(val) {
|
||||
this.checkedCities = val ? cityOptions : [];
|
||||
this.isIndeterminate = false;
|
||||
},
|
||||
handleCheckedCitiesChange(value) {
|
||||
let checkedCount = value.length;
|
||||
this.checkAll = checkedCount === this.cities.length;
|
||||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Checkbox
|
||||
|
||||
Un grupo de opciones para manejar múltiples elecciones.
|
||||
|
||||
### Uso básico
|
||||
|
||||
Checkbox puede ser usado para alternar entre dos estados.
|
||||
|
||||
:::demo Define `v-model`(enlaza la variable) en `el-checkbox`. El valor por defecto es un `Boolean` para un `checkbox`, y se convierte en `true` cuando este es seleccionado. El contenido dentro del tag `el-checkbox` se convierte en la descripción al costado del botón del checkbox.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<!-- `checked` debe ser true o false -->
|
||||
<el-checkbox v-model="checked">Opción</el-checkbox>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Estado Deshabilitado
|
||||
|
||||
Estado deshabilitado para el checkbox.
|
||||
|
||||
::: demo Setear el atributo `disabled`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox v-model="checked1" disabled>Opción</el-checkbox>
|
||||
<el-checkbox v-model="checked2" disabled>Opción</el-checkbox>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked1: false,
|
||||
checked2: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Grupo de Checkboxes
|
||||
|
||||
Es usado por multiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada.
|
||||
|
||||
:::demo El elemento `checkbox-group` puede manejar multiples checkboxes en un grupo usando `v-model` el cuál está enlazado a un `Array`. Dentro del elemento `el-checkbox`, `label` es el valor del checkbox. Si en ese tag no hay contenido anidado, `label` va a ser mostrado como la descripción al lado del botón del checkbox. `label` también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox-group v-model="checkList">
|
||||
<el-checkbox label="Opción A"></el-checkbox>
|
||||
<el-checkbox label="Opción B"></el-checkbox>
|
||||
<el-checkbox label="Opción C"></el-checkbox>
|
||||
<el-checkbox label="disabled" disabled></el-checkbox>
|
||||
<el-checkbox label="Seleccionado y deshabilitado" disabled></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
checkList: ['Seleccionado y deshabilitado','Opción A']
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Indeterminado
|
||||
|
||||
La propiedad `indeterminate` puede ser usada para generar el efecto de marcar todos (check all).
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Marcar todos</el-checkbox>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
||||
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<script>
|
||||
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkAll: false,
|
||||
checkedCities: ['Shanghai', 'Beijing'],
|
||||
cities: cityOptions,
|
||||
isIndeterminate: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleCheckAllChange(val) {
|
||||
this.checkedCities = val ? cityOptions : [];
|
||||
this.isIndeterminate = false;
|
||||
},
|
||||
handleCheckedCitiesChange(value) {
|
||||
let checkedCount = value.length;
|
||||
this.checkAll = checkedCount === this.cities.length;
|
||||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Cantidad Mínima / Máxima de elementos seleccionados
|
||||
|
||||
Las propiedades `min` y `max` pueden limitar la cantidad de elementos seleccionados.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox-group
|
||||
v-model="checkedCities1"
|
||||
:min="1"
|
||||
:max="2">
|
||||
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<script>
|
||||
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkedCities1: ['Shanghai', 'Beijing'],
|
||||
cities: cityOptions
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Estilo tipo Botón
|
||||
|
||||
Checkbox con estilo tipo Botón.
|
||||
|
||||
:::demo Sólo debe cambiar el elemento `el-checkbox` por el elemento `el-checkbox-button`. También proveemos el atributo `size`.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-checkbox-group v-model="checkboxGroup1">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup2" size="medium">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup3" size="small">
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Beijing'" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
|
||||
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
checkboxGroup1: ['Shanghai'],
|
||||
checkboxGroup2: ['Shanghai'],
|
||||
checkboxGroup3: ['Shanghai'],
|
||||
checkboxGroup4: ['Shanghai'],
|
||||
cities: cityOptions
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Con bordes
|
||||
|
||||
:::demo El atributo `border` agrega un borde a los Checkboxes.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-checkbox v-model="checked3" label="Opción1" border></el-checkbox>
|
||||
<el-checkbox v-model="checked4" label="Opción2" border></el-checkbox>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox v-model="checked5" label="Opción1" border size="medium"></el-checkbox>
|
||||
<el-checkbox v-model="checked6" label="Opción2" border size="medium"></el-checkbox>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup5" size="small">
|
||||
<el-checkbox label="Opción1" border></el-checkbox>
|
||||
<el-checkbox label="Opción2" border disabled></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
|
||||
<el-checkbox label="Opción1" border></el-checkbox>
|
||||
<el-checkbox label="Opción2" border></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
checked3: true,
|
||||
checked4: false,
|
||||
checked5: false,
|
||||
checked6: true,
|
||||
checkboxGroup5: [],
|
||||
checkboxGroup6: []
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos de Checkbox
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------- | ---------------------------------------- | ------------------------- | --------------------- | ----------- |
|
||||
| label | valor del Checkbox si es usado dentro de un tag `checkbox-group` | string / number / boolean | — | — |
|
||||
| true-label | valor del Checkbox si está marcado | string / number | — | — |
|
||||
| false-label | valor del Checkbox si no está marcado | string / number | — | — |
|
||||
| disabled | especifica si el Checkbox está deshabilitado | boolean | — | false |
|
||||
| border | especifica si agrega un borde alrededor del Checkbox | boolean | — | false |
|
||||
| size | tamaño del Checkbox, sólo funciona si `border` es true | string | medium / small / mini | — |
|
||||
| name | atributo 'name' nativo | string | — | — |
|
||||
| checked | especifica si el Checkbox está marcado | boolean | — | false |
|
||||
| indeterminate | similar a `indeterminate` en el checkbox nativo | boolean | — | false |
|
||||
|
||||
### Eventos de Checkbox
|
||||
| Nombre | Descripción | Parametros |
|
||||
| ------ | ---------------------------------------- | -------------------- |
|
||||
| change | se ejecuta cuando el valor enlazado cambia | el valor actualizado |
|
||||
|
||||
### Atributos de Checkbox-group
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por Defecto |
|
||||
| ---------- | ---------------------------------------- | ------- | --------------------- | ----------- |
|
||||
| size | tamaño de los checkboxes de tipo botón o los checkboxes con border | string | medium / small / mini | — |
|
||||
| disabled | especifica si los checkboxes anidados están deshabilitados | boolean | — | false |
|
||||
| min | cantidad mínima de checkboxes que deben ser marcados | number | — | — |
|
||||
| max | cantidad máxima de checkboxes que pueden ser marcados | number | — | — |
|
||||
| text-color | color de fuente cuando el botón está activo | string | — | #ffffff |
|
||||
| fill | color de border y de fondo cuando el botón está activo | string | — | #409EFF |
|
||||
|
||||
### Eventos de Checkbox-group
|
||||
| Nombre de Evento | Descripción | Parametros |
|
||||
| ---------------- | ---------------------------------------- | -------------------- |
|
||||
| change | se ejecuta cuando el valor enlazado cambia | el valor actualizado |
|
||||
|
||||
### Atributos de Checkbox-button
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ----------- | ---------------------------------------- | ------------------------- | ----------------- | ----------- |
|
||||
| label | valor del checkbox cuando es usado dentro de un `checkbox-group` | string / number / boolean | — | — |
|
||||
| true-label | valor del checkbox si este está marcado | string / number | — | — |
|
||||
| false-label | valor del checkbox si este no está marcado | string / number | — | — |
|
||||
| disabled | especifica si el checkbox está deshabilitado | boolean | — | false |
|
||||
| name | atributo 'name' del checbox nativo | string | — | — |
|
||||
| checked | si el checkbox está marcado | boolean | — | false |
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeNames: ['1'],
|
||||
activeName: '1'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-collapse {
|
||||
.el-collapse-item__header {
|
||||
.header-icon {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Collapse
|
||||
|
||||
Use Collapse para almacenar contenidos.
|
||||
|
||||
### Uso básico
|
||||
|
||||
Puede expandir varios paneles
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-collapse v-model="activeNames" @change="handleChange">
|
||||
<el-collapse-item title="Consistency" name="1">
|
||||
<div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
|
||||
<div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Feedback" name="2">
|
||||
<div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
|
||||
<div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Efficiency" name="3">
|
||||
<div>Simplify the process: keep operating process simple and intuitive;</div>
|
||||
<div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
|
||||
<div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Controllability" name="4">
|
||||
<div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
|
||||
<div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeNames: ['1']
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Acordeón
|
||||
|
||||
En modo acordeón sólo un panel puede ser expandido a la vez
|
||||
|
||||
:::demo Activa el modo acordeón usado el atributo `accordion`.
|
||||
```html
|
||||
<el-collapse v-model="activeName" accordion>
|
||||
<el-collapse-item title="Consistency" name="1">
|
||||
<div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
|
||||
<div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Feedback" name="2">
|
||||
<div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
|
||||
<div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Efficiency" name="3">
|
||||
<div>Simplify the process: keep operating process simple and intuitive;</div>
|
||||
<div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
|
||||
<div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Controllability" name="4">
|
||||
<div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
|
||||
<div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: '1'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Título personalizado
|
||||
|
||||
Además de usar el atributo `title`, se puede personalizar el título del panel con slots con nombre, esto hace posible agregar contenido personalizado, por ejemplo: iconos.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-collapse accordion>
|
||||
<el-collapse-item name="1">
|
||||
<template slot="title">
|
||||
Consistency<i class="header-icon el-icon-information"></i>
|
||||
</template>
|
||||
<div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
|
||||
<div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Feedback" name="2">
|
||||
<div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
|
||||
<div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Efficiency" name="3">
|
||||
<div>Simplify the process: keep operating process simple and intuitive;</div>
|
||||
<div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
|
||||
<div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Controllability" name="4">
|
||||
<div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
|
||||
<div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos de Collapse
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| --------- | ------------------------------------- | ---------------------------------------- | ----------------- | ----------- |
|
||||
| accordion | especifica si activa el modo acordeón | boolean | — | false |
|
||||
| value | panel activo | string (modo acordeón)/array (No modo acordeón) | — | — |
|
||||
|
||||
### Eventos de Collapse
|
||||
| Nombre de Evento | Descripción | Parametros |
|
||||
| ---------------- | ---------------------------------------- | ---------------------------------------- |
|
||||
| change | se dispara cuando los paneles activos cambian | activeNames: array (No modo acordeón)/string (modo acordeón) |
|
||||
|
||||
|
||||
### Atributos de Collapse Item
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ----------------------------- | ------------- | ----------------- | ----------- |
|
||||
| name | identificador único del panel | string/number | — | — |
|
||||
| title | título del panel | string | — | — |
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
color1: '#409EFF',
|
||||
color2: null,
|
||||
color3: 'rgba(19, 206, 102, 0.8)',
|
||||
color4: '#409EFF'
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
const demos = document.querySelectorAll('.source');
|
||||
demos[0].style.padding = '0';
|
||||
});
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-color-picker .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px #EFF2F6;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
.demo-color-picker .demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.demo-color-picker .el-color-picker + .el-color-picker {
|
||||
margin-left: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## ColorPicker
|
||||
|
||||
ColorPicker es un selector de color que soporta varios formatos de color.
|
||||
|
||||
### Uso básico
|
||||
|
||||
:::demo ColorPicker requiere una variable de tipo `string` para ser enlazada a `v-model`.
|
||||
```html
|
||||
<div class="block">
|
||||
<span class="demonstration">Especifica valor por defecto</span>
|
||||
<el-color-picker v-model="color1"></el-color-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">No especifica valor por defecto</span>
|
||||
<el-color-picker v-model="color2"></el-color-picker>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
color1: '#409EFF',
|
||||
color2: null
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Alpha
|
||||
|
||||
:::demo ColorPicker soporta selección de canales alpha. Para activarlo sólo agrege el atributo `show-alpha`.
|
||||
```html
|
||||
<el-color-picker v-model="color3" show-alpha></el-color-picker>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
color3: 'rgba(19, 206, 102, 0.8)'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Sizes
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-color-picker v-model="color4"></el-color-picker>
|
||||
<el-color-picker v-model="color4" size="medium"></el-color-picker>
|
||||
<el-color-picker v-model="color4" size="small"></el-color-picker>
|
||||
<el-color-picker v-model="color4" size="mini"></el-color-picker>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
color4: '#409EFF'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------ | ---------------------------------------- | ------- | --------------------- | ---------------------------------------- |
|
||||
| disabled | especifica si se deshabilita el ColorPicker | boolean | — | false |
|
||||
| size | tamaño del ColorPicker | string | — | medium / small / mini |
|
||||
| show-alpha | especifica si se muestra el control deslizante para el valor alpha | boolean | — | false |
|
||||
| color-format | formato de color del `v-model` | string | hsl / hsv / hex / rgb | hex (si show-alpha es false)/ rgb (si show-alpha es true) |
|
||||
| popper-class | nombre de clase para el dropdown del ColorPicker | string | — | — |
|
||||
|
||||
### Eventos
|
||||
| Nombre de Evento | Descripción | Parametros |
|
||||
| ---------------- | ---------------------------------------- | ---------------------- |
|
||||
| change | se dispara cuando el valor del input cambia | valor del color |
|
||||
| active-change | se dispara cuando el actual color activo cambia | valor del color activo |
|
||||
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<style>
|
||||
.demo-color-box {
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
height: 74px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
|
||||
& .value {
|
||||
font-size: 12px;
|
||||
opacity: 0.69;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
.demo-color-box-group {
|
||||
.demo-color-box {
|
||||
border-radius: 0;
|
||||
}
|
||||
.demo-color-box:first-child {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.demo-color-box:last-child {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
}
|
||||
.bg-blue {
|
||||
background-color: #409EFF;
|
||||
}
|
||||
|
||||
.bg-success {
|
||||
background-color: #13CE66;
|
||||
}
|
||||
.bg-warning {
|
||||
background-color: #f7ba2a;
|
||||
}
|
||||
.bg-danger {
|
||||
background-color: #ff4949;
|
||||
}
|
||||
.bg-info {
|
||||
background-color: #878D99;
|
||||
}
|
||||
|
||||
.bg-text-primary {
|
||||
background-color: #2d2f33;
|
||||
}
|
||||
.bg-text-regular {
|
||||
background-color: #5a5e66;
|
||||
}
|
||||
.bg-text-secondary {
|
||||
background-color: #878d99;
|
||||
}
|
||||
.bg-text-placeholder {
|
||||
background-color: #b4bccc;
|
||||
}
|
||||
|
||||
.bg-border-base {
|
||||
background-color: #d8dce5;
|
||||
}
|
||||
.bg-border-light {
|
||||
background-color: #dfe4ed;
|
||||
}
|
||||
.bg-border-lighter {
|
||||
background-color: #e6ebf5;
|
||||
}
|
||||
.bg-border-extra-light {
|
||||
background-color: #edf2fc;
|
||||
}
|
||||
|
||||
[class*=" bg-border-"] {
|
||||
color: #5a5e66;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Color
|
||||
Element utiliza un conjunto de paletas para especificar colores, y así, proporcionar una apariencia y sensación coherente para los productos que construye.
|
||||
|
||||
### Color principal
|
||||
|
||||
El color principal de Element es el azul brillante y amigable.
|
||||
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box bg-blue">Azul<div class="value">#409EFF</div></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
### Color secundario
|
||||
|
||||
Además del color principal, se necesitan utilizar distintos colores para diferentes escenarios (por ejemplo, el color en tono rojo indica una operación peligrosa).
|
||||
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box bg-success">Éxito<div class="value">#67C23A</div></div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box bg-warning">Precaución<div class="value">#EB9E05</div></div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box bg-danger">Peligro<div class="value">#FA5555</div></div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box bg-info">Info<div class="value">#878D99</div></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
### Color neutro
|
||||
|
||||
Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jeráquica.
|
||||
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box-group">
|
||||
<div class="demo-color-box bg-text-primary">Texto primario<div class="value">#2D2F33</div></div>
|
||||
<div class="demo-color-box bg-text-regular">Texto regular<div class="value">#5A5E66</div></div>
|
||||
<div class="demo-color-box bg-text-secondary">Texto secundario<div class="value">#878D99</div></div>
|
||||
<div class="demo-color-box bg-text-placeholder">Texto de placeholder<div class="value">#B4BCCC</div></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box-group">
|
||||
<div class="demo-color-box bg-border-base">Borde base<div class="value">#D8DCE5</div></div>
|
||||
<div class="demo-color-box bg-border-light">Borde ligero<div class="value">#DFE4ED</div></div>
|
||||
<div class="demo-color-box bg-border-lighter">Borde claro<div class="value">#E6EBF5</div></div>
|
||||
<div class="demo-color-box bg-border-extra-light">Borde extra claro<div class="value">#EDF2FC</div></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -0,0 +1,300 @@
|
|||
<style>
|
||||
.el-header, .el-footer {
|
||||
background-color: #B3C0D1;
|
||||
color: #333;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#disenos-comunes + .demo-container {
|
||||
.el-header, .el-footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
background-color: #D3DCE6;
|
||||
text-align: center;
|
||||
line-height: 200px;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
background-color: #E9EEF3;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 160px;
|
||||
}
|
||||
|
||||
& > .source > .el-container {
|
||||
margin-bottom: 40px;
|
||||
|
||||
&:nth-child(5) .el-aside,
|
||||
&:nth-child(6) .el-aside {
|
||||
line-height: 260px;
|
||||
}
|
||||
|
||||
&:nth-child(7) .el-aside {
|
||||
line-height: 320px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const item = {
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
};
|
||||
return {
|
||||
tableData: Array(20).fill(item)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Contenedor
|
||||
Componentes contenedores para iniciar una estructura básica de un sitio:
|
||||
|
||||
`<el-container>`: Contenedor. Cuando este elemento se anida con un `<el-header>` o `<el-footer>`, todos los elementos secundarios se organizan verticalmente.
|
||||
De lo contrario, de forma horizontal.
|
||||
|
||||
`<el-header>`: Contenedor para cabeceras.
|
||||
|
||||
`<el-aside>`: Contenedor para secciones laterales (generalmente, una barra lateral).
|
||||
|
||||
`<el-main>`: Contenedor para sección principal.
|
||||
|
||||
`<el-footer>`: Contenedor para pie de página.
|
||||
|
||||
:::tip
|
||||
Estos componentes utilizan flex para el diseño, así que asegurese que el navegador lo soporta. Además, los elementos directos de `<el-container>` tienen que ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un `<el-container>`.
|
||||
:::
|
||||
|
||||
### Diseños comunes
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-container>
|
||||
<el-header>Cabecera</el-header>
|
||||
<el-main>Principal</el-main>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-header>Cabecera</el-header>
|
||||
<el-main>Principal</el-main>
|
||||
<el-footer>Pie de página</el-footer>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-aside width="200px">Barra lateral</el-aside>
|
||||
<el-main>Principal</el-main>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-header>Cabecera</el-header>
|
||||
<el-container>
|
||||
<el-aside width="200px">Barra lateral</el-aside>
|
||||
<el-main>Principal</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-header>Cabecera</el-header>
|
||||
<el-container>
|
||||
<el-aside width="200px">Barra lateral</el-aside>
|
||||
<el-container>
|
||||
<el-main>Principal</el-main>
|
||||
<el-footer>Pie de página</el-footer>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-aside width="200px">Barra lateral</el-aside>
|
||||
<el-container>
|
||||
<el-header>Cabecera</el-header>
|
||||
<el-main>Principal</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<el-container>
|
||||
<el-aside width="200px">Barra lateral</el-aside>
|
||||
<el-container>
|
||||
<el-header>Cabecera</el-header>
|
||||
<el-main>Principal</el-main>
|
||||
<el-footer>Pie de página</el-footer>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<style>
|
||||
.el-header, .el-footer {
|
||||
background-color: #B3C0D1;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
background-color: #D3DCE6;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 200px;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
background-color: #E9EEF3;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 160px;
|
||||
}
|
||||
|
||||
body > .el-container {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(5) .el-aside,
|
||||
.el-container:nth-child(6) .el-aside {
|
||||
line-height: 260px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(7) .el-aside {
|
||||
line-height: 320px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Ejemplo
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-container style="height: 500px; border: 1px solid #eee">
|
||||
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
|
||||
<el-menu :default-openeds="['1', '3']">
|
||||
<el-submenu index="1">
|
||||
<template slot="title"><i class="el-icon-message"></i>Navigator One</template>
|
||||
<el-menu-item-group>
|
||||
<template slot="title">Group 1</template>
|
||||
<el-menu-item index="1-1">Option 1</el-menu-item>
|
||||
<el-menu-item index="1-2">Option 2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="Group 2">
|
||||
<el-menu-item index="1-3">Option 3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="1-4">
|
||||
<template slot="title">Option4</template>
|
||||
<el-menu-item index="1-4-1">Option 4-1</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-submenu index="2">
|
||||
<template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>
|
||||
<el-menu-item-group>
|
||||
<template slot="title">Group 1</template>
|
||||
<el-menu-item index="2-1">Option 1</el-menu-item>
|
||||
<el-menu-item index="2-2">Option 2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="Group 2">
|
||||
<el-menu-item index="2-3">Option 3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="2-4">
|
||||
<template slot="title">Option 4</template>
|
||||
<el-menu-item index="2-4-1">Option 4-1</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-submenu index="3">
|
||||
<template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>
|
||||
<el-menu-item-group>
|
||||
<template slot="title">Group 1</template>
|
||||
<el-menu-item index="3-1">Option 1</el-menu-item>
|
||||
<el-menu-item index="3-2">Option 2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="Group 2">
|
||||
<el-menu-item index="3-3">Option 3</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="3-4">
|
||||
<template slot="title">Option 4</template>
|
||||
<el-menu-item index="3-4-1">Option 4-1</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
<el-container>
|
||||
<el-header style="text-align: right; font-size: 12px">
|
||||
<el-dropdown>
|
||||
<i class="el-icon-setting" style="margin-right: 15px"></i>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>View</el-dropdown-item>
|
||||
<el-dropdown-item>Add</el-dropdown-item>
|
||||
<el-dropdown-item>Delete</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<span>Tom</span>
|
||||
</el-header>
|
||||
|
||||
<el-main>
|
||||
<el-table :data="tableData">
|
||||
<el-table-column prop="date" label="Date" width="140">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="Name" width="120">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="Address">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<style>
|
||||
.el-header {
|
||||
background-color: #B3C0D1;
|
||||
color: #333;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const item = {
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
};
|
||||
return {
|
||||
tableData: Array(20).fill(item)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos de contenedor
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| --------- | ---------------------------------------- | ------ | --------------------- | ---------------------------------------- |
|
||||
| direction | dirección de diseño para elementos secundarios | string | horizontal / vertical | vertical cuando el elemento está anidado con `el-header`, de lo contrario, horizontal |
|
||||
|
||||
### Atributos de cabecera
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | --------------------- | ------ | ----------------- | ----------- |
|
||||
| height | altura de la cabecera | string | — | 60px |
|
||||
|
||||
### Atributos de barra lateral
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ------------------------- | ------ | ----------------- | ----------- |
|
||||
| width | ancho de la barra lateral | string | — | 300px |
|
||||
|
||||
### Atributos de pie de página
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ------------------------ | ------ | ----------------- | ----------- |
|
||||
| height | altura del pie de página | string | — | 60px |
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
## Tema personalizado
|
||||
Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesita remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, para ello hay 3 maneras de modificar los estilos.
|
||||
|
||||
### Cambiando el color del tema
|
||||
Si lo que se busca es cambiar el color del tema de Element, se recomienda utilizar el [sitio de visualización de temas](https://elementui.github.io/theme-chalk-preview/#/en-US). Element utiliza un color azul brillante y amigable como tema principal. Al cambiarlo, puede hacer que Element este más conectado visualmente a proyectos específicos.
|
||||
|
||||
Este sitio, le permitirá obtener una vista previa del tema con un nuevo color en tiempo real, y, además, obtener un paquete de estilos completo basado en el nuevo color para su descarga (para importar estos nuevos estilos, consulte la sección ‘Importar un tema personalizado’ o ‘Importar un tema de componente bajo demanda' que se encuentran dentro de esta sección).
|
||||
|
||||
### Actualizando variables SCSS en tu proyecto
|
||||
`theme-chalk` esta escrito en SCSS. Si su proyecto también utiliza SCSS, puede cambiar las variables de estilos de Element. Para ello, solo necesita crear un nuevo archivo de estilos, por ejemplo, `element-variables.scss`:
|
||||
|
||||
```html
|
||||
/* Color del tema */
|
||||
$--color-primary: teal;
|
||||
|
||||
/* Ubicación de la fuente, obligatoria */
|
||||
$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';
|
||||
|
||||
@import "../node_modules/element-ui/packages/theme-chalk/src/index";
|
||||
```
|
||||
|
||||
Entonces, en el archivo principal del proyecto, importe este archivo de estilos en lugar de los estilos de Element:
|
||||
```JS
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
import './element-variables.scss'
|
||||
|
||||
Vue.use(Element)
|
||||
```
|
||||
|
||||
:::tip
|
||||
Nota es necesario sobreescribir la ruta de la fuente por una ruta relativa de las fuentes de Element.
|
||||
:::
|
||||
|
||||
### CLI para generar temas
|
||||
Si su proyecto no utiliza SCSS, puede personalizar el tema a través de esta herramienta:
|
||||
|
||||
#### <strong>Instalación</strong>
|
||||
Primero, debe instalar el generador de temas ya sea de forma global o local. Se recomienda instalarlo de forma local, ya que de esta manera, cuando otros clonen su proyecto, npm automáticamente los instalará para ellos.
|
||||
```shell
|
||||
npm i element-theme -g
|
||||
```
|
||||
|
||||
Ahora, instale el tema `chalk` desde npm o Github.
|
||||
```shell
|
||||
# desde npm
|
||||
npm i element-theme-chalk -D
|
||||
|
||||
# desde GitHub
|
||||
npm i https://github.com/ElementUI/theme-chalk -D
|
||||
```
|
||||
|
||||
#### <strong>Inicializar archivo de variables</strong>
|
||||
Después de haber instalado correctamente los paquetes, el comando `et` estará disponible en su CLI (si instalo el paquete de manera local, utilize `node_modules/.bin/et` en su lugar). Ejecute `-i` para inicializar un archivo de variables, puede especificar un nombre distinto, pero por defecto, el archivo se llama `element-variables.scss`. También puede especificar un directorio distinto.
|
||||
|
||||
```shell
|
||||
et -i [custom output file]
|
||||
|
||||
> ✔ Generator variables file
|
||||
```
|
||||
|
||||
En el archivo `element-variables.scss` podrá encontrar todas las variables que utiliza Element para definir los estilos y estos están definidos en SCSS. Aquí un ejemplo:
|
||||
```css
|
||||
$--color-primary: #409EFF !default;
|
||||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
|
||||
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
|
||||
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
|
||||
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
|
||||
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
|
||||
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
|
||||
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
|
||||
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
|
||||
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
|
||||
|
||||
$--color-success: #67c23a !default;
|
||||
$--color-warning: #eb9e05 !default;
|
||||
$--color-danger: #fa5555 !default;
|
||||
$--color-info: #878d99 !default;
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
#### <strong>Modificando variables</strong>
|
||||
Solo debe modificar el archivo `element-variables.scss`, por ejemplo, para cambiar el color del tema a rojo:
|
||||
```CSS
|
||||
$--color-primary: red;
|
||||
```
|
||||
|
||||
#### <strong>Construyendo el tema</strong>
|
||||
Después de haber modificado el archivo de variables, utilizaremos el comando `et` para construir nuestro tema. Puedes activar el modo `watch` agregando el parámetro `-w`. Y, si desea personalizar el nombre del archivo, debes agregar el parámetro `-c` seguido del nombre.
|
||||
```shell
|
||||
et
|
||||
|
||||
> ✔ build theme font
|
||||
> ✔ build element theme
|
||||
```
|
||||
|
||||
#### <strong>Importar un tema personalizado</strong>
|
||||
Por defecto, el archivo de tema construido es colocado dentro de `./theme`. Puede especificar un directorio distinto utilizando el parámetro `-o`. Importar su propio tema es igual a como si importará el tema por defecto, únicamente tiene que importar el archivo que se construyó:
|
||||
|
||||
```javascript
|
||||
import '../theme/index.css'
|
||||
import ElementUI from 'element-ui'
|
||||
import Vue from 'vue'
|
||||
|
||||
Vue.use(ElementUI)
|
||||
```
|
||||
|
||||
#### <strong>Importar un tema de componente bajo demanda</strong>
|
||||
Si esta utilizando `babel-plugin-component` para importar bajo demanda, solo debe modificar el archivo `.babelrc` y especificar en la propiedad `styleLibraryName` la ruta en donde se encuentra localizado su tema personalizado relativo a `.babelrc`. **Nota** el carácter `~` es obligatorio:
|
||||
```json
|
||||
{
|
||||
"plugins": [["component", [
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "~theme"
|
||||
}
|
||||
]]]
|
||||
}
|
||||
```
|
||||
|
||||
Si no esta familiarizado con `babel-plugin-component`, por favor diríjase a la documentación sobre <a href="./#/en-US/component/quickstart">Como Iniciar</a>. Para más detalles, consulte el [repositorio del proyecto](https://github.com/ElementUI/element-theme) de `element-theme`.
|
||||
|
|
@ -0,0 +1,428 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
shortcuts: [{
|
||||
text: 'Today',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: 'Yesterday',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: 'A week ago',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
pickerOptions2: {
|
||||
shortcuts: [{
|
||||
text: 'Last week',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last month',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last 3 months',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value4: '',
|
||||
value5: '',
|
||||
value6: '',
|
||||
value7: '',
|
||||
value8: '',
|
||||
value9: '',
|
||||
value10: '',
|
||||
value11: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-block.demo-date-picker .source {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.demo-date-picker .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px #EFF2F6;
|
||||
flex: 1;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-date-picker .demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## DatePicker
|
||||
|
||||
Utilice Date Picker para introducir la fecha.
|
||||
|
||||
### Ingresar Fecha
|
||||
|
||||
Date Picker básico por "día".
|
||||
|
||||
:::demo La medida está determinada por el atributo `type` . Puede habilitar las opciones rápidas creando un objeto `picker-options` con la propiedad `shortcuts`. La fecha desactivada se ajusta mediante `disabledDate`, que es una función.
|
||||
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Default</span>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="date"
|
||||
placeholder="Pick a day">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Picker with quick options</span>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="date"
|
||||
placeholder="Pick a day"
|
||||
:picker-options="pickerOptions1">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
shortcuts: [{
|
||||
text: 'Today',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: 'Yesterday',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: 'A week ago',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: '',
|
||||
value2: '',
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Otras mediciones
|
||||
|
||||
Puede seleccionar la semana, el mes o el año extendiendo el componente date picker estándar.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<div class="block">
|
||||
<span class="demonstration">Week</span>
|
||||
<el-date-picker
|
||||
v-model="value3"
|
||||
type="week"
|
||||
format="Week WW"
|
||||
placeholder="Pick a week">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Month</span>
|
||||
<el-date-picker
|
||||
v-model="value4"
|
||||
type="month"
|
||||
placeholder="Pick a month">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Year</span>
|
||||
<el-date-picker
|
||||
v-model="value5"
|
||||
type="year"
|
||||
placeholder="Pick a year">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: '',
|
||||
value4: '',
|
||||
value5: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Rango de fechas
|
||||
|
||||
Se soporta la selección de un rango de fechas.
|
||||
|
||||
:::demo En modo de rango, los paneles izquierdo y derecho están vinculados por defecto. Si desea que los dos paneles cambien los meses actuales de forma independiente, puede utilizar el atributo `unlink-panels`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Default</span>
|
||||
<el-date-picker
|
||||
v-model="value6"
|
||||
type="daterange"
|
||||
range-separator="To"
|
||||
start-placeholder="Start date"
|
||||
end-placeholder="End date">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">With quick options</span>
|
||||
<el-date-picker
|
||||
v-model="value7"
|
||||
type="daterange"
|
||||
align="right"
|
||||
unlink-panels
|
||||
range-separator="To"
|
||||
start-placeholder="Start date"
|
||||
end-placeholder="End date"
|
||||
:picker-options="pickerOptions2">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions2: {
|
||||
shortcuts: [{
|
||||
text: 'Last week',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last month',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last 3 months',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value6: '',
|
||||
value7: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Valor por defecto
|
||||
|
||||
Si el usuario no ha escogido una fecha, muestra el calendario de hoy por defecto. Puede utilizar `default-value` para fijar otra fecha. Su valor debe ser definido por `new Date()`.
|
||||
|
||||
Si el tipo es `daterange`, `default-value` establece el calendario del lado izquierdo.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">date</span>
|
||||
<el-date-picker
|
||||
v-model="value8"
|
||||
type="date"
|
||||
placeholder="Pick a date"
|
||||
default-value="2010-10-01">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">daterange</span>
|
||||
<el-date-picker
|
||||
v-model="value9"
|
||||
type="daterange"
|
||||
start-placeholder="Start Date"
|
||||
end-placeholder="End Date"
|
||||
default-value="2010-10-01">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value8: '',
|
||||
value9: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Formato del valor
|
||||
|
||||
De forma predeterminada, DatePicker emite el objet `Date`. Puede utilizar `value-format` para designar el formato del valor emitido, acepta la misma cadena de formato del atributo `format`.
|
||||
|
||||
:::warning
|
||||
Esta característica está en la etapa alfa. Feedback bienvenido.
|
||||
:::
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Emits Date object</span>
|
||||
<div class="demonstration">Value: {{ value10 }}</div>
|
||||
<el-date-picker
|
||||
v-model="value10"
|
||||
type="date"
|
||||
placeholder="Pick a Date"
|
||||
format="yyyy/MM/dd">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Emits formatted date</span>
|
||||
<div class="demonstration">Value: {{ value11 }}</div>
|
||||
<el-date-picker
|
||||
v-model="value11"
|
||||
type="date"
|
||||
placeholder="Pick a Date"
|
||||
format="yyyy/MM/dd"
|
||||
value-format="yyyy-MM-dd">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value10: '',
|
||||
value11: '',
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ----------------- | ---------------------------------------- | ----------------- | ---------------------------------------- | ----------- |
|
||||
| readonly | si DatePicker es solo de lectura | boolean | — | false |
|
||||
| disabled | si DatePicker esta deshabilitado | boolean | — | false |
|
||||
| size | tamaño del input | string | large/small/mini | — |
|
||||
| editable | si el input es editable | boolean | — | true |
|
||||
| clearable | si se muestra el boton de borrado | boolean | — | true |
|
||||
| placeholder | placeholder cuando el modo NO es rango | string | — | — |
|
||||
| start-placeholder | placeholder para la fecha de inicio en modo rango | string | — | — |
|
||||
| end-placeholder | placeholder para la fecha final en modo rango | string | — | — |
|
||||
| type | tipo de picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
|
||||
| format | formato en que se muestra el valor en el input | string | año `yyyy`, mes `MM`, dia `dd`, hora `HH`, minuto `mm`, segundo `ss` | yyyy-MM-dd |
|
||||
| align | alineación | left/center/right | left | |
|
||||
| popper-class | nombre de clase personalizada para el dropdown de DatePicker | string | — | — |
|
||||
| picker-options | opciones adicionales, chequee la tabla debajo | object | — | {} |
|
||||
| range-separator | separador de rangos | string | — | '-' |
|
||||
| default-value | opcional, valor por defecto para el calendario | Date | cualquiera aceptado por `new Date()` | — |
|
||||
| value-format | opcional, formato del valor enlazado. Si no esta especificado, el valor enlazado será un objeto Date. | string | año `yyyy`, mes `MM`, dia `dd`, hora `HH`, minuto `mm`, segundo `ss` | — |
|
||||
| name | igual que `name` en el input nativo | string | — | — |
|
||||
| unlink-panels | desvincular los dos paneles de fecha en el range-picker | boolean | — | false |
|
||||
|
||||
### Opciones del Picker
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------------- | ---------------------------------------- | ------------------------------ | ----------------- | ----------- |
|
||||
| shortcuts | { text, onClick } un array de objetos para establecer opciones de acceso directo, verifique la tabla siguiente | object[] | — | — |
|
||||
| disabledDate | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano | function | — | — |
|
||||
| firstDayOfWeek | primer dia de la semana | Number | 1 to 7 | 7 |
|
||||
| onPick | una función que se dispara cuando se cambia la fecha seleccionada. Solamente para `daterange` y `datetimerange`. | Function({ maxDate, minDate }) | - | - |
|
||||
|
||||
### Accesso directo
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ---------------------------------------- | -------- | ----------------- | ----------- |
|
||||
| text | título del acceso directo | string | — | — |
|
||||
| onClick | una función se dispara al hacer clic en el acceso directo, con`vm`como parámetro. Puede modificar el valor del picker emitiendo el evento `pick`. Ejemplo: `vm.$emit('pick', new Date())` | function | — | — |
|
||||
|
||||
|
||||
### Eventos
|
||||
| Nombre | Descripción | Parametros |
|
||||
| ------ | ---------------------------------------- | ---------------------------- |
|
||||
| change | se dispara cuando el usuario confirma el valor | valor enlazado al componente |
|
||||
| blur | se dispara cuando el input pierde el foco | (event: Event) |
|
||||
| focus | se dispara cuando el input obtiene el foco | (event: Event) |
|
||||
|
||||
### Metodos
|
||||
| Metodo | Descripción | Parameteros |
|
||||
| ------ | -------------------------- | ----------- |
|
||||
| focus | coloca el foco en el input | — |
|
||||
|
||||
|
|
@ -0,0 +1,284 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
shortcuts: [{
|
||||
text: 'Today',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: 'Yesterday',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: 'A week ago',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
pickerOptions2: {
|
||||
shortcuts: [{
|
||||
text: 'Last week',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last month',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last 3 months',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: new Date(),
|
||||
value4: '',
|
||||
value5: '',
|
||||
value6: '',
|
||||
value7: '',
|
||||
value8: '',
|
||||
value9: '',
|
||||
value10: '',
|
||||
value11: '',
|
||||
value12: '',
|
||||
value13: '',
|
||||
value14: '',
|
||||
value15: '',
|
||||
value16: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-block.demo-datetime-picker .source {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.demo-datetime-picker .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px #EFF2F6;
|
||||
flex: 1;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-datetime-picker .demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## DateTimePicker
|
||||
|
||||
Seleccionar fecha y tiempo juntos en un picker.
|
||||
|
||||
:::tip
|
||||
DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más detallada sobre `pickerOptions` y otros atributos, puede referirse a DatePicker y TimePicker.
|
||||
:::
|
||||
|
||||
### Fecha y hora
|
||||
|
||||
:::demo Puede seleccionar la fecha y la hora en un picker al mismo tiempo configurando el tipo de fecha y la hora. La forma de utilizar los atajos es la misma que con Date Picker.
|
||||
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Default</span>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="datetime"
|
||||
placeholder="Select date and time">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">With shortcuts</span>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="datetime"
|
||||
placeholder="Select date and time"
|
||||
:picker-options="pickerOptions1">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions1: {
|
||||
shortcuts: [{
|
||||
text: 'Today',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: 'Yesterday',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: 'A week ago',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value1: '',
|
||||
value2: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Alcance de fecha y tiempo
|
||||
|
||||
:::demo Puede seleccionar la fecha y el rango de tiempo ajustando `type` a `datetimerange`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Default</span>
|
||||
<el-date-picker
|
||||
v-model="value3"
|
||||
type="datetimerange"
|
||||
range-separator="To"
|
||||
start-placeholder="Start date"
|
||||
end-placeholder="End date">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">With shortcuts</span>
|
||||
<el-date-picker
|
||||
v-model="value4"
|
||||
type="datetimerange"
|
||||
:picker-options="pickerOptions2"
|
||||
range-separator="To"
|
||||
start-placeholder="Start date"
|
||||
end-placeholder="End date"
|
||||
align="right">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerOptions2: {
|
||||
shortcuts: [{
|
||||
text: 'Last week',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last month',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: 'Last 3 months',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
||||
value4: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos
|
||||
| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- | ----------- |
|
||||
| readonly | si DatePicker es solo de lectura | boolean | — | false |
|
||||
| disabled | si DatePicker esta deshabilitada | boolean | — | false |
|
||||
| editable | Si la entrada es editable | boolean | — | true |
|
||||
| clearable | Si mostrar el botón de `clear` | boolean | — | true |
|
||||
| size | tamaño del input | string | large/small/mini | — |
|
||||
| placeholder | placeholder cuando el modo NO es Range | string | — | — |
|
||||
| start-placeholder | placeholder para el inicio de fecha en el modo Range | string | — | — |
|
||||
| end-placeholder | placeholder para el fin de fecha en el modo Range | string | — | — |
|
||||
| time-arrow-control | si se puede modificar el `time` utilizando botones con flechas | boolean | — | false |
|
||||
| type | tipo del picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
|
||||
| format | formato de valor mostrado en el input | string | año `yyyy` mes `MM` día `dd`, hora `HH`, minuto `mm`, segundo `ss` | yyyy-MM-dd |
|
||||
| alinear | alineación | left/center/right | left | |
|
||||
| popper-class | nombre de clase personalizado para el Dropdown de DatePicker | string | — | — |
|
||||
| picker-options | opciones adicionales, Comprueba la tabla de mas abajo | object | — | {} |
|
||||
| range-separator | separador de rango | string | - | '-' |
|
||||
| default-value | opcional, fecha predeterminada del calendario | Fecha | cualquier cosa aceptada por `new Date()` — | |
|
||||
| value-format | opcional, formato de valor de enlazado. Si no se especifica, el valor de enlazado será un objeto Date | cadena | año `yyyy`, mes `MM`, día `dd`, hora `HH`, minuto `mm`, segundo `ss` | — |
|
||||
| name | igual que `name` en la entrada nativa | string | — | — |
|
||||
| unlink-panels | desconectar dos date-panels en range-picker | boolean | — | false |
|
||||
|
||||
### Picker Options
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------------- | ---------------------------------------- | -------- | ----------------- | ----------- |
|
||||
| shortcuts | un array de objetos { text, onClick } para establecer las opciones de acceso directo, verifique la tabla debajo | objeto[] | — | — |
|
||||
| disabledDate | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un booleano | función | — | — |
|
||||
| firstDayOfWeek | primera día de semana | Número | 1 to 7 | 7 |
|
||||
|
||||
### Accesos directos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ---------------------------------------- | -------- | ----------------- | ----------- |
|
||||
| text | título del acceso directo | string | — | — |
|
||||
| onClick | la funcion se dispara cuando se hace clic en el acceso directo, con el `vm` como parámetro. Puede modificar el valor del picker emitiendo el evento`pick`. Ejemplo: `vm.$emit('pick', new Date())` | function | — | — |
|
||||
|
||||
### Eventos
|
||||
| Nombre de evento | Descripción | Parámetros |
|
||||
| ---------------- | ---------------------------------------- | ----------------------------- |
|
||||
| change | Se dispara cuando el usuario confirma el valor | valor enlazado del componente |
|
||||
| blur | Se dispara cuando el input pierde el foco | (event: Event) |
|
||||
| focus | Se dispara cuando el input obtiene el foco | (event: Event) |
|
||||
|
||||
### Métodos
|
||||
| Método | Descripción | Parámetros |
|
||||
| ------ | ---------------- | ---------- |
|
||||
| focus | foco en el input | — |
|
||||
|
|
@ -0,0 +1,322 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}],
|
||||
dialogVisible: false,
|
||||
dialogTableVisible: false,
|
||||
dialogFormVisible: false,
|
||||
outerVisible: false,
|
||||
innerVisible: false,
|
||||
centerDialogVisible: false,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '120px'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClose(done) {
|
||||
this.$confirm('Are you sure to close this dialog?')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-box.demo-dialog {
|
||||
.dialog-footer button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.full-image {
|
||||
width: 100%;
|
||||
}
|
||||
.el-dialog__wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
.el-select {
|
||||
width: 300px;
|
||||
}
|
||||
.el-input {
|
||||
width: 300px;
|
||||
}
|
||||
.el-button--text {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Dialog
|
||||
|
||||
Informar a usuarios preservando el estado de la página actual.
|
||||
|
||||
### Uso Básico
|
||||
|
||||
Dialog abre una caja de diálogo, y es bastante personalizable.
|
||||
|
||||
:::demo Establezca el atributo `visible` con un booleano, y el Dialog se muestra cuando es `true`. El diálogo tiene dos partes: `body` y `footer`, este último requiere un slot llamado `footer`. El atributo `title` es opcional (vacío por defecto) y sirve para definir un título. Por último, este ejemplo muestra cómo se utiliza `before-close`.
|
||||
|
||||
|
||||
```html
|
||||
<el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>
|
||||
|
||||
<el-dialog
|
||||
title="Tips"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose">
|
||||
<span>This is a message</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClose(done) {
|
||||
this.$confirm('Are you sure to close this dialog?')
|
||||
.then(_ => {
|
||||
done();
|
||||
})
|
||||
.catch(_ => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
|
||||
`before-close` sólo funciona cuando el usuario hace clic en el icono de cerrar o en el fondo. Si tiene botones que cierran el cuadro de diálogo en el slot llamado `footer`, puede agregar lo que haría `before-close` en el manejador de eventos de los botones.
|
||||
|
||||
:::
|
||||
|
||||
### Personalizaciones
|
||||
|
||||
|
||||
El contenido del Diálogo puede ser cualquier cosa, incluso una tabla o un formulario. Este ejemplo muestra cómo usar Element Table y Form con Dialog
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<!-- Table -->
|
||||
<el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>
|
||||
|
||||
<el-dialog title="Shipping address" :visible.sync="dialogTableVisible">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column property="date" label="Date" width="150"></el-table-column>
|
||||
<el-table-column property="name" label="Name" width="200"></el-table-column>
|
||||
<el-table-column property="address" label="Address"></el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<!-- Form -->
|
||||
<el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>
|
||||
|
||||
<el-dialog title="Shipping address" :visible.sync="dialogFormVisible">
|
||||
<el-form :model="form">
|
||||
<el-form-item label="Promotion name" :label-width="formLabelWidth">
|
||||
<el-input v-model="form.name" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Zones" :label-width="formLabelWidth">
|
||||
<el-select v-model="form.region" placeholder="Please select a zone">
|
||||
<el-option label="Zone No.1" value="shanghai"></el-option>
|
||||
<el-option label="Zone No.2" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}],
|
||||
dialogTableVisible: false,
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '120px'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Diálogo anidado
|
||||
Si un diálogo está anidado en otro diálogo, se requiere append-to-body.
|
||||
|
||||
:::demo Normalmente no recomendamos el uso de Dialog anidado. Si necesita que se muestren múltiples diálogos en la página, puede simplemente aplanarlos para que sean hermanos entre sí. Si debe anidar un Diálogo dentro de otro Diálogo, establezca `append-to-body` del Diálogo anidado como true, y lo añadirá al cuerpo en lugar de su nodo padre, para que ambos Diálogos puedan ser correctamente renderizados.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>
|
||||
|
||||
<el-dialog title="Outter Dialog" :visible.sync="outerVisible">
|
||||
<el-dialog
|
||||
width="30%"
|
||||
title="Inner Dialog"
|
||||
:visible.sync="innerVisible"
|
||||
append-to-body>
|
||||
</el-dialog>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="outerVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
outerVisible: false,
|
||||
innerVisible: false
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::
|
||||
|
||||
### Contenido centrado
|
||||
El contenido de Diálogo se puede centrar.
|
||||
|
||||
:::demo Ajuste `center` en `true` para centrar el encabezado y el pie de página del cuadro de diálogo horizontalmente.
|
||||
|
||||
```html
|
||||
<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>
|
||||
|
||||
<el-dialog
|
||||
title="Warning"
|
||||
:visible.sync="centerDialogVisible"
|
||||
width="30%"
|
||||
center>
|
||||
<span>It should be noted that the content will not be aligned in center by default</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="centerDialogVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
centerDialogVisible: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
`center` sólo afecta al encabezado y pie de página de Dialog. El cuerpo de Dialog puede ser cualquier cosa, así que a veces no se ve bien cuando está centrado. Necesitas escribir algún CSS si deseas centrar el cuerpo también.
|
||||
:::
|
||||
|
||||
:::tip
|
||||
|
||||
Si la variable ligada a `visible` se gestiona en el Vuex store, el `.sync` no puede funcionar correctamente. En este caso, elimine el modificador `.sync`, escuche los eventos de `open` y `close` Dialog, y confirme las mutaciones Vuex para actualizar el valor de esa variable en los manejadores de eventos.
|
||||
|
||||
:::
|
||||
|
||||
### Atributo
|
||||
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| --------------------- | ---------------------------------------- | ---------------------------------------- | ----------------- | ----------- |
|
||||
| visible | visibilidad del Diálogo, apoya el modificador .sync | boolean | — | false |
|
||||
| title | título de Diálogo. También se puede pasar con un slot con nombre (ver la tabla siguiente) | string | — | — |
|
||||
| width | anchura de Diálogo | string | — | 50% |
|
||||
| fullscreen | si el diálogo ocupa pantalla completa | boolean | — | false |
|
||||
| top | valor de `margin-top` del Diálogo CSS | string | — | 15vh |
|
||||
| modal | si se muestra una máscara | boolean | — | true |
|
||||
| modal-append-to-body | si adjuntar modal al elemento de cuerpo. Si es falso,el modal se agregará al elemento principal de Diálogo | boolean | — | true |
|
||||
| append-to-body | Si adjuntar el cuadro de diálogo al cuerpo | boolean | — | false |
|
||||
| lock-scroll | Si el scroll del cuerpo está desactivado mientras se muestra el cuadro de diálogo | boolean | — | true |
|
||||
| custom-class | nombres de clase personalizada para el Diálogo | string | — | — |
|
||||
| close-on-click-modal | si el Diálogo puede ser cerrado haciendo clic en la máscara | boolean | — | true |
|
||||
| close-on-press-escape | si el Diálogo puede ser cerrado presionando ESC | boolean | — | true |
|
||||
| show-close | si mostrar un botón de cerrar | boolean | — | true |
|
||||
| before-close | una devolución de llamada antes de que se cierre el cuadro de diálogo, y evitar cerrar el cuadro de diálogo | función(done) `done`se usa para cerrar el diálog | — | — |
|
||||
| center | si alinear el encabezado y el pie de página en el centro | boolean | — | false |
|
||||
|
||||
### Slots
|
||||
|
||||
| Nombre | Descripcíon |
|
||||
| ------ | -------------------------------------- |
|
||||
| — | contenido de Diálogo |
|
||||
| title | contenido del título de Diálogo |
|
||||
| footer | contenido del pie de página de Diálogo |
|
||||
|
||||
### Eventos
|
||||
| Nombre de Evento | Descripcíon | Parámetros |
|
||||
| ---------------- | ---------------------------------------- | ---------- |
|
||||
| open | se activa cuando se abre el cuadro de Diálogo | — |
|
||||
| close | se dispara cuando el Diálogo se cierra | — |
|
||||
|
|
@ -0,0 +1,348 @@
|
|||
<style>
|
||||
.demo-box {
|
||||
.el-dropdown {
|
||||
vertical-align: top;
|
||||
|
||||
& + .el-dropdown {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.block-col-2 {
|
||||
margin: -24px;
|
||||
|
||||
.el-col {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: 1px solid #eff2f6;
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo-dropdown .demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick() {
|
||||
alert('button click');
|
||||
},
|
||||
handleCommand(command) {
|
||||
this.$message('click on item ' + command);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
## Dropdown
|
||||
Menú conmutable para visualizar listas de enlaces y acciones.
|
||||
|
||||
### Uso básico
|
||||
Pase el ratón por el menú desplegable para desplegarlo y obtener más acciones.
|
||||
|
||||
:::demo El elemento desencadenante se representa con el slot predeterminado, y la parte desplegable se representa con el slot llamado dropdown. Por defecto, la lista desplegable se muestra cuando se pasa el ratón por encima del elemento desencadenante sin necesidad de hacer clic en él.
|
||||
|
||||
```html
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item disabled>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item divided>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<style>
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Elemento detonante
|
||||
|
||||
Utilizando un botón para activar la lista desplegable.
|
||||
|
||||
:::demo Utilice `split-button` para dividir el elemento detonante en un grupo de botones, siendo el botón izquierdo un botón normal y el botón derecho el objetivo real de la detonacion. Si desea insertar una línea de separación entre la posición tres y la posición cuatro, sólo añada un divisor de clase a la posición cuatro.
|
||||
|
||||
```html
|
||||
<el-dropdown>
|
||||
<el-button type="primary">
|
||||
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-dropdown split-button type="primary" @click="handleClick">
|
||||
Dropdown List
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<style>
|
||||
.el-dropdown {
|
||||
vertical-align: top;
|
||||
}
|
||||
.el-dropdown + .el-dropdown {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick() {
|
||||
alert('button click');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Cómo detonar el evento
|
||||
|
||||
Haga clic en el elemento detonante o sobre él.
|
||||
|
||||
:::demo Utilice el atributo `trigger`. Por defecto, es `hover`.
|
||||
|
||||
```html
|
||||
<el-row class="block-col-2">
|
||||
<el-col :span="12">
|
||||
<span class="demonstration">hover to trigger</span>
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<span class="demonstration">click to trigger</span>
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
.demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Ocultamiento del menú
|
||||
|
||||
Use `hide-on-click` para definir si el menú se cierra al hacer clic.
|
||||
|
||||
:::demo El menú predeterminado se cerrará cuando haga clic en los elementos del menú, y se puede desactivar configurando `hide-on-click` como false.
|
||||
|
||||
```html
|
||||
<el-dropdown :hide-on-click="false">
|
||||
<span class="el-dropdown-link">
|
||||
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item disabled>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item divided>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<style>
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Evento command
|
||||
|
||||
Al hacer clic en cada elemento desplegable se detona un evento cuyo parámetro es asignado por cada elemento.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-dropdown @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="a">Action 1</el-dropdown-item>
|
||||
<el-dropdown-item command="b">Action 2</el-dropdown-item>
|
||||
<el-dropdown-item command="c">Action 3</el-dropdown-item>
|
||||
<el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<style>
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409EFF;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleCommand(command) {
|
||||
this.$message('click on item ' + command);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Tamaños
|
||||
|
||||
Además del tamaño predeterminado, el componente Dropdown proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios
|
||||
|
||||
:::demo Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `small` o `mini`.
|
||||
|
||||
```html
|
||||
<el-dropdown split-button type="primary">
|
||||
Default
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item>Action 4</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown size="medium" split-button type="primary">
|
||||
Medium
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item>Action 4</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown size="small" split-button type="primary">
|
||||
Small
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item>Action 4</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown size="mini" split-button type="primary">
|
||||
Mini
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item>Action 4</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Dropdown atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------- | ---------------------------------------- | ------- | ---------------------------------------- | ----------- |
|
||||
| type | tipo de botón de menú, consulte Componente`Button`, sólo funciona cuando `split-button` es true. | string | — | — |
|
||||
| size | tamaño del menú, también funciona en `split-button` | string | medium / small / mini | — |
|
||||
| split-button | si se visualiza un grupo de botones | boolean | — | false |
|
||||
| placement | colocación del menú | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
|
||||
| trigger | cómo detonar | string | hover/click | hover |
|
||||
| hide-on-click | si se oculta el menú después de hacer clic en el elemento | boolean | — | true |
|
||||
| show-timeout | Tiempo de retardo antes de mostrar un dropdown | number | — | 250 |
|
||||
| hide-timeout | Tiempo de retardo antes de ocultar un dropdown | number | — | 150 |
|
||||
|
||||
### Dropdown Eventos
|
||||
| Nombre | Descripción | Parametros |
|
||||
| -------------- | ---------------------------------------- | ---------------------------------------- |
|
||||
| click | si `split-button` es `true`, se activa al hacer clic en el botón izquierdo | — |
|
||||
| command | activa cuando se hace clic en un elemento desplegable | el comando enviado desde el elemento desplegable |
|
||||
| visible-change | se activa cuando aparece/desaparece el desplegable | true cuando aparece, y false de otro modo |
|
||||
|
||||
### Dropdown Menu Item Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ---------------------------------------- | -------------------- | ----------------- | ----------- |
|
||||
| command | un comando que se enviará al `command` callback del Dropdown | string/number/object | — | — |
|
||||
| disabled | si el elemento está desactivado | boolean | — | false |
|
||||
| divided | si se visualiza un divisor | boolean | — | false |
|
||||
|
|
@ -0,0 +1,882 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
var checkAge = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('Please input the age'));
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (!Number.isInteger(value)) {
|
||||
callback(new Error('Please input digits'));
|
||||
} else {
|
||||
if (value < 18) {
|
||||
callback(new Error('Age must be greater than 18'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
var validatePass = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('Please input the password'));
|
||||
} else {
|
||||
if (this.ruleForm2.checkPass !== '') {
|
||||
this.$refs.ruleForm2.validateField('checkPass');
|
||||
}
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validatePass2 = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('Please input the password again'));
|
||||
} else if (value !== this.ruleForm2.pass) {
|
||||
callback(new Error('Two inputs don\'t match!'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
sizeForm: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formInline: {
|
||||
user: '',
|
||||
region: ''
|
||||
},
|
||||
labelPosition: 'right',
|
||||
formLabelAlign: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
},
|
||||
ruleForm: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
ruleForm2: {
|
||||
pass: '',
|
||||
checkPass: '',
|
||||
age: ''
|
||||
},
|
||||
formLabelWidth: '80px',
|
||||
options: [
|
||||
],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
|
||||
],
|
||||
region: [
|
||||
{ required: true, message: 'Please select Activity zone', trigger: 'change' }
|
||||
],
|
||||
date1: [
|
||||
{ type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }
|
||||
],
|
||||
date2: [
|
||||
{ type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }
|
||||
],
|
||||
type: [
|
||||
{ type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }
|
||||
],
|
||||
resource: [
|
||||
{ required: true, message: 'Please select activity resource', trigger: 'change' }
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: 'Please input activity form', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
rules2: {
|
||||
pass: [
|
||||
{ validator: validatePass, trigger: 'blur' }
|
||||
],
|
||||
checkPass: [
|
||||
{ validator: validatePass2, trigger: 'blur' }
|
||||
],
|
||||
age: [
|
||||
{ validator: checkAge, trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
dynamicValidateForm: {
|
||||
domains: [{
|
||||
key: Date.now(),
|
||||
value: ''
|
||||
}],
|
||||
email: ''
|
||||
},
|
||||
numberValidateForm: {
|
||||
age: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
},
|
||||
onRuleFormSubmit() {
|
||||
console.log('onRuleFormSubmit');
|
||||
},
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
},
|
||||
removeDomain(item) {
|
||||
var index = this.dynamicValidateForm.domains.indexOf(item)
|
||||
if (index !== -1) {
|
||||
this.dynamicValidateForm.domains.splice(index, 1)
|
||||
}
|
||||
},
|
||||
addDomain() {
|
||||
this.dynamicValidateForm.domains.push({
|
||||
key: Date.now(),
|
||||
value: ''
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-form.demo-en-US {
|
||||
.el-select .el-input {
|
||||
width: 360px;
|
||||
}
|
||||
.el-form {
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
.line {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-checkbox-group {
|
||||
width: 320px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
&:after, &:before {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
font-size: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.el-checkbox {
|
||||
float: left;
|
||||
width: 160px;
|
||||
padding-right: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
+ .el-checkbox {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.demo-form-normal {
|
||||
width: 480px;
|
||||
}
|
||||
.demo-form-inline {
|
||||
width: auto;
|
||||
|
||||
.el-input {
|
||||
width: 150px;
|
||||
}
|
||||
> * {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.demo-ruleForm {
|
||||
width: 480px;
|
||||
|
||||
.el-select .el-input {
|
||||
width: 360px;
|
||||
}
|
||||
}
|
||||
.demo-dynamic {
|
||||
.el-input {
|
||||
margin-right: 10px;
|
||||
width: 270px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Form
|
||||
|
||||
Form consiste en `input`, `radio`, `select`, `checkbox`, etcétera. Con el formulario, usted puede recopilar, verificar y enviar datos.
|
||||
|
||||
### Form básico
|
||||
|
||||
Incluye todo tipo de entradas, tales como `input`, `select`, `radio` y `checkbox`.
|
||||
|
||||
:::demo En cada componente `form`, necesita un campo `form-item` para que sea el contenedor del item.
|
||||
|
||||
```html
|
||||
<el-form ref="form" :model="form" label-width="120px">
|
||||
<el-form-item label="Activity name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone">
|
||||
<el-select v-model="form.region" placeholder="please select your zone">
|
||||
<el-option label="Zone one" value="shanghai"></el-option>
|
||||
<el-option label="Zone two" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity time">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker type="fixed-time" placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="Instant delivery">
|
||||
<el-switch v-model="form.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity type">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="Online activities" name="type"></el-checkbox>
|
||||
<el-checkbox label="Promotion activities" name="type"></el-checkbox>
|
||||
<el-checkbox label="Offline activities" name="type"></el-checkbox>
|
||||
<el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Resources">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="Sponsor"></el-radio>
|
||||
<el-radio label="Venue"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity form">
|
||||
<el-input type="textarea" v-model="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">Create</el-button>
|
||||
<el-button>Cancel</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) reglamenta que
|
||||
> <i>Cuando sólo hay un campo de entrada de texto de una sola línea en un formulario, el agente usuario debe aceptar <b>Enter</b> en ese campo como una solicitud para enviar el formulario.</i>
|
||||
|
||||
Para prevenir este comportamiento, puede agregar `@submit.native.prevent` on `<el-form>`.
|
||||
:::
|
||||
|
||||
### Formulario inline
|
||||
|
||||
Cuando el espacio vertical es limitado y la forma es relativamente simple, puede ponerlo en una unica línea.
|
||||
|
||||
:::demo Establezca el atributo `inline` como `true` y el formulario sera inline.
|
||||
|
||||
```html
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||
<el-form-item label="Approved by">
|
||||
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone">
|
||||
<el-select v-model="formInline.region" placeholder="Activity zone">
|
||||
<el-option label="Zone one" value="shanghai"></el-option>
|
||||
<el-option label="Zone two" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">Query</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formInline: {
|
||||
user: '',
|
||||
region: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Alineamiento
|
||||
|
||||
Dependiendo de su diseño, hay varias maneras diferentes de alinear el elemento de la etiqueta.
|
||||
|
||||
:::demo El atributo `label-position` decide cómo se alinean las etiquetas, puede estar `top` o `left`. Cuando se establece en `top`, las etiquetas se colocarán en la parte superior del campo de formulario.
|
||||
|
||||
```html
|
||||
<el-radio-group v-model="labelPosition" size="small">
|
||||
<el-radio-button label="left">Left</el-radio-button>
|
||||
<el-radio-button label="right">Right</el-radio-button>
|
||||
<el-radio-button label="top">Top</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div style="margin: 20px;"></div>
|
||||
<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
|
||||
<el-form-item label="Name">
|
||||
<el-input v-model="formLabelAlign.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone">
|
||||
<el-input v-model="formLabelAlign.region"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity form">
|
||||
<el-input v-model="formLabelAlign.type"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
labelPosition: 'right',
|
||||
formLabelAlign: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Validación
|
||||
|
||||
El componente `form` le permite verificar sus datos, ayudándole a encontrar y corregir errores.
|
||||
|
||||
:::demo Sólo tiene que añadir el atributo `rules` en el componente `Form`, pasar las reglas de validación y establecer el atributo `prop` para `Form-Item` como una clave específica que necesita ser validada. Ver más información en [async-validator](https://github.com/yiminghe/async-validator).
|
||||
|
||||
```html
|
||||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
|
||||
<el-form-item label="Activity name" prop="name">
|
||||
<el-input v-model="ruleForm.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone" prop="region">
|
||||
<el-select v-model="ruleForm.region" placeholder="Activity zone">
|
||||
<el-option label="Zone one" value="shanghai"></el-option>
|
||||
<el-option label="Zone two" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity time" required>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date1">
|
||||
<el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date2">
|
||||
<el-time-picker type="fixed-time" placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="Instant delivery" prop="delivery">
|
||||
<el-switch v-model="ruleForm.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity type" prop="type">
|
||||
<el-checkbox-group v-model="ruleForm.type">
|
||||
<el-checkbox label="Online activities" name="type"></el-checkbox>
|
||||
<el-checkbox label="Promotion activities" name="type"></el-checkbox>
|
||||
<el-checkbox label="Offline activities" name="type"></el-checkbox>
|
||||
<el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Resources" prop="resource">
|
||||
<el-radio-group v-model="ruleForm.resource">
|
||||
<el-radio label="Sponsorship"></el-radio>
|
||||
<el-radio label="Venue"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity form" prop="desc">
|
||||
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">Reset</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ruleForm: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
|
||||
],
|
||||
region: [
|
||||
{ required: true, message: 'Please select Activity zone', trigger: 'change' }
|
||||
],
|
||||
date1: [
|
||||
{ type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }
|
||||
],
|
||||
date2: [
|
||||
{ type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }
|
||||
],
|
||||
type: [
|
||||
{ type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }
|
||||
],
|
||||
resource: [
|
||||
{ required: true, message: 'Please select activity resource', trigger: 'change' }
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: 'Please input activity form', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Reglas personalizadas de validación
|
||||
|
||||
Este ejemplo muestra cómo personalizar sus propias reglas de validación para finalizar una verificación de contraseña de dos pasos.
|
||||
|
||||
:::demo Aquí utilizamos el `status-icon` para reflejar el resultado de la validación como un icono.
|
||||
|
||||
```html
|
||||
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
|
||||
<el-form-item label="Password" prop="pass">
|
||||
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Confirm" prop="checkPass">
|
||||
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Age" prop="age">
|
||||
<el-input v-model.number="ruleForm2.age"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('ruleForm2')">Submit</el-button>
|
||||
<el-button @click="resetForm('ruleForm2')">Reset</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
var checkAge = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('Please input the age'));
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (!Number.isInteger(value)) {
|
||||
callback(new Error('Please input digits'));
|
||||
} else {
|
||||
if (value < 18) {
|
||||
callback(new Error('Age must be greater than 18'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
var validatePass = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('Please input the password'));
|
||||
} else {
|
||||
if (this.ruleForm2.checkPass !== '') {
|
||||
this.$refs.ruleForm2.validateField('checkPass');
|
||||
}
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validatePass2 = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('Please input the password again'));
|
||||
} else if (value !== this.ruleForm2.pass) {
|
||||
callback(new Error('Two inputs don\'t match!'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
ruleForm2: {
|
||||
pass: '',
|
||||
checkPass: '',
|
||||
age: ''
|
||||
},
|
||||
rules2: {
|
||||
pass: [
|
||||
{ validator: validatePass, trigger: 'blur' }
|
||||
],
|
||||
checkPass: [
|
||||
{ validator: validatePass2, trigger: 'blur' }
|
||||
],
|
||||
age: [
|
||||
{ validator: checkAge, trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Eliminar o agregar validaciones dinamicamente
|
||||
|
||||
:::demo Además de pasar todas las reglas de validación al mismo tiempo en el componente `form`, también puede pasar las reglas de validación o borrar reglas en un único campo de formulario de forma dinámica.
|
||||
|
||||
```html
|
||||
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">
|
||||
<el-form-item
|
||||
prop="email"
|
||||
label="Email"
|
||||
:rules="[
|
||||
{ required: true, message: 'Please input email address', trigger: 'blur' },
|
||||
{ type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }
|
||||
]"
|
||||
>
|
||||
<el-input v-model="dynamicValidateForm.email"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-for="(domain, index) in dynamicValidateForm.domains"
|
||||
:label="'Domain' + index"
|
||||
:key="domain.key"
|
||||
:prop="'domains.' + index + '.value'"
|
||||
:rules="{
|
||||
required: true, message: 'domain can not be null', trigger: 'blur'
|
||||
}"
|
||||
>
|
||||
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('dynamicValidateForm')">Submit</el-button>
|
||||
<el-button @click="addDomain">New domain</el-button>
|
||||
<el-button @click="resetForm('dynamicValidateForm')">Reset</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dynamicValidateForm: {
|
||||
domains: [{
|
||||
key: 1,
|
||||
value: ''
|
||||
}],
|
||||
email: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
},
|
||||
removeDomain(item) {
|
||||
var index = this.dynamicValidateForm.domains.indexOf(item);
|
||||
if (index !== -1) {
|
||||
this.dynamicValidateForm.domains.splice(index, 1);
|
||||
}
|
||||
},
|
||||
addDomain() {
|
||||
this.dynamicValidateForm.domains.push({
|
||||
key: Date.now(),
|
||||
value: ''
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Validación numerica
|
||||
|
||||
::: demo La validacion numerica necesita un modificador `.number` añadido en el enlace `v-model` de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.
|
||||
|
||||
```html
|
||||
<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
|
||||
<el-form-item
|
||||
label="age"
|
||||
prop="age"
|
||||
:rules="[
|
||||
{ required: true, message: 'age is required'},
|
||||
{ type: 'number', message: 'age must be a number'}
|
||||
]"
|
||||
>
|
||||
<el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('numberValidateForm')">Submit</el-button>
|
||||
<el-button @click="resetForm('numberValidateForm')">Reset</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
numberValidateForm: {
|
||||
age: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
|
||||
Cuando un `el-form-item` está anidado en otro `el-form-item`, su ancho de etiqueta será 0. Si es necesario, puede establecer el ancho de etiqueta en ese `el-form-item`.
|
||||
|
||||
:::
|
||||
|
||||
### Tamaño del control
|
||||
|
||||
Todos los componentes de un formulario heredan su atributo `size`. De manera similar, FormItem también tiene un atributo `size`.
|
||||
|
||||
::: demo Aún así, puede ajustar el `size` de cada componente si no desea que herede su tamaño de From o FormItem.
|
||||
|
||||
```html
|
||||
<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
|
||||
<el-form-item label="Activity name">
|
||||
<el-input v-model="sizeForm.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone">
|
||||
<el-select v-model="sizeForm.region" placeholder="please select your zone">
|
||||
<el-option label="Zone one" value="shanghai"></el-option>
|
||||
<el-option label="Zone two" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity time">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker type="fixed-time" placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity type">
|
||||
<el-checkbox-group v-model="sizeForm.type">
|
||||
<el-checkbox-button label="Online activities" name="type"></el-checkbox-button>
|
||||
<el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Resources">
|
||||
<el-radio-group v-model="sizeForm.resource" size="medium">
|
||||
<el-radio border label="Sponsor"></el-radio>
|
||||
<el-radio border label="Venue"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item size="large">
|
||||
<el-button type="primary" @click="onSubmit">Create</el-button>
|
||||
<el-button>Cancel</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sizeForm: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Form Atributos
|
||||
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------------- | ---------------------------------------- | ------- | --------------------- | ----------- |
|
||||
| model | Datos del componente | object | — | — |
|
||||
| rules | Reglas de validación | object | — | — |
|
||||
| inline | Si el form es inline | boolean | — | false |
|
||||
| label-position | Posicion de la etiqueta | string | left / right / top | right |
|
||||
| label-width | ancho de la etiqueta, y todos los form items directos descendientes heredarán este valor | string | — | — |
|
||||
| label-suffix | sufijo de la etiqueta | string | — | — |
|
||||
| show-message | si mostrar o no el mensaje de error | boolean | — | true |
|
||||
| inline-message | si desea visualizar el mensaje de error inline con la posición del form item | boolean | — | false |
|
||||
| status-icon | si desea visualizar un icono que indique el resultado de la validación | boolean | — | false |
|
||||
| size | el tamaño de los componentes en este form | string | medium / small / mini | - |
|
||||
|
||||
### Form Metodos
|
||||
|
||||
| Metodo | Descripción | Parametros |
|
||||
| ------------- | ---------------------------------------- | ---------------------------------------- |
|
||||
| validate | el método para validar todo el formulario. Devuelve una promesa si se omite el return | Function(callback: Function(boolean)) |
|
||||
| validateField | el método para validar un determinado form item | Function(prop: string, callback: Function(errorMessage: string)) |
|
||||
| resetFields | restablece todos los campos y elimina el resultado de validación | — |
|
||||
| clearValidate | limpia mensaje de validación para todos los campos | -
|
||||
|
||||
### Form-Item Atributos
|
||||
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------------- | ---------------------------------------- | ------- | ----------------------------------- | ----------- |
|
||||
| prop | un key de `model`. En el uso del método validate and resetFields, el atributo es obligatorio. | string | keys of model that passed to `form` | |
|
||||
| label | etiqueta | string | — | — |
|
||||
| label-width | ancho de la etiqueta, e.g. '50px' | string | — | — |
|
||||
| required | si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite. | string | — | false |
|
||||
| rules | reglas de validacion del form | object | — | — |
|
||||
| error | mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente. | string | — | — |
|
||||
| show-message | si mostrar o no el mensaje de error | boolean | — | true |
|
||||
| inline-message | mensaje de validación estilo inline | boolean | — | false |
|
||||
| size | Tamaño de los componentes en este form item | string | medium / small / mini | - |
|
||||
|
||||
### Form-Item Slot
|
||||
| Nombre | Descripción |
|
||||
| ------ | ------------------------ |
|
||||
| — | contenido del Form Item |
|
||||
| label | contenido de la etiqueta |
|
||||
|
||||
### Form-Item Metodo
|
||||
|
||||
| Metodo | Descripción | Parametros |
|
||||
| ---------- | ---------------------------------------- | ---------- |
|
||||
| resetField | restablecer campo actual y eliminar resultado de validación | — |
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
## Internacionalización
|
||||
|
||||
El idioma predeterminado de Element es el chino. Si se desea utilizar otro idioma, será necesario realizar alguna configuración de i18n. En su fichero de entrada, si está importando Element por completo:
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import ElementUI from 'element-ui'
|
||||
import locale from 'element-ui/lib/locale/lang/en'
|
||||
|
||||
Vue.use(ElementUI, { locale })
|
||||
```
|
||||
|
||||
O si está importando Element a petición:
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import { Button, Select } from 'element-ui'
|
||||
import lang from 'element-ui/lib/locale/lang/en'
|
||||
import locale from 'element-ui/lib/locale'
|
||||
|
||||
// configure language
|
||||
locale.use(lang)
|
||||
|
||||
// import components
|
||||
Vue.component(Button.name, Button)
|
||||
Vue.component(Select.name, Select)
|
||||
```
|
||||
|
||||
El paquete de idioma chino se importa por defecto, incluso si se esta usando otro idioma. Pero con `NormalModuleReplacementPlugin` proporcionado por el webpack puede reemplazar la localización predeterminada:
|
||||
|
||||
webpack.config.js
|
||||
```javascript
|
||||
{
|
||||
plugins: [
|
||||
new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Compatible con `vue-i18n@5.x`
|
||||
|
||||
Element es compatible con [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), lo que facilita aún más la conmutación multilingüe.
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import Element from 'element-ui'
|
||||
import enLocale from 'element-ui/lib/locale/lang/en'
|
||||
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
Vue.use(Element)
|
||||
|
||||
Vue.config.lang = 'zh-cn'
|
||||
Vue.locale('zh-cn', zhLocale)
|
||||
Vue.locale('en', enLocale)
|
||||
```
|
||||
|
||||
## Compatible con otros plugins i18n
|
||||
Es posible que Element no sea compatible con otros plugins i18n que no sean vue-i18n, pero puede personalizar la forma en que Element procesa i18n.
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
import enLocale from 'element-ui/lib/locale/lang/en'
|
||||
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
|
||||
|
||||
Vue.use(Element, {
|
||||
i18n: function (path, options) {
|
||||
// ...
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Compatible con `vue-i18n@6.x`
|
||||
|
||||
Necesita manejarlo manualmente para ser compatible con `6.x`.
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import enLocale from 'element-ui/lib/locale/lang/en'
|
||||
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
|
||||
const messages = {
|
||||
en: {
|
||||
message: 'hello',
|
||||
...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)`
|
||||
},
|
||||
zh: {
|
||||
message: '你好',
|
||||
...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)`
|
||||
}
|
||||
}
|
||||
// Create VueI18n instance with options
|
||||
const i18n = new VueI18n({
|
||||
locale: 'en', // set locale
|
||||
messages, // set locale messages
|
||||
})
|
||||
|
||||
Vue.use(Element, {
|
||||
i18n: (key, value) => i18n.t(key, value)
|
||||
})
|
||||
|
||||
new Vue({ i18n }).$mount('#app')
|
||||
```
|
||||
|
||||
## Personalización de i18n en componentes bajo petición
|
||||
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
import DatePicker from 'element/lib/date-picker'
|
||||
import VueI18n from 'vue-i18n'
|
||||
|
||||
import enLocale from 'element-ui/lib/locale/lang/en'
|
||||
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
|
||||
import ElementLocale from 'element-ui/lib/locale'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
Vue.use(DatePicker)
|
||||
|
||||
const messages = {
|
||||
en: {
|
||||
message: 'hello',
|
||||
...enLocale
|
||||
},
|
||||
zh: {
|
||||
message: '你好',
|
||||
...zhLocale
|
||||
}
|
||||
}
|
||||
// Create VueI18n instance with options
|
||||
const i18n = new VueI18n({
|
||||
locale: 'en', // set locale
|
||||
messages, // set locale messages
|
||||
})
|
||||
|
||||
ElementLocale.i18n((key, value) => i18n.t(key, value))
|
||||
```
|
||||
|
||||
## Importar via CDN
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
<script src="//unpkg.com/element-ui"></script>
|
||||
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
|
||||
|
||||
<script>
|
||||
ELEMENT.locale(ELEMENT.lang.en)
|
||||
</script>
|
||||
```
|
||||
|
||||
Compatible con `vue-i18n`
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
|
||||
<script src="//unpkg.com/element-ui"></script>
|
||||
<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
|
||||
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
|
||||
|
||||
<script>
|
||||
Vue.locale('en', ELEMENT.lang.en)
|
||||
Vue.locale('zh-cn', ELEMENT.lang.zhCN)
|
||||
</script>
|
||||
```
|
||||
|
||||
Actualmente Element está disponible en los siguientes idiomas:
|
||||
<ul class="language-list">
|
||||
<li>Simplified Chinese (zh-CN)</li>
|
||||
<li>English (en)</li>
|
||||
<li>German (de)</li>
|
||||
<li>Portuguese (pt)</li>
|
||||
<li>Spanish (es)</li>
|
||||
<li>Danish (da)</li>
|
||||
<li>French (fr)</li>
|
||||
<li>Norwegian (nb-NO)</li>
|
||||
<li>Traditional Chinese (zh-TW)</li>
|
||||
<li>Italian (it)</li>
|
||||
<li>Korean (ko)</li>
|
||||
<li>Japanese (ja)</li>
|
||||
<li>Dutch (nl)</li>
|
||||
<li>Vietnamese (vi)</li>
|
||||
<li>Russian (ru-RU)</li>
|
||||
<li>Turkish (tr-TR)</li>
|
||||
<li>Brazilian Portuguese (pt-br)</li>
|
||||
<li>Farsi (fa)</li>
|
||||
<li>Thai (th)</li>
|
||||
<li>Indonesian (id)</li>
|
||||
<li>Bulgarian (bg)</li>
|
||||
<li>Polish (pl)</li>
|
||||
<li>Finnish (fi)</li>
|
||||
<li>Swedish (sv-SE)</li>
|
||||
<li>Greek (el)</li>
|
||||
<li>Slovak (sk)</li>
|
||||
<li>Catalunya (ca)</li>
|
||||
<li>Czech (cz)</li>
|
||||
<li>Ukrainian (ua)</li>
|
||||
<li>Turkmen (tk)</li>
|
||||
<li>Tamil (ta)</li>
|
||||
<li>Latvian (lv)</li>
|
||||
<li>Afrikaans (af-ZA)</li>
|
||||
<li>Estonian (ee)</li>
|
||||
<li>Slovenian (sl)</li>
|
||||
<li>Arabic (ar)</li>
|
||||
<li>Hebrew (he)</li>
|
||||
</ul>
|
||||
|
||||
Si su idioma de destino no está incluido, puede contribuir: simplemente añada [aqui](https://github.com/ElemeFE/element/tree/master/src/locale/lang) otra configuración de idioma y cree un pull request.
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<script>
|
||||
var iconList = require('examples/icon.json');
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
icons: iconList
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-icon .source > i {
|
||||
color: #8492a6;
|
||||
margin: 0 20px;
|
||||
font-size: 1.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.demo-icon .source > button {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.page-component .content > ul.icon-list {
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
border: solid 1px #eaeefb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.icon-list li {
|
||||
float: left;
|
||||
width: 16.66%;
|
||||
text-align: center;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
transition: color .15s linear;
|
||||
|
||||
border-right: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-right: -1px;
|
||||
margin-bottom: -1px;
|
||||
|
||||
@utils-vertical-center;
|
||||
|
||||
& span {
|
||||
display: inline-block;
|
||||
line-height: normal;
|
||||
vertical-align: middle;
|
||||
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
|
||||
color: #99a9bf;
|
||||
}
|
||||
& i {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
margin-bottom: 15px;
|
||||
color: #8492a6;
|
||||
}
|
||||
&:hover {
|
||||
color: rgb(92, 182, 255);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Icon
|
||||
|
||||
Element proporciona un conjunto de iconos propios.
|
||||
|
||||
### Uso básico
|
||||
|
||||
Simplemente asigna el nombre de la clase a `el-icon-iconName`.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<i class="el-icon-edit"></i>
|
||||
<i class="el-icon-share"></i>
|
||||
<i class="el-icon-delete"></i>
|
||||
<el-button type="primary" icon="el-icon-search">Search</el-button>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
### Iconos
|
||||
|
||||
<ul class="icon-list">
|
||||
<li v-for="name in icons" :key="name">
|
||||
<span>
|
||||
<i :class="'el-icon-' + name"></i>
|
||||
{{'el-icon-' + name}}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num1: 1,
|
||||
num2: 1,
|
||||
num3: 5,
|
||||
num4: 1,
|
||||
num5: 1,
|
||||
num6: 1,
|
||||
num7: 1,
|
||||
num8: 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-box.demo-input-number {
|
||||
.el-input-number + .el-input-number {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## InputNumber
|
||||
|
||||
Input de valores numéricos con un rango personalizable.
|
||||
|
||||
### Uso básico
|
||||
|
||||
:::demo Vincule una variable con `v-model` en el elemento <el-input-number> y estará listo.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num1: 1
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
console.log(value)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Disabled
|
||||
|
||||
:::demo El atributo `disabled` acepta un valor `boolean`, y si el valor es `true`, el componente queda deshabilitado. Si sólo necesita controlar el valor dentro de un rango, puede añadir un atributo `min` para establecer el valor mínimo y un valor `max` para establecer el valor máximo. Por defecto, el valor mínimo es `0`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-input-number v-model="num2" :disabled="true"></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num2: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Steps
|
||||
|
||||
Le permite definir el nivel de incremento de los saltos.
|
||||
|
||||
:::demo Añada el atributo `step` para establecer el salto.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-input-number v-model="num3" :step="2"></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num3: 5
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Tamaño
|
||||
|
||||
Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `small` o `mini`.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-input-number v-model="num4"></el-input-number>
|
||||
<el-input-number size="medium" v-model="num5"></el-input-number>
|
||||
<el-input-number size="small" v-model="num6"></el-input-number>
|
||||
<el-input-number size="mini" v-model="num7"></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num4: 1,
|
||||
num5: 1,
|
||||
num6: 1,
|
||||
num7: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Posición de los controles
|
||||
|
||||
:::demo Establezca `controls-position` para decidir la posición de los botones de control.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
num8: 1
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos
|
||||
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ----------------- | ---------------------------------------- | ------- | ----------------- | ----------- |
|
||||
| value | valor vinculado | number | — | — |
|
||||
| min | el valor mínimo permitido | number | — | 0 |
|
||||
| max | el valor maximo permitido | number | — | `Infinity` |
|
||||
| step | incremento (salto) | number | — | 1 |
|
||||
| size | tamaño del componente | string | large/small | — |
|
||||
| disabled | si el componente esta deshabilitado | boolean | — | false |
|
||||
| controls | si se activan los botones de control | boolean | — | true |
|
||||
| debounce | retardo de rebote al escribir, en milisegundos | number | — | 300 |
|
||||
| controls-position | posición de los botones de control | string | right | - |
|
||||
| name | lo mismo que `name` en un input nativo | string | — | — |
|
||||
| label | texto de la etiqueta | string | — | — |
|
||||
### Eventos
|
||||
|
||||
| Nombre | Descripción | Parámetros |
|
||||
| ------ | ---------------------------------------- | ------------------ |
|
||||
| change | se produce cuando el valor cambia | value after change |
|
||||
| blur | se produce cuando el componente pierde el foco | (event: Event) |
|
||||
| focus | se produce cuando el componente obtiene el foco | (event: Event) |
|
||||
|
||||
### Métodos
|
||||
| Método | Descripción | Parámetro |
|
||||
| ------ | ------------------------------------ | --------- |
|
||||
| focus | coloca el foco en el elemento actual | - |
|
||||
|
|
@ -0,0 +1,700 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
links: [],
|
||||
input: '',
|
||||
input1: '',
|
||||
input2: '',
|
||||
input21: '',
|
||||
input22: '',
|
||||
input23: '',
|
||||
input3: '',
|
||||
input4: '',
|
||||
input5: '',
|
||||
input6: '',
|
||||
input7: '',
|
||||
input8: '',
|
||||
input9: '',
|
||||
textarea: '',
|
||||
textarea2: '',
|
||||
textarea3: '',
|
||||
select: '',
|
||||
state1: '',
|
||||
state2: '',
|
||||
state3: '',
|
||||
state4: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadAll() {
|
||||
return [
|
||||
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
|
||||
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
|
||||
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
|
||||
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
|
||||
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
|
||||
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
|
||||
{ "value": "babel", "link": "https://github.com/babel/babel" }
|
||||
];
|
||||
},
|
||||
querySearch(queryString, cb) {
|
||||
var links = this.links;
|
||||
var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
|
||||
|
||||
cb(results);
|
||||
},
|
||||
querySearchAsync(queryString, cb) {
|
||||
var links = this.links;
|
||||
var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
|
||||
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
cb(results);
|
||||
}, 3000 * Math.random());
|
||||
},
|
||||
createStateFilter(queryString) {
|
||||
return (state) => {
|
||||
return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
handleSelect(item) {
|
||||
console.log(item);
|
||||
},
|
||||
handleIconClick(ev) {
|
||||
console.log(ev);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.links = this.loadAll();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-input.demo-en-US {
|
||||
.el-select .el-input {
|
||||
width: 130px;
|
||||
}
|
||||
.el-input {
|
||||
width: 180px;
|
||||
}
|
||||
.el-textarea {
|
||||
width: 414px;
|
||||
}
|
||||
.el-input-group {
|
||||
width: 100%;
|
||||
}
|
||||
.demo-input-size {
|
||||
.el-input {
|
||||
vertical-align: top;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
}
|
||||
.demo-input-suffix {
|
||||
padding: 10px;
|
||||
}
|
||||
.demo-input-suffix .el-input {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.demo-input-label {
|
||||
display: inline-block;
|
||||
width: 130px;
|
||||
}
|
||||
.input-with-select .el-input-group__prepend {
|
||||
background-color: #fff;
|
||||
}
|
||||
.demo-autocomplete {
|
||||
text-align: center;
|
||||
|
||||
.sub-title {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
}
|
||||
|
||||
.el-col:not(:last-child) {
|
||||
border-right: 1px solid rgba(224,230,237,0.50);
|
||||
}
|
||||
|
||||
.el-autocomplete {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-autocomplete-suggestion.my-autocomplete {
|
||||
li {
|
||||
line-height: normal;
|
||||
padding: 7px *;
|
||||
|
||||
.name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.addr {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
.highlighted .addr {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Input
|
||||
|
||||
Ingresa datos usando el ratón o teclado.
|
||||
|
||||
### Uso básico
|
||||
|
||||
::: demo
|
||||
|
||||
```html
|
||||
<el-input placeholder="Please input" v-model="input"></el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Disabled
|
||||
|
||||
::: demo Deshabilite el Input con el atributo `disabled`.
|
||||
|
||||
```html
|
||||
<el-input
|
||||
placeholder="Please input"
|
||||
v-model="input1"
|
||||
:disabled="true">
|
||||
</el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input1: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Input con icono
|
||||
|
||||
Añada un icono para indicar el tipo de Input.
|
||||
|
||||
::: demo Para añadir iconos en el Input, puede utilizar los atributos `prefix-icon` y `suffix-icon` . Además, los slots con nombre `prefix` y `suffix` también funcionan.
|
||||
|
||||
```html
|
||||
<div class="demo-input-suffix">
|
||||
<span class="demo-input-label">Using attributes</span>
|
||||
<el-input
|
||||
placeholder="Pick a date"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input2">
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="Type something"
|
||||
prefix-icon="el-icon-search"
|
||||
v-model="input21">
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="demo-input-suffix">
|
||||
<span class="demo-input-label">Using slots</span>
|
||||
<el-input
|
||||
placeholder="Pick a date"
|
||||
v-model="input22">
|
||||
<i slot="suffix" class="el-input__icon el-icon-date"></i>
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="Type something"
|
||||
v-model="input23">
|
||||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.demo-input-label {
|
||||
display: inline-block;
|
||||
width: 130px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input2: '',
|
||||
input21: '',
|
||||
input22: '',
|
||||
input23: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Textarea
|
||||
|
||||
Redimensiona para introducir varias líneas de información de texto. Agrege el atributo `type="textarea"` para cambiar el `input` al tipo nativo `textarea`.
|
||||
|
||||
::: demo Controle la altura ajustando el prop `rows`.
|
||||
|
||||
```html
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
placeholder="Please input"
|
||||
v-model="textarea">
|
||||
</el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
textarea: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Textarea tamaño automatico
|
||||
|
||||
El ajuste del prop `autosize` en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se puede proporcionar opciones en un objeto para autodimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.
|
||||
|
||||
::: demo
|
||||
|
||||
```html
|
||||
<el-input
|
||||
type="textarea"
|
||||
autosize
|
||||
placeholder="Please input"
|
||||
v-model="textarea2">
|
||||
</el-input>
|
||||
<div style="margin: 20px 0;"></div>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 4}"
|
||||
placeholder="Please input"
|
||||
v-model="textarea3">
|
||||
</el-input>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
textarea2: '',
|
||||
textarea3: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Mezclando elementos con input
|
||||
|
||||
Añade un elemento antes o después del input, generalmente una etiqueta o un botón.
|
||||
|
||||
::: demo Utilice el `slot` para seleccionar si el elemento se colocara antes (prepend) o después (append) del Input.
|
||||
|
||||
```html
|
||||
<div>
|
||||
<el-input placeholder="Please input" v-model="input3">
|
||||
<template slot="prepend">Http://</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-input placeholder="Please input" v-model="input4">
|
||||
<template slot="append">.com</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-input placeholder="Please input" v-model="input5" class="input-with-select">
|
||||
<el-select v-model="select" slot="prepend" placeholder="Select">
|
||||
<el-option label="Restaurant" value="1"></el-option>
|
||||
<el-option label="Order No." value="2"></el-option>
|
||||
<el-option label="Tel" value="3"></el-option>
|
||||
</el-select>
|
||||
<el-button slot="append" icon="el-icon-search"></el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.el-select .el-input {
|
||||
width: 110px;
|
||||
}
|
||||
.input-with-select .el-input-group__prepend {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input3: '',
|
||||
input4: '',
|
||||
input5: '',
|
||||
select: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Tamaño
|
||||
|
||||
::: demo Añada el atributo `size` para cambiar el tamaño del Input. Además del tamaño predeterminado, hay otras tres opciones: `large`, `small` y `mini`.
|
||||
|
||||
```html
|
||||
<div class="demo-input-size">
|
||||
<el-input
|
||||
placeholder="Please Input"
|
||||
v-model="input6">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="medium"
|
||||
placeholder="Please Input"
|
||||
v-model="input7">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="small"
|
||||
placeholder="Please Input"
|
||||
v-model="input8">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="mini"
|
||||
placeholder="Please Input"
|
||||
v-model="input9">
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input6: '',
|
||||
input7: '',
|
||||
input8: '',
|
||||
input9: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Autocompletado
|
||||
|
||||
Puede obtener algunas sugerencias basadas en la entrada actual.
|
||||
|
||||
::: demo El componente Autocomplete proporciona sugerencias de entrada. El atributo `fetch-suggestions` es un método que devuelve la entrada sugerida. En este ejemplo, `querySearch(queryString, cb)` devuelve las sugerencias al componente mediante `cb(data)` cuando están listas.
|
||||
|
||||
```html
|
||||
<el-row class="demo-autocomplete">
|
||||
<el-col :span="12">
|
||||
<div class="sub-title">list suggestions when activated</div>
|
||||
<el-autocomplete
|
||||
class="inline-input"
|
||||
v-model="state1"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="Please Input"
|
||||
@select="handleSelect"
|
||||
></el-autocomplete>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="sub-title">list suggestions on input</div>
|
||||
<el-autocomplete
|
||||
class="inline-input"
|
||||
v-model="state2"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="Please Input"
|
||||
:trigger-on-focus="false"
|
||||
@select="handleSelect"
|
||||
></el-autocomplete>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
links: [],
|
||||
state1: '',
|
||||
state2: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
querySearch(queryString, cb) {
|
||||
var links = this.links;
|
||||
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
|
||||
// call callback function to return suggestions
|
||||
cb(results);
|
||||
},
|
||||
createFilter(queryString) {
|
||||
return (link) => {
|
||||
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
loadAll() {
|
||||
return [
|
||||
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
|
||||
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
|
||||
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
|
||||
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
|
||||
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
|
||||
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
|
||||
{ "value": "babel", "link": "https://github.com/babel/babel" }
|
||||
];
|
||||
},
|
||||
handleSelect(item) {
|
||||
console.log(item);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.links = this.loadAll();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Template personalizado
|
||||
|
||||
Personalice cómo se muestran las sugerencias.
|
||||
|
||||
:::demo Utilice `scoped slot` para personalizar los elementos de sugerencias. En el scope, puede acceder al objeto de sugerencia mediante la clave `item`.
|
||||
|
||||
```html
|
||||
<el-autocomplete
|
||||
popper-class="my-autocomplete"
|
||||
v-model="state3"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="Please input"
|
||||
@select="handleSelect">
|
||||
<i
|
||||
class="el-icon-edit el-input__icon"
|
||||
slot="suffix"
|
||||
@click="handleIconClick">
|
||||
</i>
|
||||
<template slot-scope="props">
|
||||
<div class="value">{{ props.item.value }}</div>
|
||||
<span class="link">{{ props.item.link }}</span>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
|
||||
<style>
|
||||
.my-autocomplete {
|
||||
li {
|
||||
line-height: normal;
|
||||
padding: 7px;
|
||||
|
||||
.value {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.link {
|
||||
font-size: 12px;
|
||||
color: #b4b4b4;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
links: [],
|
||||
state3: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
querySearch(queryString, cb) {
|
||||
var links = this.links;
|
||||
var results = queryString ? link.filter(this.createFilter(queryString)) : links;
|
||||
// call callback function to return suggestion objects
|
||||
cb(results);
|
||||
},
|
||||
createFilter(queryString) {
|
||||
return (link) => {
|
||||
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
loadAll() {
|
||||
return [
|
||||
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
|
||||
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
|
||||
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
|
||||
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
|
||||
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
|
||||
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
|
||||
{ "value": "babel", "link": "https://github.com/babel/babel" }
|
||||
];
|
||||
},
|
||||
handleSelect(item) {
|
||||
console.log(item);
|
||||
},
|
||||
handleIconClick(ev) {
|
||||
console.log(ev);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.links = this.loadAll();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Búsqueda remota
|
||||
|
||||
Búsqueda de datos desde el servidor.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-autocomplete
|
||||
v-model="state4"
|
||||
:fetch-suggestions="querySearchAsync"
|
||||
placeholder="Please input"
|
||||
@select="handleSelect"
|
||||
></el-autocomplete>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
links: [],
|
||||
state4: '',
|
||||
timeout: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadAll() {
|
||||
return [
|
||||
{ "value": "vue", "link": "https://github.com/vuejs/vue" },
|
||||
{ "value": "element", "link": "https://github.com/ElemeFE/element" },
|
||||
{ "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
|
||||
{ "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
|
||||
{ "value": "vuex", "link": "https://github.com/vuejs/vuex" },
|
||||
{ "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
|
||||
{ "value": "babel", "link": "https://github.com/babel/babel" }
|
||||
];
|
||||
},
|
||||
querySearchAsync(queryString, cb) {
|
||||
var links = this.links;
|
||||
var results = queryString ? links.filter(this.createFilter(queryString)) : links;
|
||||
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
cb(results);
|
||||
}, 3000 * Math.random());
|
||||
},
|
||||
createFilter(queryString) {
|
||||
return (link) => {
|
||||
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
};
|
||||
},
|
||||
handleSelect(item) {
|
||||
console.log(item);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.links = this.loadAll();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Input atributos
|
||||
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------- | ---------------------------------------- | ---------------- | -------------------------------- | ----------- |
|
||||
| type | tipo de input | string | text / textarea | text |
|
||||
| value | valor enlazado | string / number | — | — |
|
||||
| maxlength | el maximo para el largo del texto | number | — | — |
|
||||
| minlength | el mínimo para el largo del texto | number | — | — |
|
||||
| placeholder | placeholder del Input | string | — | — |
|
||||
| disabled | si esta deshabilitado | boolean | — | false |
|
||||
| size | tamaño del input, esto no funciona cuando `type` no es textarea | string | medium / small / mini | — |
|
||||
| prefix-icon | clase del icono de prefijo | string | — | — |
|
||||
| suffix-icon | clase del icono de sufijo | string | — | — |
|
||||
| rows | número de filas, sólo funciona cuando `type` es 'textarea'. | number | — | 2 |
|
||||
| autosize | si textarea tiene una altura adaptativa, sólo funciona cuando el`type` es 'textarea'. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 } | boolean / object | — | false |
|
||||
| auto-complete | igual que `auto-complete` en el input nativo | string | on/off | off |
|
||||
| name | igual que `name` en el input nativo | string | — | — |
|
||||
| readonly | igual que `readonly` en el input nativo | boolean | — | false |
|
||||
| max | igual que `max` en el input nativo | — | — | — |
|
||||
| min | igual que `min` en el input nativo | — | — | — |
|
||||
| step | igual que `step` en el input nativo | — | — | — |
|
||||
| resize | control para el dimensionamiento | string | none, both, horizontal, vertical | — |
|
||||
| autofocus | igual que `autofocus` en el input nativo | boolean | — | false |
|
||||
| form | igual que `form` en el input nativo | string | — | — |
|
||||
| label | texto de la etiqueta | string | — | — |
|
||||
|
||||
### Input slots
|
||||
|
||||
| Nombre | Descripción |
|
||||
| ------- | ------------------------------------ |
|
||||
| prefix | contenido como prefijo del input |
|
||||
| suffix | contenido como sufijo del input |
|
||||
| prepend | contenido antes del input |
|
||||
| append | contenido a añadir después del input |
|
||||
|
||||
### Input eventos
|
||||
|
||||
| Nombre | Descripción | Parametros |
|
||||
| ------ | ---------------------------------------- | ------------------------- |
|
||||
| blur | Se dispara cuando se pierde el foco | (event: Event) |
|
||||
| focus | Se dispara cuando se obtiene el foco | (event: Event) |
|
||||
| change | se activa cuando cambia el valor de entrada | (value: string \| number) |
|
||||
|
||||
### Autocomplete Atributos
|
||||
|
||||
Atributo | Descripción | Tipo | Opciones | Por defecto
|
||||
|----| ----| ----| ---- | -----|
|
||||
|placeholder| el placeholder del Autocomplete| string | — | — |
|
||||
|disabled | si el Autocompete esta deshabilitado | boolean | — | false|
|
||||
| valueKey | nombre del campo del objeto de sugerencia del input para la visualización | string | — | value |
|
||||
|icon | nombre del icono | string | — | — |
|
||||
|value | valor enlazado | string | — | — |
|
||||
| debounce | retardo al escribir, en milisegundos | number | — | 300 |
|
||||
|fetch-suggestions | un método para obtener las sugerencias del input. Cuando las sugerencias estén listas, invocar `callback(data:[])` para devolverlas a Autocomplete | Function(queryString, callback) | — | — |
|
||||
| popper-class | nombre personalizado de clase para el dropdown de autocomplete | string | — | — |
|
||||
| trigger-on-focus | si se deben mostrar sugerencias cuando el input obtiene el foco | boolean | — | true |
|
||||
| on-icon-click | funcion que se invoca cuando se hace click en el icono | function | — | — |
|
||||
| name | igual que `name` en el input nativo | string | — | — |
|
||||
| select-when-unmatched | si se emite un evento `select` al pulsar enter cuando no hay coincidencia de Autocomplete | boolean | — | false |
|
||||
| label | texto de la etiqueta | string | — | — |
|
||||
|
||||
### Autocomplete slots
|
||||
|
||||
| Nombre | Descripción |
|
||||
| ------- | ------------------------------------ |
|
||||
| prefix | contenido como prefijo del input |
|
||||
| suffix | contenido como sufijo del input |
|
||||
| prepend | contenido antes del input |
|
||||
| append | contenido a añadir después del input |
|
||||
|
||||
### Autocomplete Eventos
|
||||
|
||||
| Nombre | Descripción | Parametros |
|
||||
| ------ | ---------------------------------------- | ---------------------------------------- |
|
||||
| select | se dispara cuando se hace click a una sugerencia | sugerencia en la que se está haciendo click |
|
||||
|
||||
### Metodo
|
||||
| Metodo | Descripción | Parametros |
|
||||
| ------ | ----------------------------- | ---------- |
|
||||
| focus | coloca el foco en el elemento | — |
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
## Instalación
|
||||
|
||||
### npm
|
||||
Instalar mediante npm es la forma recomendada ya que se integra facilmente con [webpack](https://webpack.js.org/).
|
||||
|
||||
```shell
|
||||
npm i element-ui -S
|
||||
```
|
||||
|
||||
### CDN
|
||||
Obtenga la última versión desde [unpkg.com/element-ui](https://unpkg.com/element-ui/) , e importe el JavaScript y los archivos CSS en su página.
|
||||
|
||||
```html
|
||||
<!-- import CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
<!-- import JavaScript -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
```
|
||||
|
||||
##Tip
|
||||
Recomendamos a nuestros usuarios congelar la versión de Elemet cuando usas un CDN. Por favor, refiérase a [unpkg.com](https://unpkg.com) para más información.
|
||||
|
||||
|
||||
### Hello world
|
||||
Si esta usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- import CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<el-button @click="visible = true">Button</el-button>
|
||||
<el-dialog :visible.sync="visible" title="Hello world">
|
||||
<p>Try Element</p>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</body>
|
||||
<!-- import Vue before Element -->
|
||||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||
<!-- import JavaScript -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: function() {
|
||||
return { visible: false }
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
```
|
||||
Si esta usando npm y desea combinarlo con webpack, por favor continue a la siguiente página: Quick Start
|
||||
|
||||
|
|
@ -0,0 +1,390 @@
|
|||
<style>
|
||||
.demo-layout {
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Layout
|
||||
|
||||
Rápido y facilmente crea un layout básico con 24 columnas.
|
||||
|
||||
### Layout básico
|
||||
|
||||
Crea un layout básico usando columnas.
|
||||
|
||||
:::**Demo** Con `row` y `col`, puede facilmente manipular el layout usando el atributo `span`.
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Espaciado de columnas
|
||||
|
||||
El espaciado de columnas está soportado.
|
||||
|
||||
:::**Demo** Row provee el atributo `gutter` para especificar el espacio entre columnas y su valor por defecto es 0.
|
||||
```html
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Layout híbrido
|
||||
|
||||
Crea un complejo layout híbrido combinando el básico de 1/24 columnas.
|
||||
|
||||
:::**Demo**
|
||||
```html
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Offset de columnas
|
||||
|
||||
Puedes especificar offsets para las columnas.
|
||||
|
||||
:::**Demo** Puedes especificar el offset para una columna mediante el atributo `offset` de Col.
|
||||
|
||||
```html
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Alineación
|
||||
|
||||
Usa flex layout para un alineamiento flexible de columnas.
|
||||
|
||||
:::**Demo** Puede habilitar flex layout asignando el atributo `type` a 'flex', y definir el layout de elementos hijos asignando el atributo `justify` con los valores start, center, end, space-between o space-around.
|
||||
```html
|
||||
<el-row type="flex" class="row-bg">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="end">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="space-between">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="space-around">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Responsive Layout
|
||||
|
||||
Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm, md, lg y xl.
|
||||
|
||||
:::**Demo**
|
||||
```html
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
|
||||
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
|
||||
</el-row>
|
||||
|
||||
<style>
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Clases útiles para ocultar elementos
|
||||
|
||||
Adicionalmente, Element provee una serie de clases para ocultar elementos dadas ciertas condiciones. Estas clases pueden se agregadas a cualquier elemento del DOM o un elemento propio. Necesita importar el siguiente archivo CSS para usar estas clases:
|
||||
|
||||
```js
|
||||
import 'element-ui/lib/theme-chalk/display.css';
|
||||
```
|
||||
|
||||
Las clases son:
|
||||
- `hidden-xs-only` - oculto en viewports extra pequeños solamente
|
||||
- `hidden-sm-only` - oculto en viewports pequeños solamente
|
||||
- `hidden-sm-and-down` - oculto en viewports pequeños y menores
|
||||
- `hidden-sm-and-up` - oculto en viewports pequeños y superiores
|
||||
- `hidden-md-only` - oculto en viewports medios solamente
|
||||
- `hidden-md-and-down` - oculto en viewports medios y menores
|
||||
- `hidden-md-and-up` - oculto en viewports medios y mayores
|
||||
- `hidden-lg-only` - ocultos en viewports grandes solamente
|
||||
- `hidden-lg-and-down` - ocultos en viewports grandes y menores
|
||||
- `hidden-lg-and-up` - ocultos en viewports grandes y superiores
|
||||
- `hidden-xl-only` - oculto en viewports extra grandes solamente
|
||||
|
||||
### Atributos Row
|
||||
|
||||
| Atributos | Descripción | Tipo | Valores aceptados | Valor por defecto |
|
||||
| --------- | ---------------------------------------- | ------ | ---------------------------------------- | ----------------- |
|
||||
| gutter | espaciado de la grilla | number | — | 0 |
|
||||
| type | modo del layout , puedes usar flex, funciona en navegadores modernos | string | — | — |
|
||||
| justify | alineación horizontal del layout flex | string | start/end/center/space-around/space-between | start |
|
||||
| align | alineación vertical del layout flex | string | top/middle/bottom | top |
|
||||
| tag | tag de elemento propio | string | * | div |
|
||||
|
||||
### Atributos Col
|
||||
|
||||
| Atributos | Descripción | Tipo | Valores aceptados | Valor por defecto |
|
||||
| --------- | ---------------------------------------- | ---------------------------------------- | ----------------- | ----------------- |
|
||||
| span | número de columnas que abarca la cuadrícula | number | — | 24 |
|
||||
| offset | especific espacio en el lado izquierdo de la grill | number | — | 0 |
|
||||
| push | número de columnas que la grilla se mueve hacia la derecha | number | — | 0 |
|
||||
| pull | número de columnas que la grilla se mueve hacia la izquierda | number | — | 0 |
|
||||
| xs | `<768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — |
|
||||
| sm | `≥768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — |
|
||||
| md | `≥992px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — |
|
||||
| lg | `≥1200px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — |
|
||||
| xl | `≥1920px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — |
|
||||
| tag | tag de elemento propio | string | * | div |
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,260 @@
|
|||
<style>
|
||||
.demo-loading .el-table {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}],
|
||||
loading: true,
|
||||
loading2: true,
|
||||
fullscreenLoading: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
openFullScreen() {
|
||||
this.fullscreenLoading = true;
|
||||
setTimeout(() => {
|
||||
this.fullscreenLoading = false;
|
||||
}, 2000);
|
||||
},
|
||||
openFullScreen2() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
setTimeout(() => {
|
||||
loading.close();
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Cargando
|
||||
|
||||
Se muestra la animación mientras se cargan los datos.
|
||||
|
||||
### Cargando dentro de un contenedor
|
||||
|
||||
Muestra una animación en un contenedor (como en una tabla) mientras se cargan los datos.
|
||||
|
||||
:::demo Element provee dos maneras para invocar el componente de Cargando: por directiva y por servicio. Para la directiva personalizada `v-loading`, solo necesitas enlazarlo a un valor `Boolean`. Por defecto, la máscara de carga se agregará al elemento donde se usa la directiva. Al agregar el modificador `body`, la máscara se agrega al elemento body.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="Fecha"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="Nombre"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="Dirección">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}],
|
||||
loading: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Personalización
|
||||
|
||||
Puede personalizar el texto de carga, spinner de carga y color de fondo.
|
||||
|
||||
:::demo Agrege el atributo `element-loading-text` al elemento en el que `v-loading` está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, `element-loading-spinner` y `element-loading-background` son para personalizar el nombre de la clase del spinner y el color de fondo.
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
v-loading="loading2"
|
||||
element-loading-text="Loading..."
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="Fecha"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="Nombre"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="Dirección">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}],
|
||||
loading2: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Cargando a pantalla completa
|
||||
|
||||
Muestra una animación de pantalla completa mientras se cargan los datos
|
||||
|
||||
:::demo Cuando se utiliza como una directiva, la carga a pantalla completa requiere el modificador `fullscreen`, y este puede ser agregado al `body`. En este caso, si desea deshabilitar el desplazamiento en `body`, puede agregar otro modificador `lock`. Cuando se utiliza como un servicio, el componente puede ser mostrado a pantalla completa por defecto.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="openFullScreen"
|
||||
v-loading.fullscreen.lock="fullscreenLoading">
|
||||
Como directiva
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="openFullScreen2">
|
||||
Como servicio
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fullscreenLoading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openFullScreen() {
|
||||
this.fullscreenLoading = true;
|
||||
setTimeout(() => {
|
||||
this.fullscreenLoading = false;
|
||||
}, 2000);
|
||||
},
|
||||
openFullScreen2() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
setTimeout(() => {
|
||||
loading.close();
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Servicio
|
||||
|
||||
Puede invocar el componente con un servicio. Importe el servicio:
|
||||
|
||||
```javascript
|
||||
import { Loading } from 'element-ui';
|
||||
```
|
||||
Invocar:
|
||||
```javascript
|
||||
Loading.service(options);
|
||||
```
|
||||
El parámetro `options` es la configuración del componente, y estos detalles pueden ser encontrados en la siguiente table. `LoadingService` devuelve una instancia del componente, y puede cerrarlo invocando el método `close`:
|
||||
```javascript
|
||||
let loadingInstance = Loading.service(options);
|
||||
loadingInstance.close();
|
||||
```
|
||||
Tenga en cuenta que, en este caso, el componente a pantalla completa es una instancia única. Si un nuevo componente de pantalla completa es invocado antes de que se cierre la existente, se devolverá la instancia existente en lugar de crear la otra instancia:
|
||||
```javascript
|
||||
let loadingInstance1 = Loading.service({ fullscreen: true });
|
||||
let loadingInstance2 = Loading.service({ fullscreen: true });
|
||||
console.log(loadingInstance1 === loadingInstance2); // true
|
||||
```
|
||||
Llamar al método `close` en cualquiera de estas puede cerrarlo.
|
||||
|
||||
Si Element es importado completamente, un método global `$loading` puede ser registrado a Vue.prototype. Puede invocarlo como esto: `this.$loading(options)`, y también devuelve una instancia del componente.
|
||||
|
||||
### Options
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ----------- | ---------------------------------------- | ------------- | ----------------- | ------------- |
|
||||
| target | el nodo del DOM que el componente debe cubrir. Acepta un objecto DOM o una cadena. Si está es una cadena, este será pasado a `document.querySelector` para obtener el correspondiente nodo del DOM | object/string | — | document.body |
|
||||
| body | igual que el modificador `body` de `v-loading` | boolean | — | false |
|
||||
| fullscreen | igual que el modificador `fullscreen` de `v-loading` | boolean | — | true |
|
||||
| lock | igual que el modificador `lock` de `v-loading` | boolean | — | false |
|
||||
| text | texto de cargando que se muestra debajo del spinner | string | — | — |
|
||||
| spinner | nombre de clase del spinner personalizado | string | — | — |
|
||||
| background | color de fondo de la máscara | string | — | — |
|
||||
| customClass | nombre de clase personalizada para el componente | string | — | — |
|
||||
|
|
@ -0,0 +1,320 @@
|
|||
<style>
|
||||
.demo-box.demo-menu {
|
||||
.el-menu-demo {
|
||||
padding-left: 55px;
|
||||
}
|
||||
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||||
width: 240px;
|
||||
min-height: 400px;
|
||||
}
|
||||
.line {
|
||||
height: 1px;
|
||||
background-color: #e0e6ed;
|
||||
margin: 35px -24px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.tac {
|
||||
text-align: center;
|
||||
|
||||
.el-menu-vertical-demo {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeIndex: '1',
|
||||
activeIndex2: '1',
|
||||
isCollapse: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## NavMenu
|
||||
|
||||
Menú que provee la navegación para tu sitio.
|
||||
|
||||
### Top bar
|
||||
|
||||
Top bar NavMenu puede ser usado en distinto escenarios.
|
||||
|
||||
:::**Demo** Por defecto el menú es vertical, pero puede hacerlo horizontal asignando a la propiedad `mode` el valor 'horizontal'. Además, puede utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee `background-color`, `text-color` y `active-text-color` para customizar los colores.
|
||||
|
||||
```html
|
||||
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item index="1">Processing Center</el-menu-item>
|
||||
<el-submenu index="2">
|
||||
<template slot="title">Workspace</template>
|
||||
<el-menu-item index="2-1">item one</el-menu-item>
|
||||
<el-menu-item index="2-2">item two</el-menu-item>
|
||||
<el-menu-item index="2-3">item three</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
|
||||
</el-menu>
|
||||
<div class="line"></div>
|
||||
<el-menu
|
||||
:default-active="activeIndex2"
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
background-color="#545c64"
|
||||
text-color="#fff"
|
||||
active-text-color="#ffd04b">
|
||||
<el-menu-item index="1">Processing Center</el-menu-item>
|
||||
<el-submenu index="2">
|
||||
<template slot="title">Workspace</template>
|
||||
<el-menu-item index="2-1">item one</el-menu-item>
|
||||
<el-menu-item index="2-2">item two</el-menu-item>
|
||||
<el-menu-item index="2-3">item three</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeIndex: '1',
|
||||
activeIndex2: '1'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSelect(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Side bar
|
||||
|
||||
NavMenu vertical con sub-menús.
|
||||
|
||||
:::**Demo** Puede utilizar el componente `el-menu-item-group` para crear un grupo de menú, y el nombre del grupo estará determinado por la propiedad `title` o la propiedad `slot`.
|
||||
|
||||
```html
|
||||
<el-row class="tac">
|
||||
<el-col :span="12">
|
||||
<h5>Default colors</h5>
|
||||
<el-menu
|
||||
default-active="2"
|
||||
class="el-menu-vertical-demo"
|
||||
@open="handleOpen"
|
||||
@close="handleClose">
|
||||
<el-submenu index="1">
|
||||
<template slot="title">
|
||||
<i class="el-icon-location"></i>
|
||||
<span>Navigator One</span>
|
||||
</template>
|
||||
<el-menu-item-group title="Group One">
|
||||
<el-menu-item index="1-1">item one</el-menu-item>
|
||||
<el-menu-item index="1-2">item one</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="Group Two">
|
||||
<el-menu-item index="1-3">item three</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="1-4">
|
||||
<template slot="title">item four</template>
|
||||
<el-menu-item index="1-4-1">item one</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="2">
|
||||
<i class="el-icon-menu"></i>
|
||||
<span>Navigator Two</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span>Navigator Three</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<h5>Custom colors</h5>
|
||||
<el-menu
|
||||
default-active="2"
|
||||
class="el-menu-vertical-demo"
|
||||
@open="handleOpen"
|
||||
@close="handleClose"
|
||||
background-color="#545c64"
|
||||
text-color="#fff"
|
||||
active-text-color="#ffd04b">
|
||||
<el-submenu index="1">
|
||||
<template slot="title">
|
||||
<i class="el-icon-location"></i>
|
||||
<span>Navigator One</span>
|
||||
</template>
|
||||
<el-menu-item-group title="Group One">
|
||||
<el-menu-item index="1-1">item one</el-menu-item>
|
||||
<el-menu-item index="1-2">item one</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="Group Two">
|
||||
<el-menu-item index="1-3">item three</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="1-4">
|
||||
<template slot="title">item four</template>
|
||||
<el-menu-item index="1-4-1">item one</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="2">
|
||||
<i class="el-icon-menu"></i>
|
||||
<span>Navigator Two</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span>Navigator Three</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Collapse
|
||||
|
||||
NavMenu vertical puede ser colapsado.
|
||||
|
||||
:::**Demo**
|
||||
```html
|
||||
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
|
||||
<el-radio-button :label="false">expand</el-radio-button>
|
||||
<el-radio-button :label="true">collapse</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
|
||||
<el-submenu index="1">
|
||||
<template slot="title">
|
||||
<i class="el-icon-location"></i>
|
||||
<span slot="title">Navigator One</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<span slot="title">Group One</span>
|
||||
<el-menu-item index="1-1">item one</el-menu-item>
|
||||
<el-menu-item index="1-2">item two</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="Group Two">
|
||||
<el-menu-item index="1-3">item three</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="1-4">
|
||||
<span slot="title">item four</span>
|
||||
<el-menu-item index="1-4-1">item one</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="2">
|
||||
<i class="el-icon-menu"></i>
|
||||
<span slot="title">Navigator Two</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">Navigator Three</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
<style>
|
||||
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||||
width: 200px;
|
||||
min-height: 400px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isCollapse: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos Menu
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ----------------- | ---------------------------------------- | ------- | --------------------- | ----------- |
|
||||
| mode | modo de presentación del menú | string | horizontal / vertical | vertical |
|
||||
| collapse | si el menú está colapsado (solo en modo vertical) | boolean | — | false |
|
||||
| background-color | color de fondo del menú (formato hexadecimal) | string | — | #ffffff |
|
||||
| text-color | color de texto del menú (formato hexadecimal) | string | — | #2d2f33 |
|
||||
| active-text-color | color de text del menu-item activo (formato hexadecimal) | string | — | #409EFF |
|
||||
| default-active | índice del menu-item activo | string | — | — |
|
||||
| default-openeds | arreglo que contiene las llaves del sub-menus activo | Array | — | — |
|
||||
| unique-opened | si solo un submenu puede ser activo | boolean | — | false |
|
||||
| menu-trigger | como dispara eventos sub-menus, solo funciona cuando `mode` es 'horizontal' | string | — | hover |
|
||||
| router | si el modo `vue-router` está activado. Si es verdader, índice será usado como 'path' para activar la ruta | boolean | — | false |
|
||||
|
||||
### Métodos Menu
|
||||
| Nombre de evento | Descripción | Parámetros |
|
||||
| ---------------- | ----------------------------- | -------------------------------------- |
|
||||
| open | abre un sub-menu específico | index: índice del sub-menu para abrir |
|
||||
| close | cierra un sub-menu específico | index: índice del sub-menu para cerrar |
|
||||
|
||||
### Eventos Menu
|
||||
| Nombre de evento | Descripción | Parámetros |
|
||||
| ---------------- | ---------------------------------------- | ---------------------------------------- |
|
||||
| select | callback ejecutado cuando el menú es activado | index: índice del menú activado, indexPath: index path del menú activado |
|
||||
| open | callback ejecutado cuando sub-menu se expande | index: índice del sub-menu expandido, indexPath: index path del sub-menu expandido |
|
||||
| close | callback ejecutado cuando sub-menu colapsa | index: índice del sub-menu colapsado, indexPath: index path del menú colapsado |
|
||||
|
||||
### Eventos Menu-Item
|
||||
| Nombre de evento | Descripción | Parámetros |
|
||||
| ---------------- | ---------------------------------------- | -------------------------- |
|
||||
| click | callback ejecutado cuando se hace click sobre menu-item | el: instancia de menu-item |
|
||||
|
||||
### Atributos SubMenu
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ------------------- | ------ | ----------------- | ----------- |
|
||||
| index | identificador único | string | — | — |
|
||||
|
||||
### Atributos Menu-Item
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ------------------- | ------ | ----------------- | ----------- |
|
||||
| index | identificador único | string | — | — |
|
||||
| route | Objeto Vue Router | object | — | — |
|
||||
|
||||
### Atributos Menu-Group
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ---------------- | ------ | ----------------- | ----------- |
|
||||
| title | título del grupo | string | — | — |
|
||||
|
|
@ -0,0 +1,403 @@
|
|||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$alert('This is a message', 'Title', {
|
||||
confirmButtonText: 'OK',
|
||||
callback: action => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: `action: ${ action }`
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
open2() {
|
||||
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
setTimeout(() => {
|
||||
this.$message({
|
||||
message: 'Delete completed',
|
||||
type: 'success'
|
||||
});
|
||||
}, 200);
|
||||
}).catch(() => {
|
||||
setTimeout(() => {
|
||||
this.$message({
|
||||
message: 'Delete canceled',
|
||||
type: 'info'
|
||||
});
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$prompt('Please input your email', 'Tips', {
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
|
||||
inputErrorMessage: 'Invalid Email'
|
||||
}).then(({ value }) => {
|
||||
setTimeout(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'Your email is:' + value
|
||||
});
|
||||
}, 200);
|
||||
}).catch(() => {
|
||||
setTimeout(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'Input canceled'
|
||||
});
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
const h = this.$createElement;
|
||||
this.$msgbox({
|
||||
title: 'Message',
|
||||
message: h('p', null, [
|
||||
h('span', null, 'Message can be '),
|
||||
h('i', { style: 'color: teal' }, 'VNode')
|
||||
]),
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true;
|
||||
instance.confirmButtonText = 'Loading...';
|
||||
setTimeout(() => {
|
||||
done();
|
||||
setTimeout(() => {
|
||||
instance.confirmButtonLoading = false;
|
||||
}, 300);
|
||||
}, 3000);
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
}
|
||||
}).then(action => {
|
||||
setTimeout(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'action: ' + action
|
||||
});
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
|
||||
open5() {
|
||||
this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
|
||||
dangerouslyUseHTMLString: true
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'warning',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'Delete completed'
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'Delete canceled'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## MessageBox
|
||||
|
||||
Un conjunto de cajas modales simulando un sistema de message box, principalmente para alertar informacion, confirmar operaciones y mostrar mensajes de aviso.
|
||||
:::tip
|
||||
Por diseño los message box nos proveen de simulaciones de sistemas como los componentes `alert`, `confirm` y `prompt`，entonces su contenido debería ser simple. para contenido mas complejo, por favor utilize el componente Dialog.
|
||||
:::
|
||||
|
||||
### Alert
|
||||
|
||||
Alert interrumpe las operaciones realizadas hasta que el usuario confirme la alerta.
|
||||
|
||||
:::demo Desplegar una alerta utilizando el metodo `$alert`. Simula el sistema `alert`, y no puede ser cerrado al presionar la tecla ESC o al dar click fuera de la caja. En este ejemplo, dos parametros son recibidos `message` y `title`. Vale la pena mencionar que cuando la caja es cerrada, regresa un objeto `Promise` para su procesamiento posteriormente. Si no estas seguro si el navegador soporta `Promise`, deberias importar una libreria de terceros de polyfill o utilizar callbacks.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open">Click to open the Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$alert('This is a message', 'Title', {
|
||||
confirmButtonText: 'OK',
|
||||
callback: action => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: `action: ${ action }`
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Confirm
|
||||
|
||||
Confirm es utilizado para preguntar al usuario y recibir una confirmacion.
|
||||
|
||||
|
||||
:::demo Llamando al metodo `$confirm` para abrir el componente confirm, y simula el sistema `confirm`. Tambien podemos personalizar a gran medida el componente Message Box al mandar un tercer atributo llamado `options` que es literalmente un objeto. El atributo `type` indica el tipo de mensaje, y su valor puede ser `success`, `error`, `info` y `warning`. Se debe tener en cuenta que el segundo atributo `title` debe ser de tipo `string`, y si es de tipo `object`, sera manejado como el atributo `options`. Aqui utilizamos `Promise` para manejar posteriormente el proceso.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open2">Click to open the Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open2() {
|
||||
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'Delete completed'
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'Delete canceled'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Prompt
|
||||
|
||||
Prompt es utilizado cuando se requiere entrada de informacion del usuario.
|
||||
|
||||
:::demo Llamando al metodo `$prompt` desplegamos el componente prompt, y simula el sistema `prompt`.Puedes utilizar el parametro `inputPattern` para especificar tu propio patron RegExp. Utiliza el parametro `inputValidator` para especificar el metodo de validacion, y debería regresar un valor de tipo `Boolean` o `String`. Al regresar `false` o `String` significa que la validacion a fallado, y la cadena regresada se usara como `inputErrorMessage`. Ademas, puedes perzonalizar el atributo placeholder del input box con el parametro `inputPlaceholder`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open3">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open3() {
|
||||
this.$prompt('Please input your e-mail', 'Tip', {
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
|
||||
inputErrorMessage: 'Invalid Email'
|
||||
}).then(value => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'Your email is:' + value
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'Input canceled'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Personalización
|
||||
|
||||
Puede ser personalizado para mostrar diversos contenidos.
|
||||
|
||||
:::demo Los tres metodos mencionados anteriormente son un rempaquetado del metodo `$msgbox`. En este ejemplo se realiza una llamada al metodo `$msgbox` directamente utilizando el atributo `showCancelButton`, el cual es utilizado para indicar si el boton cancelar es mostrado en pantalla. Ademas podemos utilizar el atributo `cancelButtonClass` para agregar un estilo personalizado y el atributo `cancelButtonText` para personalizar el texto del boton (el boton de confirmacion tambien cuenta con estos campos, y podra encontrar una lista completa de estos atributos al final de esta documentacion). Este ejemplo tambien utiliza el atributo `beforeClose`. Es un metodo que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecucion detendra el cierre de la instancia. Tiene tres parametros: `action`, `instance` y `done`. Al utilizarla te permite manipular la instancia antes de que sea cerrada, e.g. activando `loading` para el boton de confirmacion; puede invocar el metodo `done` para cerrar la instancia del componente MessageBox (si el metodo `done` no es llamado dentro del atributo `beforeClose`, la instancia no podra cerrarse).
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open4">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open4() {
|
||||
const h = this.$createElement;
|
||||
this.$msgbox({
|
||||
title: 'Message',
|
||||
message: h('p', null, [
|
||||
h('span', null, 'Message can be '),
|
||||
h('i', { style: 'color: teal' }, 'VNode')
|
||||
]),
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true;
|
||||
instance.confirmButtonText = 'Loading...';
|
||||
setTimeout(() => {
|
||||
done();
|
||||
setTimeout(() => {
|
||||
instance.confirmButtonLoading = false;
|
||||
}, 300);
|
||||
}, 3000);
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
}
|
||||
}).then(action => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'action: ' + action
|
||||
});
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Utiliza cadenas HTML
|
||||
`message` soporta cadenas HTML.
|
||||
|
||||
:::demo Establezca el valor de `dangerouslyUseHTMLString` a true y `message` sera tratado como una cadena HTML.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open5">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open5() {
|
||||
this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
|
||||
dangerouslyUseHTMLString: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::warning
|
||||
Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegurece que el contendio de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
|
||||
:::
|
||||
|
||||
### Centered content
|
||||
El contenido del componente MessageBox puede ser centrado.
|
||||
|
||||
:::demo Establecer `center` a `true` centrara el contenido
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="open6">Click to open Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open6() {
|
||||
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'warning',
|
||||
center: true
|
||||
}).then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'Delete completed'
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'Delete canceled'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Metodos Globales
|
||||
|
||||
Si Element fue importado completamente, agregara los siguientes metodos globales para Vue.prototype: `$msgbox`, `$alert`, `$confirm` y `$prompt`. Asi que en una instancia de Vue puedes llamar el metodo `MessageBox` como lo que hicimos en esta pagina. Los parametros son:
|
||||
- `$msgbox(options)`
|
||||
- `$alert(message, title, options)` or `$alert(message, options)`
|
||||
- `$confirm(message, title, options)` or `$confirm(message, options)`
|
||||
- `$prompt(message, title, options)` or `$prompt(message, options)`
|
||||
|
||||
### Importación local
|
||||
|
||||
Si prefieres importar `MessageBox` cuando lo necesites (on demand):
|
||||
|
||||
```javascript
|
||||
import { MessageBox } from 'element-ui';
|
||||
```
|
||||
|
||||
Los metodos correspondientes: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` y `MessageBox.prompt`. Los parametros son los mismos que los anteriores.
|
||||
|
||||
### Opciones
|
||||
|
||||
| Atributo | Descripción | Tipo | Valores Permitidos | Por defecto |
|
||||
| ------------------------ | ---------------------------------------- | ---------------------------------------- | -------------------------------- | ---------------------------------------- |
|
||||
| title | titulo del componente MessageBox | string | — | — |
|
||||
| message | contenido del componente MessageBox | string | — | — |
|
||||
| dangerouslyUseHTMLString | utilizado para que `message` sea tratado como una cadena HTML | boolean | — | false |
|
||||
| type | tipo de mensaje , utilizado para mostrar el icono | string | success / info / warning / error | — |
|
||||
| customClass | nombre de la clase personzalida para el componente MessageBox | string | — | — |
|
||||
| callback | MessageBox callback al cerrar si no desea utilizar Promise | function(action), donde la accion puede ser 'confirm' o 'cancel', e `instance` es la instancia del componente MessageBox. Puedes acceder a los metodos y atributos de esa instancia | — | — |
|
||||
| beforeClose | callback llamado antes de cerrar el componente MessageBox, y previene que el componente MessageBox se cierre | function(action, instance, done), donde `action` pueden ser 'confirm' o 'cancel'; `instance` es la instancia del componente MessageBox, Puedes acceder a los metodos y atributos de esa instancia; `done` es para cerrar la instancia | — | — |
|
||||
| lockScroll | utilizado para bloquear el desplazamiento del contenido del MessageBox prompts | boolean | — | true |
|
||||
| showCancelButton | utlizado para mostrar un boton cancelar | boolean | — | false (true cuando es llamado con confirm y prompt) |
|
||||
| showConfirmButton | utlizado para mostrar un boton confirmar | boolean | — | true |
|
||||
| cancelButtonText | contenido de texto del boton cancelar | string | — | Cancel |
|
||||
| confirmButtonText | contenido de texto del boton confirmar | string | — | OK |
|
||||
| cancelButtonClass | nombre de la clase personalizada del boton cancelar | string | — | — |
|
||||
| confirmButtonClass | nombre de la clase personalizada del boton confirmar | string | — | — |
|
||||
| closeOnClickModal | utilizado para que que el componenteMessageBox pueda ser cerrado al dar click en la mascara | boolean | — | true (false cuando es llamado con alert) |
|
||||
| closeOnPressEscape | utilizado para que que el componenteMessageBox pueda ser cerrado al presionar la tecla ESC | boolean | — | true (false cuando es llamado con alert) |
|
||||
| closeOnHashChange | utilizado para cerra el componente MessageBox cuando hash cambie | boolean | — | true |
|
||||
| showInput | utilizado para mostrar el componente input | boolean | — | false (true cuando es llamado con prompt) |
|
||||
| inputPlaceholder | placeholder para el componente input | string | — | — |
|
||||
| inputType | tipo del componente input | string | — | text |
|
||||
| inputValue | valor inicial del componente input | string | — | — |
|
||||
| inputPattern | regexp del componente input | regexp | — | — |
|
||||
| inputValidator | funcion de validacion del componente input. Debe regresar un valor de tipo boolean o string. Si regresa un valor tipo string, sera asignado a inputErrorMessage | function | — | — |
|
||||
| inputErrorMessage | mensaje de error cuando la validacion falla | string | — | Illegal input |
|
||||
| center | utilizado para alinear el contenido al centro | boolean | — | false |
|
||||
| roundButton | utilizado para redondear el boton | boolean | — | false |
|
||||
|
|
@ -0,0 +1,302 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
methods: {
|
||||
open() {
|
||||
this.$message('This is a message.');
|
||||
},
|
||||
|
||||
openVn() {
|
||||
const h = this.$createElement;
|
||||
this.$message({
|
||||
message: h('p', null, [
|
||||
h('span', null, 'Message can be '),
|
||||
h('i', { style: 'color: teal' }, 'VNode')
|
||||
])
|
||||
});
|
||||
},
|
||||
|
||||
open2() {
|
||||
this.$message({
|
||||
message: 'Congrats, this is a success message.',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$message({
|
||||
message: 'Warning, this is a warning message.',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$message.error('Oops, this is a error message.');
|
||||
},
|
||||
|
||||
open5() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'This is a message.'
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Congrats, this is a success message.',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open7() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Warning, this is a warning message.',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open8() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Oops, this is a error message.',
|
||||
type: 'error'
|
||||
});
|
||||
},
|
||||
|
||||
openCenter() {
|
||||
this.$message({
|
||||
message: 'Centered text',
|
||||
center: true
|
||||
});
|
||||
},
|
||||
|
||||
openHTML() {
|
||||
this.$message({
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: '<strong>This is <i>HTML</i> string</strong>'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Message
|
||||
|
||||
Utilizado para mostrar retroalimentacion despues de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificacion pasiva a nivel de sistema.
|
||||
|
||||
### Uso basico
|
||||
|
||||
Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.
|
||||
|
||||
:::demo La configuracion del componente Message es muy similar al del componente notification, asi que parte de las opciones no seran explicadas en detalle aqui. Puedes consultar la tabla de opciones en la parte inferior conbinada con la documentacion del componente notification para comprenderla. Element a registrado un metodo `$message` para poder invocarlo. Message puede tomar una cadena o un Vnode como parametro, y lo mostrara como el cuerpo principal.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="open">Show message</el-button>
|
||||
<el-button :plain="true" @click="openVn">VNode</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$message('This is a message.');
|
||||
},
|
||||
|
||||
openVn() {
|
||||
const h = this.$createElement;
|
||||
this.$message({
|
||||
message: h('p', null, [
|
||||
h('span', null, 'Message can be '),
|
||||
h('i', { style: 'color: teal' }, 'VNode')
|
||||
])
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Tipos
|
||||
|
||||
Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error activities.
|
||||
|
||||
:::demo Cuando necesite mas personalizacion, el componente Message tambien puede tomar un objeto como parametro. Por ejemplo, estableciendo el valor de `type` puede definir diferentes tipos, el predeterminado es `info`. En tales casos el cuerpo principal se pasa como el valor de `message`. Tambien, hay registrados metodos para los diferentes tipos, asi que, puedes llamarlos sin necesidad de pasar un tipo como `open4`.
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="open2">success</el-button>
|
||||
<el-button :plain="true" @click="open3">warning</el-button>
|
||||
<el-button :plain="true" @click="open">message</el-button>
|
||||
<el-button :plain="true" @click="open4">error</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
this.$message('This is a message.');
|
||||
},
|
||||
open2() {
|
||||
this.$message({
|
||||
message: 'Congrats, this is a success message.',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$message({
|
||||
message: 'Warning, this is a warning message.',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$message.error('Oops, this is a error message.');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Closable
|
||||
|
||||
Un boton para cerrar que puede ser agregado.
|
||||
|
||||
:::demo Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo `showClose`. Ademas, al igual que las notificaciones, message tiene un atriubuto `duration` que puede ser controlado. Por defecto la duracion es de 3000 ms, y no desaparecera al llegar a `0`.
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="open5">message</el-button>
|
||||
<el-button :plain="true" @click="open6">success</el-button>
|
||||
<el-button :plain="true" @click="open7">warning</el-button>
|
||||
<el-button :plain="true" @click="open8">error</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open5() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'This is a message.'
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Congrats, this is a success message.',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open7() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Warning, this is a warning message.',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open8() {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: 'Oops, this is a error message.',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Centered text
|
||||
Utiliza el atributo `center` para centrar el texto.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="openCenter">Centered text</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
openCenter() {
|
||||
this.$message({
|
||||
message: 'Centered text',
|
||||
center: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Utiliza cadenas HTML
|
||||
`message` soporta cadenas HTML.
|
||||
|
||||
:::demo Establece la propiedad `dangerouslyUseHTMLString` en true y `message` sera tratado como una cadena HTML.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button :plain="true" @click="openHTML">Use HTML String</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
openHTML() {
|
||||
this.$message({
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: '<strong>This is <i>HTML</i> string</strong>'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::warning
|
||||
Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegurece que el contendio de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
|
||||
:::
|
||||
|
||||
### Metodos Globales
|
||||
|
||||
Element ha agregado un método global llamado `$message` para Vue.prototype. Entonces en una instancia de vue puede llamar a `Message` como lo hicimos en esta pagina.
|
||||
|
||||
### Importación local
|
||||
|
||||
Import `Message`:
|
||||
|
||||
```javascript
|
||||
import { Message } from 'element-ui';
|
||||
```
|
||||
|
||||
En este caso deberia llamar al metodo `Message(options)`. Tambien se han registrado metodos para los diferentes tipos, e.g. `Message.success(options)`.
|
||||
Puede llamar al metodo `Message.closeAll()` para cerrar manualmente todas las instancias.
|
||||
|
||||
### Options
|
||||
| Atributo | Descripcion | Tipo | Valores permitidos | Por defecto |
|
||||
| ------------------------ | ---------------------------------------- | -------------- | -------------------------- | ----------- |
|
||||
| message | texto del mensaje | string / VNode | — | — |
|
||||
| type | tipo del mensaje | string | success/warning/info/error | info |
|
||||
| iconClass | clase personalizada para el icono, sobreescribe `type` | string | — | — |
|
||||
| dangerouslyUseHTMLString | utilizado para que `message` sea tratado como cadena HTML | boolean | — | false |
|
||||
| customClass | nombre de clase personalizado para el componente Message | string | — | — |
|
||||
| duration | muestra la duracion,en milisegundos. si se establece en 0, este no se apagara automaticamente | number | — | 3000 |
|
||||
| showClose | utilizado para mostrar un boton para cerrar | boolean | — | false |
|
||||
| center | utilizado para centrar el texto | boolean | — | false |
|
||||
| onClose | funcion callback ejecutada cuando se cierra con una instancia de mensaje como parametro | function | — | — |
|
||||
|
||||
### Metodos
|
||||
`Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al metodo `close`.
|
||||
| Metodo | Descripcion |
|
||||
| ------ | ---------------------------- |
|
||||
| close | cierra el componente Message |
|
||||
|
|
@ -0,0 +1,432 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
methods: {
|
||||
open() {
|
||||
const h = this.$createElement;
|
||||
|
||||
this.$notify({
|
||||
title: 'Title',
|
||||
message: h('i', { style: 'color: teal' }, 'This is a reminder')
|
||||
});
|
||||
},
|
||||
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: 'Prompt',
|
||||
message: 'This is a message that does not automatically close',
|
||||
duration: 0
|
||||
});
|
||||
},
|
||||
|
||||
open3() {
|
||||
this.$notify({
|
||||
title: 'Success',
|
||||
message: 'This is a success message',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$notify({
|
||||
title: 'Warning',
|
||||
message: 'This is a warning message',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open5() {
|
||||
this.$notify.info({
|
||||
title: 'Info',
|
||||
message: 'This is an info message'
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
this.$notify.error({
|
||||
title: 'Error',
|
||||
message: 'This is an error message'
|
||||
});
|
||||
},
|
||||
|
||||
open7() {
|
||||
this.$notify({
|
||||
title: 'Custom Position',
|
||||
message: 'I\'m at the top right corner'
|
||||
});
|
||||
},
|
||||
|
||||
open8() {
|
||||
this.$notify({
|
||||
title: 'Custom Position',
|
||||
message: 'I\'m at the bottom right corner',
|
||||
position: 'bottom-right'
|
||||
});
|
||||
},
|
||||
|
||||
open9() {
|
||||
this.$notify({
|
||||
title: 'Custom Position',
|
||||
message: 'I\'m at the bottom left corner',
|
||||
position: 'bottom-left'
|
||||
});
|
||||
},
|
||||
|
||||
open10() {
|
||||
this.$notify({
|
||||
title: 'Custom Position',
|
||||
message: 'I\'m at the top left corner',
|
||||
position: 'top-left'
|
||||
});
|
||||
},
|
||||
|
||||
open11() {
|
||||
this.$notify.success({
|
||||
title: 'Success',
|
||||
message: 'This is a success message',
|
||||
offset: 100
|
||||
});
|
||||
},
|
||||
|
||||
open12() {
|
||||
this.$notify({
|
||||
title: 'HTML String',
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: '<strong>This is <i>HTML</i> string</strong>'
|
||||
});
|
||||
},
|
||||
|
||||
open13() {
|
||||
this.$notify.success({
|
||||
title: 'Info',
|
||||
message: 'This is a message without close button',
|
||||
showClose: false
|
||||
});
|
||||
},
|
||||
|
||||
onClose() {
|
||||
console.log('Notification is closed');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Notification
|
||||
|
||||
Muestra un mensaje de notificación global en una esquina de la página.
|
||||
|
||||
### Uso básico
|
||||
|
||||
::: demo Element ha registrado el método`$notify` y recibe un objeto como parámetro. En el caso más sencillo, puede establecer el campo de `title` y el campo de ` message` para el título y el cuerpo de la notificación. De forma predeterminada, la notificación se cierra automáticamente después de 4500ms, pero configurando `duration` se puede controlar su duración. Específicamente, si está configurado en `0`, no se cerrará automáticamente. Tenga en cuenta que `duration` recibe un `Number` en milisegundos.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open">
|
||||
Closes automatically
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open2">
|
||||
Won't close automatically
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open() {
|
||||
const h = this.$createElement;
|
||||
|
||||
this.$notify({
|
||||
title: 'Title',
|
||||
message: h('i', { style: 'color: teal' }, 'This is a reminder')
|
||||
});
|
||||
},
|
||||
|
||||
open2() {
|
||||
this.$notify({
|
||||
title: 'Prompt',
|
||||
message: 'This is a message that does not automatically close',
|
||||
duration: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Tipos de notificaciones
|
||||
|
||||
Proporcionamos cuatro tipos: success, warning, info y error.
|
||||
|
||||
::: demo Element proporciona cuatro tipos de notificación: `success`, `warning`, `info` y `error`. Se definen por el campo `type` y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo `open5` y `open6` sin pasar un campo `type`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open3">
|
||||
Success
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open4">
|
||||
Warning
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open5">
|
||||
Info
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open6">
|
||||
Error
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open3() {
|
||||
this.$notify({
|
||||
title: 'Success',
|
||||
message: 'This is a success message',
|
||||
type: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
open4() {
|
||||
this.$notify({
|
||||
title: 'Warning',
|
||||
message: 'This is a warning message',
|
||||
type: 'warning'
|
||||
});
|
||||
},
|
||||
|
||||
open5() {
|
||||
this.$notify.info({
|
||||
title: 'Info',
|
||||
message: 'This is an info message'
|
||||
});
|
||||
},
|
||||
|
||||
open6() {
|
||||
this.$notify.error({
|
||||
title: 'Error',
|
||||
message: 'This is an error message'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Posicion personalizada
|
||||
|
||||
La notificación puede surgir de cualquier rincón que uno desee.
|
||||
|
||||
::: demo El atributo `position` define desde qué esquina se desliza la notificación. Puede ser `top-right`, `top-left`, `bottom-right` o `bottom-left`. Predeterminado: `top-right`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open7">
|
||||
Top Right
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open8">
|
||||
Bottom Right
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open9">
|
||||
Bottom Left
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="open10">
|
||||
Top Left
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open7() {
|
||||
this.$notify({
|
||||
title: 'Custom Position',
|
||||
message: 'I\'m at the top right corner'
|
||||
});
|
||||
},
|
||||
|
||||
open8() {
|
||||
this.$notify({
|
||||
title: 'Custom Position',
|
||||
message: 'I\'m at the bottom right corner',
|
||||
position: 'bottom-right'
|
||||
});
|
||||
},
|
||||
|
||||
open9() {
|
||||
this.$notify({
|
||||
title: 'Custom Position',
|
||||
message: 'I\'m at the bottom left corner',
|
||||
position: 'bottom-left'
|
||||
});
|
||||
},
|
||||
|
||||
open10() {
|
||||
this.$notify({
|
||||
title: 'Custom Position',
|
||||
message: 'I\'m at the top left corner',
|
||||
position: 'top-left'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Desplazamiento
|
||||
|
||||
Personalizar el desplazamiento de notificación desde el borde de la pantalla.
|
||||
|
||||
::: demo Configure el atributo `offset` para personalizar el desplazamiento de la notificación desde el borde de la pantalla. Tenga en cuenta que cada instancia de la notificación del mismo momento debe tener el mismo desplazamiento.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open11">
|
||||
Notification with offset
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open11() {
|
||||
this.$notify.success({
|
||||
title: 'Success',
|
||||
message: 'This is a success message',
|
||||
offset: 100
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Usando cadenas HTML
|
||||
`message` soporta cadenas HTML.
|
||||
|
||||
::: demo Configure `dangerouslyUseHTMLString` a true y `message` se tratará como una cadena HTML.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open12">
|
||||
Use HTML String
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open12() {
|
||||
this.$notify({
|
||||
title: 'HTML String',
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: '<strong>This is <i>HTML</i> string</strong>'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::warning
|
||||
|
||||
Aunque la propiedad `message` soporta cadenas HTML, el renderizado dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a [ataques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Por lo tanto, cuando `dangerouslyUseHTMLString` está a true, por favor asegúrese de que el contenido del mensaje es confiable, y **nunca** asigne `message` al contenido proporcionado por el usuario.
|
||||
|
||||
:::
|
||||
|
||||
### Ocultar boton de cerrar
|
||||
|
||||
Es posible ocultar el botón de cerrar
|
||||
|
||||
::: demo Configure el atributo `showClose` como `false` para que el usuario no pueda cerrar la notificación.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button
|
||||
plain
|
||||
@click="open13">
|
||||
Hide close button
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
open13() {
|
||||
this.$notify.success({
|
||||
title: 'Info',
|
||||
message: 'This is a message without close button',
|
||||
showClose: false
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Metodo global
|
||||
|
||||
Element ha añadido un método global `$notify` para Vue.prototype. Así que en una instancia de vue se puede llamar `Notification` como lo hacemos en esta página.
|
||||
|
||||
### Importar localmente
|
||||
|
||||
Importar `Notification`:
|
||||
|
||||
```javascript
|
||||
import { Notification } from 'element-ui';
|
||||
```
|
||||
|
||||
En este caso, debe llamar a `Notification(options)`. También se han registrado métodos para diferentes tipos, e.j. `Notification.success(options)`.
|
||||
|
||||
### Opciones
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------------------ | ---------------------------------------- | ---------------- | ---------------------------------------- | ----------- |
|
||||
| title | titulo | string | — | — |
|
||||
| message | mensaje | string/Vue.VNode | — | — |
|
||||
| dangerouslyUseHTMLString | si `message` es tratado como una cadena HTML | boolean | — | false |
|
||||
| type | tipo de notificacion | string | success/warning/info/error | — |
|
||||
| iconClass | clase personalizada de icono. Será anulado por `type` | string | — | — |
|
||||
| customClass | nombre de clase personalizado para la notificacion | string | — | — |
|
||||
| duration | duracion antes de cerrar. Si no se quiere que se cierre automaticamente este valor debe estar a 0 | number | — | 4500 |
|
||||
| position | posicion personalizada | string | top-right/top-left/bottom-right/bottom-left | top-right |
|
||||
| showClose | si se muestra el boton de cerrar | boolean | — | true |
|
||||
| onClose | funcion que se ejecuta cuando la notificación se cierra | function | — | — |
|
||||
| onClick | funcion que se ejecuta cuando se hace click en la notificación | function | — | — |
|
||||
| offset | desplazamiento desde el borde superior de la pantalla. Cada instancia de notificación del mismo momento debe tener siempre el mismo desplazamiento. | number | — | 0 |
|
||||
|
||||
### Metodos
|
||||
`Notification` y `this.$notify` devuelven la instancia de la notificacion actual. Para cerrar manualmente la instancia, se puede llamar `close` para ello.
|
||||
|
||||
`Notification` y `this.$notify` devuelven la instancia de notificación actual. Para cerrar manualmente la instancia, puede llamar al método `close`.
|
||||
|
||||
| Metodo | Descripción |
|
||||
| ------ | ---------------------- |
|
||||
| close | cierra la notificación |
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
<style>
|
||||
.demo-pagination .source.first {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.demo-pagination .first .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px #EFF2F6;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-pagination .first .demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.demo-pagination .source.last {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.demo-pagination .last .block {
|
||||
padding: 30px 24px;
|
||||
border-bottom: solid 1px #EFF2F6;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-pagination .last .demonstration {
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.demo-pagination .last .demonstration + .el-pagination {
|
||||
float: right;
|
||||
width: 70%;
|
||||
margin: 5px 20px 0 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Paginación
|
||||
Si tiene que mostrar muchos datos en una página, utilice la paginación.
|
||||
|
||||
### Uso básico
|
||||
|
||||
:::**Demo** Asigne en el atributo `layout` los diferentes elementos que quiere utilizar separados por coma. Los elementos de paginación son: `prev` (un botón para navegar a la página anterior), `next` (un botón para navegar a la siguiente página), `pager` (lista de página), `jumper` (un `input` para saltar a una página determinada), `total` (total de elementos), `size` (un `select` para seleccionar el tamaño de la página ) y `->`(todo elemento situado luego de este símbolo será movido a la derecha).
|
||||
```html
|
||||
<div class="block">
|
||||
<span class="demonstration">When you have few pages</span>
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="50">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">When you have more than 7 pages</span>
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### Paginación pequeña
|
||||
|
||||
Usa una paginación pequeña en caso de espacio limitado.
|
||||
|
||||
:::**Demo** Solo ponga el atributo `small` como `true` y la Paginación se volverá pequeña.
|
||||
```html
|
||||
<el-pagination
|
||||
small
|
||||
layout="prev, pager, next"
|
||||
:total="50">
|
||||
</el-pagination>
|
||||
```
|
||||
:::
|
||||
|
||||
### Más elementos
|
||||
|
||||
Agrega más modulos basados en su escenario.
|
||||
|
||||
:::**Demo** Este ejemplo es un completo caso de uso. Utiliza los eventos `size-change` y `current-change` para manejar el tamaño de página y el cambio de página. El atributo `page-sizes` acepta un arreglo de enteros, cada uno representa un diferente valor del atributo `sizes` que es un `select`, ejemplo `[100, 200, 300, 400]` indicará que el `select` tendrá las opciones: 100, 200, 300 o 400 elementos por página.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Total item count</span>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="currentPage1"
|
||||
:page-size="100"
|
||||
layout="total, prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Change page size</span>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="currentPage2"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="sizes, prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Jump to</span>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="currentPage3"
|
||||
:page-size="100"
|
||||
layout="prev, pager, next, jumper"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">All combined</span>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="currentPage4"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="400">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
console.log(`${val} items per page`);
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`current page: ${val}`);
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentPage1: 5,
|
||||
currentPage2: 5,
|
||||
currentPage3: 5,
|
||||
currentPage4: 4
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
<script>
|
||||
import { addClass } from 'element-ui/src/utils/dom';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentPage1: 5,
|
||||
currentPage2: 5,
|
||||
currentPage3: 5,
|
||||
currentPage4: 4
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
console.log(`${val} items per page`);
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`current page: ${val}`);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
let demos = document.querySelectorAll('.source');
|
||||
let firstDemo = demos[0];
|
||||
let lastDemo = demos[demos.length - 1];
|
||||
addClass(firstDemo, 'first');
|
||||
addClass(lastDemo, 'last');
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------ | ---------------------------------------- | -------- | ---------------------------------------- | -------------------------------------- |
|
||||
| small | usar paginación pequeña | boolean | — | false |
|
||||
| page-size | cantidad de elementos por página | number | — | 10 |
|
||||
| total | total de elementos | number | — | — |
|
||||
| page-count | total de páginas. Asigna `total` o `page-count` y las páginas serán mostradas; si necesitas `page-sizes`, `total` es **requerido** | number | — | — |
|
||||
| current-page | número actual de la página, soporta el modificador .sync | number | — | 1 |
|
||||
| layout | layout de la paginación, elementos separados por coma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total' |
|
||||
| page-sizes | opciones para la cantidad de elementos por página | number[] | — | [10, 20, 30, 40, 50, 100] |
|
||||
| popper-class | clase propia para el `dropdown` del `select` del número de páginas | string | — | — |
|
||||
| prev-text | texto para el botón `prev` | string | — | — |
|
||||
| next-text | texto para el botón `next` | string | — | — |
|
||||
|
||||
### Eventos
|
||||
| Nombre del evento | Descripción | Parámetros |
|
||||
| ----------------- | --------------------------------------- | ----------------------------- |
|
||||
| size-change | se dispara cuando `page-size` cambia | nuevo valor de `page-size` |
|
||||
| current-change | se dispara cuando `current-page` cambia | nuevo valor de `current-page` |
|
||||
|
||||
### Slot
|
||||
| Nombre | Descripción |
|
||||
| ------ | ---------------------------------------- |
|
||||
| — | Elemento propio. Para utilizar esto necesitas declarar `slot` en el `layout` |
|
||||
|
|
@ -0,0 +1,247 @@
|
|||
<style>
|
||||
.demo-box.demo-popover {
|
||||
.el-popover + .el-popover {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-input {
|
||||
width: 360px;
|
||||
}
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible2: false,
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}],
|
||||
gridData2: [{
|
||||
date: '2016-05-02',
|
||||
name: 'Jack',
|
||||
address: 'New York City',
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Jack',
|
||||
address: 'New York City',
|
||||
$info: true
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Jack',
|
||||
address: 'New York City',
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
address: 'New York City',
|
||||
$positive: true
|
||||
}],
|
||||
gridData3: [{
|
||||
tag: 'Home',
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
tag: 'Company',
|
||||
date: '2016-05-02',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
tag: 'Company',
|
||||
date: '2016-05-04',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
tag: 'Home',
|
||||
date: '2016-05-01',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
tag: 'Company',
|
||||
date: '2016-05-08',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
tag: 'Home',
|
||||
date: '2016-05-06',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
tag: 'Company',
|
||||
date: '2016-05-07',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}],
|
||||
singleSelection: {},
|
||||
multipleSelection: [],
|
||||
model: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Popover
|
||||
|
||||
### Uso básico
|
||||
|
||||
Similar a un Tooltip, Popover está construido con `Vue-popper`. Así que para atributos duplicados, por favor refiérase a la documentación de Tooltip.
|
||||
|
||||
:::**Demo** Agrega `ref` al popover, luego en el botón usa la directiva `v-popover` para asociar el botón y el popover. El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click` o `focus`. De manera alternativa puede especificar la referencia utilizando un [slot con nombre](https://vuejs.org/v2/guide/components.html#Named-Slots).
|
||||
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover1"
|
||||
placement="top-start"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
content="this is content, this is content, this is content">
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
ref="popover2"
|
||||
placement="bottom"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="click"
|
||||
content="this is content, this is content, this is content">
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover1>Hover to activate</el-button>
|
||||
<el-button v-popover:popover2>Click to activate</el-button>
|
||||
<el-popover
|
||||
placement="right"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="focus"
|
||||
content="this is content, this is content, this is content">
|
||||
<el-button slot="reference">Focus to activate</el-button>
|
||||
</el-popover>
|
||||
```
|
||||
:::
|
||||
|
||||
### Información anidada
|
||||
Otros componentes pueden anidarse dentro de popover. A continuación un ejemplo de una tabla anidada.
|
||||
|
||||
:::**Demo** Reemplaza el atributo `content` con un `slot`.
|
||||
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover4"
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column width="150" property="date" label="date"></el-table-column>
|
||||
<el-table-column width="100" property="name" label="name"></el-table-column>
|
||||
<el-table-column width="300" property="address" label="address"></el-table-column>
|
||||
</el-table>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover4>Click to activate</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'Jack',
|
||||
address: 'New York City'
|
||||
}]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Operación anidada
|
||||
|
||||
Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `dialog`.
|
||||
|
||||
:::**Demo**
|
||||
```html
|
||||
<el-popover
|
||||
ref="popover5"
|
||||
placement="top"
|
||||
width="160"
|
||||
v-model="visible2">
|
||||
<p>Are you sure to delete this?</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
<el-button v-popover:popover5>Delete</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible2: false,
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------------- | ---------------------------------------- | -------------- | ---------------------------------------- | ---------------------------------------- |
|
||||
| trigger | cómo se dispara el popover | string | click/focus/hover/manual | click |
|
||||
| title | título del popover | string | — | — |
|
||||
| content | contenido del popover, puede ser sustituido por un `slot` | string | — | — |
|
||||
| width | ancho del popover | string, number | — | Min width 150px |
|
||||
| placement | posición del popover en la pantalla | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
|
||||
| disabled | si el popover está deshabilitado | boolean | — | false |
|
||||
| value(v-model) | si el popover está visible | Boolean | — | false |
|
||||
| offset | popover offset | number | — | 0 |
|
||||
| transition | popover transition animation | string | — | el-fade-in-linear |
|
||||
| visible-arrow | si una flecha del tooltip es mostrada o no. Para más información, por favor refiérase a [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
|
||||
| popper-options | parámetros para [popper.js](https://popper.js.org/documentation.html) | object | por favor, refiérase a [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| popper-class | clase propia para popover | string | — | — |
|
||||
| open-delay | retraso de la aparición cuando `trigger` es hover, en milisegundos | number | — | — |
|
||||
|
||||
### Slot
|
||||
| Nombre | Descripción |
|
||||
| --------- | ------------------------------------ |
|
||||
| — | texto contenido en popover |
|
||||
| reference | elemento HTML que dispara el popover |
|
||||
|
||||
### Eventos
|
||||
| Nombre del evento | Descripción | Parámetros |
|
||||
| ----------------- | --------------------------------------- | ---------- |
|
||||
| show | se dispara cuando se muestra el popover | — |
|
||||
| hide | se dispara cuando se oculta el popover | — |
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<style>
|
||||
.demo-box.demo-progress {
|
||||
.el-progress--line {
|
||||
margin-bottom: 15px;
|
||||
width: 350px;
|
||||
}
|
||||
.el-progress--circle {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
## Progreso
|
||||
Progreso es usado para mostrar el estado de la operación actual e informar al usuario acerca de ésta.
|
||||
|
||||
### Barra de progreso lineal (porcentage externo)
|
||||
|
||||
:::**Demo** Usa el atributo `percentage` para asignar el porcentage. Este es **requerido** y tiene que ser un valor entre `0-100`.
|
||||
```html
|
||||
<el-progress :percentage="0"></el-progress>
|
||||
<el-progress :percentage="70"></el-progress>
|
||||
<el-progress :percentage="100" status="success"></el-progress>
|
||||
<el-progress :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
### Barra de progreso lineal (porcentage interno)
|
||||
En este caso el porcentage no toma espacio adicional.
|
||||
|
||||
:::**Demo** El atributo `stroke-width` decide el ancho de la barra de progreso, y usa el atributo `text-inside` para poner la descripción dentro de la misma.
|
||||
```html
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
### Barra de progreso circular
|
||||
|
||||
:::**Demo** Puede asignar el atributo `type` como `circle` para usar la barra circular de progreso, y usar el atributo `width` para cambiar el tamaño del círculo.
|
||||
```html
|
||||
<el-progress type="circle" :percentage="0"></el-progress>
|
||||
<el-progress type="circle" :percentage="25"></el-progress>
|
||||
<el-progress type="circle" :percentage="100" status="success"></el-progress>
|
||||
<el-progress type="circle" :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptado | Por defecto |
|
||||
| ------------ | ---------------------------------------- | ------- | ----------------- | ----------- |
|
||||
| percentage | porcentaje, requerido | number | 0-100 | 0 |
|
||||
| type | tipo de barra de progreso | string | line/circle | line |
|
||||
| stroke-width | ancho de la barra de progreso | number | — | 6 |
|
||||
| text-inside | mostrar el porcentaje dentro de la barra de progreso, solo funciona cuando `type` es 'line' | boolean | — | false |
|
||||
| status | estado actual de la barra de progreso | string | success/exception | — |
|
||||
| width | ancho del canvas que contiene la barra de progreso circula | number | — | 126 |
|
||||
| show-text | mostrar porcentaje | boolean | — | true |
|
||||
|
||||
|
|
@ -0,0 +1,269 @@
|
|||
## Inicio rápido
|
||||
|
||||
Esta sección te guía en el proceso de usar Element con webpack en un proyecto.
|
||||
|
||||
### Usa la plantilla de Kit de inicio
|
||||
|
||||
Proveemos una plantilla general [project template](https://github.com/ElementUI/element-starter). Para los usuarios de Laravel, también tenemos [template](https://github.com/ElementUI/element-in-laravel-starter). Puedes descargarlas y agregarlas directamente también.
|
||||
|
||||
Si prefiere no utilizarlas, lee las siguientes secciones de este documento.
|
||||
|
||||
### Usando vue-cli
|
||||
|
||||
Podemos empezar un proyecto utilizando [vue-cli](https://github.com/vuejs/vue-cli):
|
||||
|
||||
```shell
|
||||
> npm i -g vue-cli
|
||||
> mkdir my-project && cd my-project
|
||||
> vue init webpack
|
||||
> npm i && npm i element-ui
|
||||
```
|
||||
|
||||
### Importando Element
|
||||
|
||||
Puede importar Element completamente o solamente importar lo que necesite. Comencemos importando todo.
|
||||
|
||||
#### Importando todo
|
||||
|
||||
In main.js:
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import App from './App.vue'
|
||||
|
||||
Vue.use(ElementUI)
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
})
|
||||
```
|
||||
El código anterior importa Element completamente. Nótese que el archivo CSS necesita ser incluido por separado.
|
||||
|
||||
#### En demanda
|
||||
|
||||
Con la ayuda de [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component), podemos importar los componentes que necesitamos, haciendo nuestro proyecto más pequeño que de la otra manera.
|
||||
|
||||
Primero, instale babel-plugin-component:
|
||||
|
||||
```bash
|
||||
npm install babel-plugin-component -D
|
||||
```
|
||||
|
||||
Luego edite .babelrc:
|
||||
```json
|
||||
{
|
||||
"presets": [
|
||||
["es2015", { "modules": false }]
|
||||
],
|
||||
"plugins": [["component", [
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "theme-chalk"
|
||||
}
|
||||
]]]
|
||||
}
|
||||
```
|
||||
|
||||
Luego, si necesita Button y Select, edite main.js:
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import { Button, Select } from 'element-ui'
|
||||
import App from './App.vue'
|
||||
|
||||
Vue.component(Button.name, Button)
|
||||
Vue.component(Select.name, Select)
|
||||
/* or
|
||||
* Vue.use(Button)
|
||||
* Vue.use(Select)
|
||||
*/
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
})
|
||||
```
|
||||
|
||||
Ejemplo completo (Referencia completa de componentes [components.json](https://github.com/ElemeFE/element/blob/master/components.json))
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import {
|
||||
Pagination,
|
||||
Dialog,
|
||||
Autocomplete,
|
||||
Dropdown,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
Menu,
|
||||
Submenu,
|
||||
MenuItem,
|
||||
MenuItemGroup,
|
||||
Input,
|
||||
InputNumber,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
RadioButton,
|
||||
Checkbox,
|
||||
CheckboxButton,
|
||||
CheckboxGroup,
|
||||
Switch,
|
||||
Select,
|
||||
Option,
|
||||
OptionGroup,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Table,
|
||||
TableColumn,
|
||||
DatePicker,
|
||||
TimeSelect,
|
||||
TimePicker,
|
||||
Popover,
|
||||
Tooltip,
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
Form,
|
||||
FormItem,
|
||||
Tabs,
|
||||
TabPane,
|
||||
Tag,
|
||||
Tree,
|
||||
Alert,
|
||||
Slider,
|
||||
Icon,
|
||||
Row,
|
||||
Col,
|
||||
Upload,
|
||||
Progress,
|
||||
Badge,
|
||||
Card,
|
||||
Rate,
|
||||
Steps,
|
||||
Step,
|
||||
Carousel,
|
||||
CarouselItem,
|
||||
Collapse,
|
||||
CollapseItem,
|
||||
Cascader,
|
||||
ColorPicker,
|
||||
Transfer,
|
||||
Container,
|
||||
Header,
|
||||
Aside,
|
||||
Main,
|
||||
Footer,
|
||||
Loading,
|
||||
MessageBox,
|
||||
Message,
|
||||
Notification
|
||||
} from 'element-ui'
|
||||
|
||||
Vue.use(Pagination)
|
||||
Vue.use(Dialog)
|
||||
Vue.use(Autocomplete)
|
||||
Vue.use(Dropdown)
|
||||
Vue.use(DropdownMenu)
|
||||
Vue.use(DropdownItem)
|
||||
Vue.use(Menu)
|
||||
Vue.use(Submenu)
|
||||
Vue.use(MenuItem)
|
||||
Vue.use(MenuItemGroup)
|
||||
Vue.use(Input)
|
||||
Vue.use(InputNumber)
|
||||
Vue.use(Radio)
|
||||
Vue.use(RadioGroup)
|
||||
Vue.use(RadioButton)
|
||||
Vue.use(Checkbox)
|
||||
Vue.use(CheckboxGroup)
|
||||
Vue.use(Switch)
|
||||
Vue.use(Select)
|
||||
Vue.use(Option)
|
||||
Vue.use(OptionGroup)
|
||||
Vue.use(Button)
|
||||
Vue.use(ButtonGroup)
|
||||
Vue.use(Table)
|
||||
Vue.use(TableColumn)
|
||||
Vue.use(DatePicker)
|
||||
Vue.use(TimeSelect)
|
||||
Vue.use(TimePicker)
|
||||
Vue.use(Popover)
|
||||
Vue.use(Tooltip)
|
||||
Vue.use(Breadcrumb)
|
||||
Vue.use(BreadcrumbItem)
|
||||
Vue.use(Form)
|
||||
Vue.use(FormItem)
|
||||
Vue.use(Tabs)
|
||||
Vue.use(TabPane)
|
||||
Vue.use(Tag)
|
||||
Vue.use(Tree)
|
||||
Vue.use(Alert)
|
||||
Vue.use(Slider)
|
||||
Vue.use(Icon)
|
||||
Vue.use(Row)
|
||||
Vue.use(Col)
|
||||
Vue.use(Upload)
|
||||
Vue.use(Progress)
|
||||
Vue.use(Badge)
|
||||
Vue.use(Card)
|
||||
Vue.use(Rate)
|
||||
Vue.use(Steps)
|
||||
Vue.use(Step)
|
||||
Vue.use(Carousel)
|
||||
Vue.use(CarouselItem)
|
||||
Vue.use(Collapse)
|
||||
Vue.use(CollapseItem)
|
||||
Vue.use(Cascader)
|
||||
Vue.use(ColorPicker)
|
||||
Vue.use(Container)
|
||||
Vue.use(Header)
|
||||
Vue.use(Aside)
|
||||
Vue.use(Main)
|
||||
Vue.use(Footer)
|
||||
|
||||
Vue.use(Loading.directive)
|
||||
|
||||
Vue.prototype.$loading = Loading.service
|
||||
Vue.prototype.$msgbox = MessageBox
|
||||
Vue.prototype.$alert = MessageBox.alert
|
||||
Vue.prototype.$confirm = MessageBox.confirm
|
||||
Vue.prototype.$prompt = MessageBox.prompt
|
||||
Vue.prototype.$notify = Notification
|
||||
Vue.prototype.$message = Message
|
||||
```
|
||||
|
||||
### Configuración global
|
||||
Cuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene una propiedad: `size`, que define el tamaño por defecto de todos los componentes:
|
||||
|
||||
Importando Element completamente：
|
||||
```JS
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
Vue.use(Element, { size: 'small' })
|
||||
```
|
||||
|
||||
Importando Element parcialmente：
|
||||
```JS
|
||||
import Vue from 'vue'
|
||||
import { Button } from 'element-ui'
|
||||
|
||||
Vue.prototype.$ELEMENT = { size: 'small' }
|
||||
Vue.use(Button)
|
||||
```
|
||||
Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo `size` será `small`.
|
||||
|
||||
### Empiece ya!
|
||||
Ahora ha incorporado Vue y Element a su proyecto y es el momento para comenzar a programar. Inicie el modo de desarrollo:
|
||||
|
||||
```bash
|
||||
# visit localhost:8086
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Build:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
Por favor, refiérase a la documentación de cada componente para aprender cómo usarlos.
|
||||
|
|
@ -0,0 +1,231 @@
|
|||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
radio: '1',
|
||||
radio1: 'selected and disabled',
|
||||
radio2: 3,
|
||||
radio3: 'New York',
|
||||
radio4: 'New York',
|
||||
radio5: 'New York',
|
||||
radio6: 'New York',
|
||||
radio7: '1',
|
||||
radio8: '1',
|
||||
radio9: '1',
|
||||
radio10: '1'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Radio
|
||||
Selección única entre múltiples opciones.
|
||||
|
||||
### Uso básico
|
||||
El elemento Radio no debe tener muchas opciones. De otra manera, utilice el componente Select.
|
||||
|
||||
:::Demo Crear un elemento Radio es fácil, solo necesita enlazar(`bind`) una variable a la directiva `v-model` del Radio. Va a ser igual al valor `label` del Radio seleccionado. El tipo de dato de `label` es `String`, `Number` o `Boolean`.
|
||||
```html
|
||||
<template>
|
||||
<el-radio v-model="radio" label="1">Option A</el-radio>
|
||||
<el-radio v-model="radio" label="2">Option B</el-radio>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio: '1'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Deshabilitado
|
||||
|
||||
El atributo `disabled` es utilizado para deshabilitar un Radio.
|
||||
|
||||
:::demo Solo necesita agregar el atributo `disabled`.
|
||||
```html
|
||||
<template>
|
||||
<el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
|
||||
<el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio1: 'selected and disabled'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Grupo de elementos Radio
|
||||
|
||||
Recomendado para seleccionar opciones que se excluyen mutuamente.
|
||||
|
||||
:::demo Combine `el-radio-group` con `el-radio` para mostrar un grupo de Radios. Enlace la variable con `v-model` del elemento `el-radio-group` y asigne el valor del `label` en `el-radio`. Se provee el evento `change` con el valor actual como parámetro.
|
||||
|
||||
```html
|
||||
<el-radio-group v-model="radio2">
|
||||
<el-radio :label="3">Option A</el-radio>
|
||||
<el-radio :label="6">Option B</el-radio>
|
||||
<el-radio :label="9">Option C</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio2: 3
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Estilo Button
|
||||
|
||||
Radio con estilo de botón.
|
||||
|
||||
:::demo Solo necesita cambiar el elemento `el-radio` a `el-radio-button`. Se provee el atributo `size`.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-radio-group v-model="radio3">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
<el-radio-button label="Chicago"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio4" size="medium">
|
||||
<el-radio-button label="New York" ></el-radio-button>
|
||||
<el-radio-button label="Washington"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
<el-radio-button label="Chicago"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio5" size="small">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington" disabled ></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
<el-radio-button label="Chicago"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio6" disabled size="mini">
|
||||
<el-radio-button label="New York"></el-radio-button>
|
||||
<el-radio-button label="Washington"></el-radio-button>
|
||||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||||
<el-radio-button label="Chicago"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio3: 'New York',
|
||||
radio4: 'New York',
|
||||
radio5: 'New York',
|
||||
radio6: 'New York'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Con bordes
|
||||
|
||||
:::demo El atributo `border` agrega un borde al elemento Radio.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-radio v-model="radio7" label="1" border>Option A</el-radio>
|
||||
<el-radio v-model="radio7" label="2" border>Option B</el-radio>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>
|
||||
<el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio9" size="small">
|
||||
<el-radio label="1" border>Option A</el-radio>
|
||||
<el-radio label="2" border disabled>Option B</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="radio10" size="mini" disabled>
|
||||
<el-radio label="1" border>Option A</el-radio>
|
||||
<el-radio label="2" border>Option B</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
radio7: '1',
|
||||
radio8: '1',
|
||||
radio9: '1',
|
||||
radio10: '1'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos de Radio
|
||||
|
||||
| Atributo | Descripción | Tipo | Valores Aceptado | Por defecto |
|
||||
| -------- | ---------------------------------------- | ------------------------- | --------------------- | ----------- |
|
||||
| label | el valor del Radio | string / number / boolean | — | — |
|
||||
| disabled | si el Radio está deshabilitado | boolean | — | false |
|
||||
| border | agregar borde alrededor del elemento Radio | boolean | — | false |
|
||||
| size | tamaño del elemento Radio, solo funciona si `border` es verdadero | string | medium / small / mini | — |
|
||||
| name | atributo nativo 'name' | string | — | — |
|
||||
|
||||
### Atributos de Radio-button
|
||||
|
||||
| Atributo | Descripción | Tipo | Valores Aceptado | Por defecto |
|
||||
| -------- | ------------------------------ | --------------- | ---------------- | ----------- |
|
||||
| label | el valor del Radio | string / number | — | — |
|
||||
| disabled | si el Radio está deshabilitado | boolean | — | false |
|
||||
| name | atributo nativo 'name' | string | — | — |
|
||||
|
||||
### Atributos de Radio-group
|
||||
|
||||
| Atributo | Descripción | Tipo | Valores Aceptado | Valores por defecto |
|
||||
| ---------- | ---------------------------------------- | ------- | --------------------- | ------------------- |
|
||||
| size | tamaño de los `radio buttons` o `bordered radios` | string | medium / small / mini | — |
|
||||
| disabled | si la anidación de radios está desahabilitada | boolean | — | false |
|
||||
| text-color | color de las letras cuando el botón está activo | string | — | #ffffff |
|
||||
| fill | color del borde y fondo cuando el botón está activo | string | — | #409EFF |
|
||||
|
||||
### Eventos de Radio
|
||||
|
||||
| Nombre de evento | Descripción | Parámetros |
|
||||
| ---------------- | --------------------------------- | ---------------------------------------- |
|
||||
| change | se dispara cuando el valor cambia | el valor del `label` del Radio seleccionado |
|
||||
|
||||
|
||||
### Eventos de Radio-group
|
||||
|
||||
| Nombre de evento | Descripción | Parámetros |
|
||||
| ---------------- | --------------------------------- | ---------------------------------------- |
|
||||
| change | se dispara cuando el valor cambia | el valor del `label` del Radio seleccionado |
|
||||
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
<style>
|
||||
.demo-rate .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px #EFF2F6;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-rate .demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: null,
|
||||
value2: null,
|
||||
value3: null,
|
||||
value4: null,
|
||||
value5: 3.7
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
let firstDemo = document.querySelector('.source');
|
||||
firstDemo.style.padding = '0';
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Calificación
|
||||
|
||||
Usado para la calificación
|
||||
|
||||
### Uso básico
|
||||
|
||||
:::demo Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo `colors` y sus dos umbrales pueden ser definidos con `low-treshold` y `high-treshold`.
|
||||
|
||||
|
||||
``` html
|
||||
<div class="block">
|
||||
<span class="demonstration">Default</span>
|
||||
<el-rate v-model="value1"></el-rate>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Color for different levels</span>
|
||||
<el-rate
|
||||
v-model="value2"
|
||||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
|
||||
</el-rate>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: null,
|
||||
value2: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Con texto
|
||||
|
||||
Usa texto para indicar la puntuación
|
||||
|
||||
:::demo Agregar el atributo `show-text` para mostrar texto a la derecha del componente. Puede asignar textos para las distintas puntuaciones usando `texts`. `texts` es un arreglo cuya longitud debe ser igual a la máxima puntuación `max`.
|
||||
|
||||
``` html
|
||||
<el-rate
|
||||
v-model="value3"
|
||||
:texts="['oops', 'disappointed', 'normal', 'good', 'great']"
|
||||
show-text>
|
||||
</el-rate>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Más iconos
|
||||
|
||||
Puede utilizar iconos para diferenciar cada componente.
|
||||
|
||||
:::demo Puede customizar iconos para tres niveles diferentes usando `icon-classes`. En este ejemplo también usamos `void-icon-class` para asignar un icono si no está seleccionado.
|
||||
|
||||
``` html
|
||||
<el-rate
|
||||
v-model="value4"
|
||||
:icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
|
||||
void-icon-class="icon-rate-face-off"
|
||||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
|
||||
</el-rate>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value4: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Solo lectura
|
||||
|
||||
La calificación de solo lectura es para mostrar la puntuación. Soporta media estrella.
|
||||
|
||||
:::demo Use el atributo `disabled` para hacer el componente de solo lectura. Agregar `show-score` para mostrar la puntuación en el lado derecho. Además, puede usar el atributo `score-template` para proveer una plantilla. Tiene que contener `{value}`, y `{value}` será sustituido por la puntuación.
|
||||
|
||||
``` html
|
||||
<el-rate
|
||||
v-model="value5"
|
||||
disabled
|
||||
show-score
|
||||
text-color="#ff9900"
|
||||
score-template="{value} points">
|
||||
</el-rate>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value5: 3.7
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptado | Por defecto |
|
||||
| ------------------------ | ---------------------------------------- | ------- | ---------------- | ---------------------------------------- |
|
||||
| max | puntuación máxima | number | — | 5 |
|
||||
| disabled | si la calificación es de solo lectura | boolean | — | false |
|
||||
| allow-half | si escoger media estrella está permitido | boolean | — | false |
|
||||
| low-threshold | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel bajo | number | — | 2 |
|
||||
| high-threshold | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel alto | number | — | 4 |
|
||||
| colors | arreglo de colores para iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación | array | — | ['#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 | arreglo de nombres para clases de iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación | array | — | ['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 |
|
||||
| show-text | muestra el texto | boolean | — | false |
|
||||
| show-score | muestra puntuación actual. `show-score` y `show-text` no pueden ser verdaderos al mismo tiempo | boolean | — | false |
|
||||
| text-color | color del texto | string | — | #1F2D3D |
|
||||
| texts | arreglo de textos | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
|
||||
| score-template | plantilla de puntuación | string | — | {value} |
|
||||
|
||||
### Eventos
|
||||
| Nombre del evento | Descripción | Parámetros |
|
||||
| ----------------- | ---------------------------------------- | ---------------------- |
|
||||
| change | Se dispara cuando la puntuación es cambiada | valor luego del cambio |
|
||||
|
|
@ -0,0 +1,719 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
options: [{
|
||||
value: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2'
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
options2: [{
|
||||
value: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2',
|
||||
disabled: true
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
options3: [{
|
||||
label: 'Popular cities',
|
||||
options: [{
|
||||
value: 'Shanghai',
|
||||
label: 'Shanghai'
|
||||
}, {
|
||||
value: 'Beijing',
|
||||
label: 'Beijing'
|
||||
}]
|
||||
}, {
|
||||
label: 'City Name',
|
||||
options: [{
|
||||
value: 'Chengdu',
|
||||
label: 'Chengdu'
|
||||
}, {
|
||||
value: 'Shenzhen',
|
||||
label: 'Shenzhen'
|
||||
}, {
|
||||
value: 'Guangzhou',
|
||||
label: 'Guangzhou'
|
||||
}, {
|
||||
value: 'Dalian',
|
||||
label: 'Dalian'
|
||||
}]
|
||||
}],
|
||||
options4: [],
|
||||
options5: [{
|
||||
value: 'HTML',
|
||||
label: 'HTML'
|
||||
}, {
|
||||
value: 'CSS',
|
||||
label: 'CSS'
|
||||
}, {
|
||||
value: 'JavaScript',
|
||||
label: 'JavaScript'
|
||||
}],
|
||||
cities: [{
|
||||
value: 'Beijing',
|
||||
label: 'Beijing'
|
||||
}, {
|
||||
value: 'Shanghai',
|
||||
label: 'Shanghai'
|
||||
}, {
|
||||
value: 'Nanjing',
|
||||
label: 'Nanjing'
|
||||
}, {
|
||||
value: 'Chengdu',
|
||||
label: 'Chengdu'
|
||||
}, {
|
||||
value: 'Shenzhen',
|
||||
label: 'Shenzhen'
|
||||
}, {
|
||||
value: 'Guangzhou',
|
||||
label: 'Guangzhou'
|
||||
}],
|
||||
value: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value4: '',
|
||||
value5: [],
|
||||
value6: '',
|
||||
value7: '',
|
||||
value8: '',
|
||||
value9: [],
|
||||
value10: [],
|
||||
value11: [],
|
||||
loading: false,
|
||||
states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.list = this.states.map(item => { return { value: item, label: item }; });
|
||||
},
|
||||
|
||||
methods: {
|
||||
remoteMethod(query) {
|
||||
if (query !== '') {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.options4 = this.list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
|
||||
}, 200);
|
||||
} else {
|
||||
this.options4 = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-select .el-select {
|
||||
width: 240px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Select
|
||||
|
||||
Cuando haya muchas opciones, utilice un menú desplegable para mostrar y seleccionar las que desee.
|
||||
|
||||
### Uso básico
|
||||
|
||||
:::demo `v-model` es el valor de `el-option` que está seleccionado actualmente.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value" placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2'
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Disabled en el-option
|
||||
|
||||
:::demo Establezca el valor de `disabled` en `el-option` como `true` para deshabilitar esta opción.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value2" placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options2"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options2: [{
|
||||
value: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2',
|
||||
disabled: true
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value2: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Disabled en el-select
|
||||
|
||||
Desactivar todo el componente.
|
||||
|
||||
:::demo Configure `disabled` de `el-select` para deshabilitarla.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value3" disabled placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2'
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value3: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Select simple limpiable
|
||||
|
||||
Puede limpiar un Select con un icono.
|
||||
|
||||
:::demo Establezca el atributo `clearable` para `el-select` y aparecerá un icono. Tenga en cuenta que la opción `clearable` es sólo para una selección individual.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value4" clearable placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2'
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value4: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Selección múltiple básica
|
||||
|
||||
Selección multiple utiliza tags para mostrar las opciones seleccionadas.
|
||||
|
||||
:::demo Configure el atributo `multiple` para `el-select` para habilitar el modo múltiple. En este caso, el valor del `v-model` será un array de opciones seleccionadas. De forma predeterminada, las opciones seleccionadas se mostrarán como tags. Se pueden contraer a un texto utilizando el atributo `collapse-tags`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value5" multiple placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select
|
||||
v-model="value11"
|
||||
multiple
|
||||
collapse-tags
|
||||
style="margin-left: 20px;"
|
||||
placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2'
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value5: []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Personalizar template
|
||||
|
||||
Puede personalizar templates HTML para las opciones.
|
||||
|
||||
:::demo Inserte templates HTML personalizados en el slot de `el-option`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value6" placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in cities"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
<span style="float: left">{{ item.label }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cities: [{
|
||||
value: 'Beijing',
|
||||
label: 'Beijing'
|
||||
}, {
|
||||
value: 'Shanghai',
|
||||
label: 'Shanghai'
|
||||
}, {
|
||||
value: 'Nanjing',
|
||||
label: 'Nanjing'
|
||||
}, {
|
||||
value: 'Chengdu',
|
||||
label: 'Chengdu'
|
||||
}, {
|
||||
value: 'Shenzhen',
|
||||
label: 'Shenzhen'
|
||||
}, {
|
||||
value: 'Guangzhou',
|
||||
label: 'Guangzhou'
|
||||
}],
|
||||
value6: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Agrupando
|
||||
|
||||
Mostrar opciones en grupos.
|
||||
|
||||
:::demo Utilice `el-option-group` para agrupar las opciones, y su atributo `label` representa el nombre del grupo.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value7" placeholder="Select">
|
||||
<el-option-group
|
||||
v-for="group in options3"
|
||||
:key="group.label"
|
||||
:label="group.label">
|
||||
<el-option
|
||||
v-for="item in group.options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options3: [{
|
||||
label: 'Popular cities',
|
||||
options: [{
|
||||
value: 'Shanghai',
|
||||
label: 'Shanghai'
|
||||
}, {
|
||||
value: 'Beijing',
|
||||
label: 'Beijing'
|
||||
}]
|
||||
}, {
|
||||
label: 'City name',
|
||||
options: [{
|
||||
value: 'Chengdu',
|
||||
label: 'Chengdu'
|
||||
}, {
|
||||
value: 'Shenzhen',
|
||||
label: 'Shenzhen'
|
||||
}, {
|
||||
value: 'Guangzhou',
|
||||
label: 'Guangzhou'
|
||||
}, {
|
||||
value: 'Dalian',
|
||||
label: 'Dalian'
|
||||
}]
|
||||
}],
|
||||
value7: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Filtrado de opciones
|
||||
|
||||
Puede filtrar opciones como lo desee.
|
||||
|
||||
:::demo Añadir `filterable` a `el-select` permite filtrar. Por defecto, Select buscará todas las opciones cuyo atributo`label` contenga el valor del input. Si prefiere otras estrategias de filtrado, puede pasar el `filter-method`. `filter-method` es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value8" filterable placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: 'Option1',
|
||||
label: 'Option1'
|
||||
}, {
|
||||
value: 'Option2',
|
||||
label: 'Option2'
|
||||
}, {
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
}, {
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
}, {
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}],
|
||||
value8: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Búsqueda remota
|
||||
|
||||
Introduzca palabras y datos para buscar desde el servidor.
|
||||
|
||||
:::demo Configure el valor de `filterable` y `remote` con `true` para habilitar la búsqueda remota, y debería pasar el método `remote-method`. `remote-method` es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual. Tenga en cuenta que si `el-option` se presenta con la directiva `v-for`, debe agregar el atributo `key` para `el-option`. Su valor tiene que ser unívoco, como el valor de `item.value` en el ejemplo siguiente.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select
|
||||
v-model="value9"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="Please enter a keyword"
|
||||
:remote-method="remoteMethod"
|
||||
:loading="loading">
|
||||
<el-option
|
||||
v-for="item in options4"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options4: [],
|
||||
value9: [],
|
||||
list: [],
|
||||
loading: false,
|
||||
states: ["Alabama", "Alaska", "Arizona",
|
||||
"Arkansas", "California", "Colorado",
|
||||
"Connecticut", "Delaware", "Florida",
|
||||
"Georgia", "Hawaii", "Idaho", "Illinois",
|
||||
"Indiana", "Iowa", "Kansas", "Kentucky",
|
||||
"Louisiana", "Maine", "Maryland",
|
||||
"Massachusetts", "Michigan", "Minnesota",
|
||||
"Mississippi", "Missouri", "Montana",
|
||||
"Nebraska", "Nevada", "New Hampshire",
|
||||
"New Jersey", "New Mexico", "New York",
|
||||
"North Carolina", "North Dakota", "Ohio",
|
||||
"Oklahoma", "Oregon", "Pennsylvania",
|
||||
"Rhode Island", "South Carolina",
|
||||
"South Dakota", "Tennessee", "Texas",
|
||||
"Utah", "Vermont", "Virginia",
|
||||
"Washington", "West Virginia", "Wisconsin",
|
||||
"Wyoming"]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.list = this.states.map(item => {
|
||||
return { value: item, label: item };
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
remoteMethod(query) {
|
||||
if (query !== '') {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.options4 = this.list.filter(item => {
|
||||
return item.label.toLowerCase()
|
||||
.indexOf(query.toLowerCase()) > -1;
|
||||
});
|
||||
}, 200);
|
||||
} else {
|
||||
this.options4 = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Crear nuevos items
|
||||
Crear y seleccionar nuevos items que no están incluidas en las opciones de selección.
|
||||
|
||||
:::demo Al utilizar el atributo `allow-create`, los usuarios pueden crear nuevos elementos escribiendo en el cuadro del input. Tenga en cuenta que para que `allow-create` funcione, `filterable` debe ser `true`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select
|
||||
v-model="value10"
|
||||
multiple
|
||||
filterable
|
||||
allow-create
|
||||
placeholder="Choose tags for your article">
|
||||
<el-option
|
||||
v-for="item in options5"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options5: [{
|
||||
value: 'HTML',
|
||||
label: 'HTML'
|
||||
}, {
|
||||
value: 'CSS',
|
||||
label: 'CSS'
|
||||
}, {
|
||||
value: 'JavaScript',
|
||||
label: 'JavaScript'
|
||||
}],
|
||||
value10: []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
|
||||
Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `value-key` como el nombre único de la clave de identidad.
|
||||
|
||||
:::
|
||||
|
||||
### Select atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------------------- | ---------------------------------------- | -------- | ----------------- | ---------------- |
|
||||
| multiple | si multiple-select esta activo | boolean | — | false |
|
||||
| disabled | si Select esta deshabilitado | boolean | — | false |
|
||||
| collapse-tags | si se colapsan los tags a un texto cuando `multiple` es `true`. | boolean | — | false |
|
||||
| value-key | nombre de clave de identidad única para el valor, necesario cuando el valor es un objeto. | string | — | value |
|
||||
| size | tamaño del Input | string | large/small/mini | — |
|
||||
| clearable | si el single select puede ser limpiable | boolean | — | false |
|
||||
| multiple-limit | maximo numero de opciones que el usuario puede seleccionar cuando `multiple` es `true`. Sin límite cuando se fija a 0 | number | — | 0 |
|
||||
| name | el atributo `name` del input seleccionado | string | — | — |
|
||||
| placeholder | placeholder | string | — | Select |
|
||||
| filterable | si Select es filtrable | boolean | — | false |
|
||||
| allow-create | si esta permitido crear nuevos items. Para usar esto, `filterable` debe ser `true`. | boolean | — | false |
|
||||
| filter-method | metodo de filtrado personalizado | function | — | — |
|
||||
| remote | si las opciones se traeran desde el servidor | boolean | — | false |
|
||||
| remote-method | metodo de busqueda remota personalizada | function | — | — |
|
||||
| loading | si Select está cargando datos del servidor | boolean | — | false |
|
||||
| loading-text | texto mostrado durante la carga de datos del servidor | string | — | Loading |
|
||||
| no-match-text | texto mostrado cuando ningún dato coincide con la consulta de filtrado. | string | — | No matching data |
|
||||
| no-data-text | texto mostrado cuando no hay opciones | string | — | No data |
|
||||
| popper-class | nombre de clase personalizado para el menú desplegable del Select | string | — | — |
|
||||
| reserve-keyword | cuando `multiple` y `filter` es `true`, si se debe reservar la palabra clave actual después de seleccionar una opción. | boolean | — | false |
|
||||
| default-first-option | seleccione la primera opción de coincidencia en la tecla enter. Uso con `filterable` o `remote`. | boolean | - | false |
|
||||
|
||||
### Eventos Select
|
||||
| Nombre | Descripción | Parametros |
|
||||
| -------------- | ---------------------------------------- | ---------------------------------------- |
|
||||
| change | se dispara cuando el valor del select cambia | valor actual del select |
|
||||
| visible-change | se dispara cuando el menu desplegable aparece o desaparece | true cuando aparece, y false en otro caso |
|
||||
| remove-tag | se dispara cuando un tag es removido en modo multiple | el valor del tag removido |
|
||||
| clear | se dispara cuando el icono se clickea en un Select limpiable | — |
|
||||
| blur | se dispara cuando el input pierde el foco | (event: Event) |
|
||||
| focus | se dispara cuando el input obtiene el foco | (event: Event) |
|
||||
|
||||
### Atributos del grupo de opciones
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ---------------------------------------- | ------- | ----------------- | ----------- |
|
||||
| label | nombre del grupo | string | — | — |
|
||||
| disabled | si se deshabilitan todas las opciones del grupo | boolean | — | false |
|
||||
|
||||
### Atributos de opciones
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ---------------------------------------- | -------------------- | ----------------- | ----------- |
|
||||
| value | valor de option | string/number/object | — | — |
|
||||
| label | etiqueta de option, es igual a `value` si se omite | string/number | — | — |
|
||||
| disabled | si option esta deshabilitado | boolean | — | false |
|
||||
|
||||
### Metodos
|
||||
| Metodo | Descripción | Parametros |
|
||||
| ------ | --------------------------- | ---------- |
|
||||
| focus | Foco en el componente input | - |
|
||||
|
|
@ -0,0 +1,252 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: 0,
|
||||
value2: 50,
|
||||
value3: 36,
|
||||
value4: 48,
|
||||
value5: 42,
|
||||
value6: 0,
|
||||
value7: 0,
|
||||
value8: 0,
|
||||
value9: [4, 8],
|
||||
value10: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
formatTooltip(val) {
|
||||
return val / 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-box.demo-slider .source {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.demo-box.demo-slider .block {
|
||||
padding: 30px 24px;
|
||||
overflow: hidden;
|
||||
border-bottom: solid 1px #EFF2F6;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-box.demo-slider .demonstration {
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.demo-box.demo-slider .demonstration + .el-slider {
|
||||
float: right;
|
||||
width: 70%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Slider
|
||||
|
||||
Desliza el slider dentro de un rango fijo.
|
||||
|
||||
### Uso básico
|
||||
|
||||
El valor actual se muestra cuando se inicia el arrastre del slider.
|
||||
|
||||
:::demo Personalice el valor inicial del slider configurando el valor vinculado.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Default value</span>
|
||||
<el-slider v-model="value1"></el-slider>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Customized initial value</span>
|
||||
<el-slider v-model="value2"></el-slider>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Hide Tooltip</span>
|
||||
<el-slider v-model="value3" :show-tooltip="false"></el-slider>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Format Tooltip</span>
|
||||
<el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Disabled</span>
|
||||
<el-slider v-model="value5" disabled></el-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: 0,
|
||||
value2: 50,
|
||||
value3: 36,
|
||||
value4: 48,
|
||||
value5: 42
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatTooltip(val) {
|
||||
return val / 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Valores discretos
|
||||
|
||||
Las opciones pueden ser discretas.
|
||||
|
||||
:::demo Configure el tamaño del paso con el atributo `step`. Puede visualizar los puntos de ruptura configurando el atributo `show-stops`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">Breakpoints not displayed</span>
|
||||
<el-slider
|
||||
v-model="value6"
|
||||
:step="10">
|
||||
</el-slider>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Breakpoints displayed</span>
|
||||
<el-slider
|
||||
v-model="value7"
|
||||
:step="10"
|
||||
show-stops>
|
||||
</el-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value6: 0,
|
||||
value7: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Slider con input
|
||||
|
||||
Inserte el valor a traves de un input
|
||||
|
||||
:::demo Configure el atributo `show-input` para que muestre un input a la derecha.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<el-slider
|
||||
v-model="value8"
|
||||
show-input>
|
||||
</el-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value8: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Seleccion de rangos
|
||||
|
||||
Se soporta la selección de un rango de valores.
|
||||
|
||||
:::demo El ajuste del atributo `range` activa el modo range, donde el valor vinculado es un array compuesto por dos valores límite.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<el-slider
|
||||
v-model="value9"
|
||||
range
|
||||
show-stops
|
||||
:max="10">
|
||||
</el-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value9: [4, 8]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Modo Vertical
|
||||
|
||||
:::demo El ajuste del atributo `vertical` a `true` habilita el modo vertical. En el modo vertical, se requiere el atributo `height` .
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<el-slider
|
||||
v-model="value10"
|
||||
vertical
|
||||
height="200px">
|
||||
</el-slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value10: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------------- | ---------------------------------------- | --------------- | ----------------- | ----------- |
|
||||
| min | valor minimo | number | — | 0 |
|
||||
| max | valor máximo | number | — | 100 |
|
||||
| disabled | si el Slider esta deshabitado | boolean | — | false |
|
||||
| step | tamaño del paso | number | — | 1 |
|
||||
| show-input | Si se muestra el input, trabaja cuando`range`es false | boolean | — | false |
|
||||
| show-input-controls | si se muestran los botones de control cuando`show-input`es true | boolean | — | true |
|
||||
| show-stops | si se muestran los puntos de ruptura (breakpoints) | boolean | — | false |
|
||||
| show-tooltip | si se muestra el valor en un tooltip | boolean | — | true |
|
||||
| format-tooltip | formato para mostrar el valor del tooltip | function(value) | — | — |
|
||||
| range | si se usaran un rango | boolean | — | false |
|
||||
| vertical | modo vertical | boolean | — | false |
|
||||
| height | alto del Slider, requerido en modo vertical | string | — | — |
|
||||
| label | etiqueta para screen reader | string | — | — |
|
||||
| debounce | retardo al escribir, en milisegundos, funciona cuando`show-input` es true. | number | — | 300 |
|
||||
|
||||
## Eventos
|
||||
| Nombre | Descripción | Parametros |
|
||||
| ------ | ---------------------------------------- | ------------------------ |
|
||||
| change | se dispara cuando el valor cambia (si el ratón está comenzando el arrastre este evento sólo se disparara cuando se suelte el ratón) | valor despues del cambio |
|
||||
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
next() {
|
||||
if (this.active++ > 2) this.active = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Steps
|
||||
|
||||
Guía al usuario para completar tareas de acuerdo con el proceso. Sus pasos pueden configurarse de acuerdo con el escenario de aplicación real y el número de pasos no puede ser inferior a dos.
|
||||
|
||||
### Uso básico
|
||||
|
||||
Barra de pasos simple.
|
||||
|
||||
:::demo Defina el atributo `active` con un valor de tipo `Number`, que indica el índice de pasos y comienza desde 0. Puede definir el atributo `space` cuando es necesario fijar el ancho del paso que acepta el tipo `Boolean`. La unidad del atributo `space` es px. Si no está configurado, es responsive. La configuración del atributo `finish-status` puede cambiar el estado de los pasos completados.
|
||||
|
||||
```html
|
||||
<el-steps :active="active" finish-status="success">
|
||||
<el-step title="Step 1"></el-step>
|
||||
<el-step title="Step 2"></el-step>
|
||||
<el-step title="Step 3"></el-step>
|
||||
</el-steps>
|
||||
|
||||
<el-button style="margin-top: 12px;" @click="next">Next step</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
next() {
|
||||
if (this.active++ > 2) this.active = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Step bar con el status
|
||||
|
||||
Muestra el estado del step para cada paso.
|
||||
|
||||
:::demo Utilice el atributo `title` para establecer el nombre del paso, o sobreescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.
|
||||
|
||||
```html
|
||||
<el-steps :space="200" :active="1" finish-status="success">
|
||||
<el-step title="Done"></el-step>
|
||||
<el-step title="Processing"></el-step>
|
||||
<el-step title="Step 3"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### Centrado
|
||||
|
||||
El título y la descripción pueden estar centrados.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-steps :active="2" align-center>
|
||||
<el-step title="Step 1" description="Some description"></el-step>
|
||||
<el-step title="Step 2" description="Some description"></el-step>
|
||||
<el-step title="Step 3" description="Some description"></el-step>
|
||||
<el-step title="Step 4" description="Some description"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### Step bar con descripción
|
||||
|
||||
Puede poner una descripción para cada paso.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-steps :active="1">
|
||||
<el-step title="Step 1" description="Some description"></el-step>
|
||||
<el-step title="Step 2" description="Some description"></el-step>
|
||||
<el-step title="Step 3" description="Some description"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### Step bar with icon
|
||||
|
||||
En la barra de pasos se pueden utilizar diversos iconos personalizados.
|
||||
|
||||
:::demo El icono se define mediante la propiedad `icon`. Los tipos de iconos se pueden encontrar en la descripción del componente Icono. Además, puede personalizar el icono a través de un slot con nombre.
|
||||
|
||||
```html
|
||||
<el-steps :active="1">
|
||||
<el-step title="Step 1" icon="el-icon-edit"></el-step>
|
||||
<el-step title="Step 2" icon="el-icon-upload"></el-step>
|
||||
<el-step title="Step 3" icon="el-icon-picture"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### Step bar vertical
|
||||
|
||||
Step bar vertical.
|
||||
|
||||
:::demo Sólo tiene que fijar el atributo `direction` a ` vertical` en el elemento `el-steps`.
|
||||
|
||||
```html
|
||||
<div style="height: 300px;">
|
||||
<el-steps direction="vertical" :active="1">
|
||||
<el-step title="Step 1"></el-step>
|
||||
<el-step title="Step 2"></el-step>
|
||||
<el-step title="Step 3"></el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### Step bar simple
|
||||
Step bar simple, donde se ignorará `align-center`, `description`, `direction` y `space`.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
|
||||
<el-steps :space="200" :active="1" simple>
|
||||
<el-step title="Step 1" icon="el-icon-edit"></el-step>
|
||||
<el-step title="Step 2" icon="el-icon-upload"></el-step>
|
||||
<el-step title="Step 3" icon="el-icon-picture"></el-step>
|
||||
</el-steps>
|
||||
|
||||
<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
|
||||
<el-step title="Step 1" ></el-step>
|
||||
<el-step title="Step 2" ></el-step>
|
||||
<el-step title="Step 3" ></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### Steps atributos
|
||||
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------------- | ---------------------------------------- | --------------- | ---------------------------------------- | ----------- |
|
||||
| space | el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje. | number / string | — | — |
|
||||
| direction | dirección de visualización | string | vertical/horizontal | horizontal |
|
||||
| active | actual paso de activación | number | — | 0 |
|
||||
| process-status | status del paso actual | string | wait / process / finish / error / success | process |
|
||||
| finish-status | status del paso final | string | wait / process / finish / error / success | finish |
|
||||
| align-center | centrado de título y descripción | boolean | — | false |
|
||||
| simple | si aplicar un tema simple | boolean | - | false |
|
||||
|
||||
### Step atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ----------- | ---------------------------------------- | ---------------------------------------- | ----------------- | ----------- |
|
||||
| title | titulo del paso | string | — | — |
|
||||
| description | descripción del paso | string | — | — |
|
||||
| icon | icono del paso | nombre de la clase del icono del paso. Los iconos también se pueden pasar a través del slot con nombre | string | — |
|
||||
| status | estado actual. Se configurará automáticamente mediante Steps si no está configurado. | wait / process / finish / error / success | - | |
|
||||
|
||||
### Step Slot
|
||||
| Name | Description |
|
||||
| ----------- | -------------------- |
|
||||
| icon | Icono personalizado |
|
||||
| title | Titulo del paso |
|
||||
| description | Descripcion del paso |
|
||||
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
<style>
|
||||
.demo-box.demo-switch {
|
||||
.el-switch {
|
||||
margin: 20px 20px 20px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: true,
|
||||
value2: true,
|
||||
value3: true,
|
||||
value4: true,
|
||||
value5: '100',
|
||||
value6: true,
|
||||
value7: false
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Switch
|
||||
|
||||
Switch es utilizdo para realizar cambios entre dos estados opuestos.
|
||||
|
||||
### Uso básico
|
||||
|
||||
:::demo Enlace `v-model` a una variable de tipo `Boolean`. Los atributos `active-color` y `inactive-color` deciden el color de fondo en cada estado.
|
||||
|
||||
```html
|
||||
<el-switch v-model="value1">
|
||||
</el-switch>
|
||||
<el-switch
|
||||
v-model="value2"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949">
|
||||
</el-switch>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: true,
|
||||
value2: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Texto de descripción
|
||||
:::demo Puede agregar los atributos `active-text` y `inactive-text` para mostrar los textos.
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
active-text="Pay by month"
|
||||
inactive-text="Pay by year">
|
||||
</el-switch>
|
||||
<el-switch
|
||||
style="display: block"
|
||||
v-model="value4"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
active-text="Pay by month"
|
||||
inactive-text="Pay by year">
|
||||
</el-switch>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value3: true,
|
||||
value4: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Tipos de valores extendidos
|
||||
|
||||
:::demo Puede establecer los atributos `active-value` y `inactive-value`. Ambos reciben valores de tipo `Boolean`, `String` o `Number`.
|
||||
|
||||
```html
|
||||
<el-tooltip :content="'Switch value: ' + value5" placement="top">
|
||||
<el-switch
|
||||
v-model="value5"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
active-value="100"
|
||||
inactive-value="0">
|
||||
</el-switch>
|
||||
</el-tooltip>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value5: '100'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Disabled
|
||||
|
||||
:::demo Agregar el atributo `disabled` desactiva el componente Switch.
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
v-model="value6"
|
||||
disabled>
|
||||
</el-switch>
|
||||
<el-switch
|
||||
v-model="value7"
|
||||
disabled>
|
||||
</el-switch>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value6: true,
|
||||
value7: false
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos
|
||||
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------------- | ---------------------------------------- | ------------------------- | ----------------- | ----------- |
|
||||
| disabled | si Switch esta deshabilitado | boolean | — | false |
|
||||
| width | ancho del componente Switch | number | — | 40 |
|
||||
| active-icon-class | nombre de la clase del icono mostrado en el estado `on`, sobreescribe `active-text` | string | — | — |
|
||||
| inactive-icon-class | nombre de la clase del icono mostrado en el estado `off`, sobreescribe `inactive-text` | string | — | — |
|
||||
| active-text | texto mostrado en el estado `on` | string | — | — |
|
||||
| inactive-text | texto mostrado en el estado `off` | string | — | — |
|
||||
| active-value | cambia su valor cuando se encuentra en el estado `on` | boolean / string / number | — | true |
|
||||
| inactive-value | cambia su valor cuando se encuentra en el estado `off` | boolean / string / number | — | false |
|
||||
| active-color | color de fondo cuando se encuentra en el estado `on` | string | — | #409EFF |
|
||||
| inactive-color | color de fondo cuando se encuentra en el estado `off` | string | — | #C0CCDA |
|
||||
| name | nombre de entrada del componente Switch | string | — | — |
|
||||
|
||||
### Eventos
|
||||
|
||||
| Nombre del evento | Descripción | Parametro |
|
||||
| ----------------- | --------------------------------- | --------- |
|
||||
| change | se dispara cuando el valor cambia | valor |
|
||||
después de cambiar
|
||||
|
||||
### Metodos
|
||||
| Metodo | Descripción | Parametro |
|
||||
| ------ | ------------------------- | --------- |
|
||||
| focus | foco al componente Switch | — |
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,394 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: 'second',
|
||||
activeName2: 'first',
|
||||
editableTabsValue: '2',
|
||||
editableTabsValue2: '2',
|
||||
editableTabs: [{
|
||||
title: 'Tab 1',
|
||||
name: '1',
|
||||
content: 'Tab 1 content'
|
||||
}, {
|
||||
title: 'Tab 2',
|
||||
name: '2',
|
||||
content: 'Tab 2 content'
|
||||
}],
|
||||
editableTabs2: [{
|
||||
title: 'Tab 1',
|
||||
name: '1',
|
||||
content: 'Tab 1 content'
|
||||
}, {
|
||||
title: 'Tab 2',
|
||||
name: '2',
|
||||
content: 'Tab 2 content'
|
||||
}],
|
||||
tabIndex: 2,
|
||||
tabPosition: 'top'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
},
|
||||
handleTabsEdit(targetName, action) {
|
||||
if (action === 'add') {
|
||||
let newTabName = ++this.tabIndex + '';
|
||||
this.editableTabs.push({
|
||||
title: 'New Tab',
|
||||
name: newTabName,
|
||||
content: 'New Tab content'
|
||||
});
|
||||
this.editableTabsValue = newTabName;
|
||||
}
|
||||
if (action === 'remove') {
|
||||
let tabs = this.editableTabs;
|
||||
let activeName = this.editableTabsValue;
|
||||
if (activeName === targetName) {
|
||||
tabs.forEach((tab, index) => {
|
||||
if (tab.name === targetName) {
|
||||
let nextTab = tabs[index + 1] || tabs[index - 1];
|
||||
if (nextTab) {
|
||||
activeName = nextTab.name;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.editableTabsValue = activeName;
|
||||
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
|
||||
}
|
||||
},
|
||||
addTab(targetName) {
|
||||
let newTabName = ++this.tabIndex + '';
|
||||
this.editableTabs2.push({
|
||||
title: 'New Tab',
|
||||
name: newTabName,
|
||||
content: 'New Tab content'
|
||||
});
|
||||
this.editableTabsValue2 = newTabName;
|
||||
},
|
||||
removeTab(targetName) {
|
||||
let tabs = this.editableTabs2;
|
||||
let activeName = this.editableTabsValue2;
|
||||
if (activeName === targetName) {
|
||||
tabs.forEach((tab, index) => {
|
||||
if (tab.name === targetName) {
|
||||
let nextTab = tabs[index + 1] || tabs[index - 1];
|
||||
if (nextTab) {
|
||||
activeName = nextTab.name;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.editableTabsValue2 = activeName;
|
||||
this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Tabulación
|
||||
|
||||
Divide colecciones de datos que están relacionados pero pertenecen a diferentes tipos.
|
||||
|
||||
### Uso básico
|
||||
|
||||
Tabulación básica y concisa
|
||||
|
||||
:::demo Tabulación provee funcionalidad de tarjeta selectiva. Por defecto, la primer pestaña es seleccionada como activa, y es posible activar cualquier pestaña estableciendo el atributo de `value`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="User" name="first">User</el-tab-pane>
|
||||
<el-tab-pane label="Config" name="second">Config</el-tab-pane>
|
||||
<el-tab-pane label="Role" name="third">Role</el-tab-pane>
|
||||
<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Estilo de Tarjeta
|
||||
|
||||
Pestañas diseñadas como tarjetas.
|
||||
|
||||
:::demo Establecer `type` a `card` para obtener una pestaña diseñada como tarjeta.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-tabs type="card" @tab-click="handleClick">
|
||||
<el-tab-pane label="User">User</el-tab-pane>
|
||||
<el-tab-pane label="Config">Config</el-tab-pane>
|
||||
<el-tab-pane label="Role">Role</el-tab-pane>
|
||||
<el-tab-pane label="Task">Task</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Tarjeta con Bordes
|
||||
|
||||
Pestañas de tarjeta con bordes.
|
||||
|
||||
:::demo Establecer `type` a `border-card`.
|
||||
|
||||
```html
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="User">User</el-tab-pane>
|
||||
<el-tab-pane label="Config">Config</el-tab-pane>
|
||||
<el-tab-pane label="Role">Role</el-tab-pane>
|
||||
<el-tab-pane label="Task">Task</el-tab-pane>
|
||||
</el-tabs>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Posición de tabulación
|
||||
|
||||
Es posible usar el atributo `tab-position` para establecer la posición de la tabulación.
|
||||
|
||||
:::demo Es posible escoger entre cuatro direcciones: `tabPosition="left|right|top|bottom"`
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
|
||||
<el-radio-button label="top">top</el-radio-button>
|
||||
<el-radio-button label="right">right</el-radio-button>
|
||||
<el-radio-button label="bottom">bottom</el-radio-button>
|
||||
<el-radio-button label="left">left</el-radio-button>
|
||||
</el-radio-group>
|
||||
|
||||
<el-tabs :tab-position="tabPosition" style="height: 200px;">
|
||||
<el-tab-pane label="User">User</el-tab-pane>
|
||||
<el-tab-pane label="Config">Config</el-tab-pane>
|
||||
<el-tab-pane label="Role">Role</el-tab-pane>
|
||||
<el-tab-pane label="Task">Task</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabPosition: 'top'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Pestaña Personalizada
|
||||
|
||||
Es posible usar slots con nombre para personalizar el contenido de la etiqueta de la pestaña.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane>
|
||||
<span slot="label"><i class="el-icon-date"></i> Route</span>
|
||||
Route
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Config">Config</el-tab-pane>
|
||||
<el-tab-pane label="Role">Role</el-tab-pane>
|
||||
<el-tab-pane label="Task">Task</el-tab-pane>
|
||||
</el-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
### Agregar y cerrar pestaña
|
||||
|
||||
Solo las pestañas de tipo tarjeta soportan adición y cierre.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in editableTabs"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
>
|
||||
{{item.content}}
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
editableTabsValue: '2',
|
||||
editableTabs: [{
|
||||
title: 'Tab 1',
|
||||
name: '1',
|
||||
content: 'Tab 1 content'
|
||||
}, {
|
||||
title: 'Tab 2',
|
||||
name: '2',
|
||||
content: 'Tab 2 content'
|
||||
}],
|
||||
tabIndex: 2
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTabsEdit(targetName, action) {
|
||||
if (action === 'add') {
|
||||
let newTabName = ++this.tabIndex + '';
|
||||
this.editableTabs.push({
|
||||
title: 'New Tab',
|
||||
name: newTabName,
|
||||
content: 'New Tab content'
|
||||
});
|
||||
this.editableTabsValue = newTabName;
|
||||
}
|
||||
if (action === 'remove') {
|
||||
let tabs = this.editableTabs;
|
||||
let activeName = this.editableTabsValue;
|
||||
if (activeName === targetName) {
|
||||
tabs.forEach((tab, index) => {
|
||||
if (tab.name === targetName) {
|
||||
let nextTab = tabs[index + 1] || tabs[index - 1];
|
||||
if (nextTab) {
|
||||
activeName = nextTab.name;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.editableTabsValue = activeName;
|
||||
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Botón disparador personalizado de la nueva pestaña
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div style="margin-bottom: 20px;">
|
||||
<el-button
|
||||
size="small"
|
||||
@click="addTab(editableTabsValue2)"
|
||||
>
|
||||
add tab
|
||||
</el-button>
|
||||
</div>
|
||||
<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in editableTabs2"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
>
|
||||
{{item.content}}
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
editableTabsValue2: '2',
|
||||
editableTabs2: [{
|
||||
title: 'Tab 1',
|
||||
name: '1',
|
||||
content: 'Tab 1 content'
|
||||
}, {
|
||||
title: 'Tab 2',
|
||||
name: '2',
|
||||
content: 'Tab 2 content'
|
||||
}],
|
||||
tabIndex: 2
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addTab(targetName) {
|
||||
let newTabName = ++this.tabIndex + '';
|
||||
this.editableTabs2.push({
|
||||
title: 'New Tab',
|
||||
name: newTabName,
|
||||
content: 'New Tab content'
|
||||
});
|
||||
this.editableTabsValue2 = newTabName;
|
||||
},
|
||||
removeTab(targetName) {
|
||||
let tabs = this.editableTabs2;
|
||||
let activeName = this.editableTabsValue2;
|
||||
if (activeName === targetName) {
|
||||
tabs.forEach((tab, index) => {
|
||||
if (tab.name === targetName) {
|
||||
let nextTab = tabs[index + 1] || tabs[index - 1];
|
||||
if (nextTab) {
|
||||
activeName = nextTab.name;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.editableTabsValue2 = activeName;
|
||||
this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos de Pestañas
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------ | ------------------------------------ | ------- | --------------------- | --------------------------- |
|
||||
| type | tipo de Pestaña | string | card/border-card | — |
|
||||
| closable | si la Pestaña es cerrable | boolean | — | false |
|
||||
| addable | si la Pestaña es añadible | boolean | — | false |
|
||||
| editable | si la Pestaña es añadible y cerrable | boolean | — | false |
|
||||
| value | nombre de la pestaña seleccionada | string | — | nombre de la primer pestaña |
|
||||
| tab-position | posición de tabulación | string | top/right/bottom/left | top |
|
||||
|
||||
### Eventos de Pestañas
|
||||
| Nombre de Evento | Descripción | Parámetros |
|
||||
| ---------------- | ---------------------------------------- | ----------------------------- |
|
||||
| tab-click | se lanza cuando se hace click a una pestaña | pestaña clickeada |
|
||||
| tab-remove | se lanza cuando se hace click al botón tab-remove | nombre de la pestaña removida |
|
||||
| tab-add | se lanza cuando se hace click al botón tab-add | — |
|
||||
| edit | se lanza cuando los botones de tab-add y/o tab-remove son clickeados | (targetName, action) |
|
||||
|
||||
### Attributos del Tab-pane
|
||||
| Atributo | Descripción | Tipo | Valores Aceptados | Default |
|
||||
| -------- | ---------------------------------------- | ------- | ----------------- | ---------------------------------------- |
|
||||
| label | título de la pestaña | string | — | — |
|
||||
| disabled | si la Tabulación está deshabilitada | boolean | — | false |
|
||||
| name | identificador correspondiente al activeName de la Tabulación, representando el alias del tab-pane | string | — | número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1' |
|
||||
| closable | si el Tab es cerrable | boolean | — | false |
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tags: [
|
||||
{ name: 'Tag 1', type: '' },
|
||||
{ name: 'Tag 2', type: 'success' },
|
||||
{ name: 'Tag 3', type: 'info' },
|
||||
{ name: 'Tag 4', type: 'warning' },
|
||||
{ name: 'Tag 5', type: 'danger' }
|
||||
],
|
||||
dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
|
||||
inputVisible: false,
|
||||
inputValue: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClose(tag) {
|
||||
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
|
||||
},
|
||||
|
||||
showInput() {
|
||||
this.inputVisible = true;
|
||||
this.$nextTick(_ => {
|
||||
this.$refs.saveTagInput.$refs.input.focus();
|
||||
});
|
||||
},
|
||||
|
||||
handleInputConfirm() {
|
||||
let inputValue = this.inputValue;
|
||||
if (inputValue) {
|
||||
this.dynamicTags.push(inputValue);
|
||||
}
|
||||
this.inputVisible = false;
|
||||
this.inputValue = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-box.demo-tag {
|
||||
.el-tag + .el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.button-new-tag {
|
||||
margin-left: 10px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding: 0 *;
|
||||
}
|
||||
.input-new-tag {
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Tag
|
||||
|
||||
Se utiliza para marcar y seleccionar.
|
||||
|
||||
### Uso básico
|
||||
|
||||
::: demo Utilice el atributo `type` para definir el tipo de etiqueta. Además, el atributo `color` se puede utilizar para establecer el color de fondo de la etiqueta.
|
||||
|
||||
```html
|
||||
<el-tag>Tag One</el-tag>
|
||||
<el-tag type="success">Tag Two</el-tag>
|
||||
<el-tag type="info">Tag Three</el-tag>
|
||||
<el-tag type="warning">Tag Four</el-tag>
|
||||
<el-tag type="danger">Tag Five</el-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
### Etiqueta removible
|
||||
|
||||
:::demo el atributo `closable` puede usarse para definir una etiqueta removible. Acepta un `Boolean`. De forma predeterminada, la eliminación de la etiqueta tiene una animación que se desvanece. Si no quiere usarlo, puede configurar el atributo `disable-transitions` , que acepta `Boolean`, como `true`. Se dispara el evento `close` cuando la etiqueta es removida.
|
||||
|
||||
```html
|
||||
<el-tag
|
||||
v-for="tag in tags"
|
||||
:key="tag.name"
|
||||
closable
|
||||
:type="tag.type">
|
||||
{{tag.name}}
|
||||
</el-tag>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tags: [
|
||||
{ name: 'Tag 1', type: '' },
|
||||
{ name: 'Tag 2', type: 'success' },
|
||||
{ name: 'Tag 3', type: 'info' },
|
||||
{ name: 'Tag 4', type: 'warning' },
|
||||
{ name: 'Tag 5', type: 'danger' }
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Editar dinámicamente
|
||||
|
||||
Puede utilizar el evento `close` para añadir y eliminar etiquetas dinámicamente.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-tag
|
||||
:key="tag"
|
||||
v-for="tag in dynamicTags"
|
||||
closable
|
||||
:disable-transitions="false"
|
||||
@close="handleClose(tag)">
|
||||
{{tag}}
|
||||
</el-tag>
|
||||
<el-input
|
||||
class="input-new-tag"
|
||||
v-if="inputVisible"
|
||||
v-model="inputValue"
|
||||
ref="saveTagInput"
|
||||
size="mini"
|
||||
@keyup.enter.native="handleInputConfirm"
|
||||
@blur="handleInputConfirm"
|
||||
>
|
||||
</el-input>
|
||||
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
|
||||
|
||||
<style>
|
||||
.el-tag + .el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.button-new-tag {
|
||||
margin-left: 10px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.input-new-tag {
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
|
||||
inputVisible: false,
|
||||
inputValue: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClose(tag) {
|
||||
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
|
||||
},
|
||||
|
||||
showInput() {
|
||||
this.inputVisible = true;
|
||||
this.$nextTick(_ => {
|
||||
this.$refs.saveTagInput.$refs.input.focus();
|
||||
});
|
||||
},
|
||||
|
||||
handleInputConfirm() {
|
||||
let inputValue = this.inputValue;
|
||||
if (inputValue) {
|
||||
this.dynamicTags.push(inputValue);
|
||||
}
|
||||
this.inputVisible = false;
|
||||
this.inputValue = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Tamaños
|
||||
|
||||
Además del tamaño predeterminado, el componente Tag proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios.
|
||||
|
||||
:::demo Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `small` o `mini`.
|
||||
|
||||
```html
|
||||
<el-tag>Default</el-tag>
|
||||
<el-tag size="medium">Medium</el-tag>
|
||||
<el-tag size="small">Small</el-tag>
|
||||
<el-tag size="mini">Mini</el-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------------- | ----------------------------------- | ------- | --------------------------- | ----------- |
|
||||
| type | tema | string | success/info/warning/danger | — |
|
||||
| closable | si el Tag puede ser removido | boolean | — | false |
|
||||
| disable-transitions | si se deshabilitan las animaciones | boolean | — | false |
|
||||
| hit | si el Tag tiene un borde resaltado | boolean | — | false |
|
||||
| color | color de fondo del Tag | string | — | — |
|
||||
| size | tamaño del Tag | string | medium / small / mini | — |
|
||||
|
||||
|
||||
### Eventos
|
||||
| Nombre | Descripción | Parametros |
|
||||
| ------ | ------------------------------------ | ---------- |
|
||||
| close | se disoara cuando el Tag es removido | — |
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
<style>
|
||||
.demo-box {
|
||||
.el-date-editor + .el-date-editor {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Selector de Tiempo
|
||||
|
||||
Use el Time Picker para input de tipo time.
|
||||
|
||||
### Selector de tiempo fijo
|
||||
|
||||
Provee una lista de tiempo fijo para que los usuarios escogan.
|
||||
|
||||
:::demo Use el tag `el-time-select`, se pueden asignar tiempo de inicio, tiempo de finalización y salto de tiempo con `start`, `end` y `step`.
|
||||
```html
|
||||
<el-time-select
|
||||
v-model="value1"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30'
|
||||
}"
|
||||
placeholder="Select time">
|
||||
</el-time-select>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Selector de tiempo arbitrario
|
||||
|
||||
Un tiempo arbitrario puede ser escogido.
|
||||
|
||||
:::demo Al usar el tag `el-time-picker`, es posible limitar el rango de tiempo al especificar `selectableRange`. Por defecto, es posible hacer scroll con la rueda del mouse para escoger el tiempo, alternativamente se pueden utilizar las flechas de control cuando el atributo `arrow-control` esté establecido.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-time-picker
|
||||
v-model="value2"
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
placeholder="Arbitrary time">
|
||||
</el-time-picker>
|
||||
<el-time-picker
|
||||
arrow-control
|
||||
v-model="value3"
|
||||
:picker-options="{
|
||||
selectableRange: '18:30:00 - 20:30:00'
|
||||
}"
|
||||
placeholder="Arbitrary time">
|
||||
</el-time-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value2: new Date(2016, 9, 10, 18, 40),
|
||||
value3: new Date(2016, 9, 10, 18, 40)
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Rango de tiempo fijo
|
||||
|
||||
Si se escoge el tiempo de inicio al principio, el tiempo de finalización cambiará respectivamente.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-time-select
|
||||
placeholder="Start time"
|
||||
v-model="startTime"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30'
|
||||
}">
|
||||
</el-time-select>
|
||||
<el-time-select
|
||||
placeholder="End time"
|
||||
v-model="endTime"
|
||||
:picker-options="{
|
||||
start: '08:30',
|
||||
step: '00:15',
|
||||
end: '18:30',
|
||||
minTime: startTime
|
||||
}">
|
||||
</el-time-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Rango de tiempo arbitrario
|
||||
|
||||
Es posible escoger un rango de tiempo arbitrario.
|
||||
|
||||
:::demo Es posible seleccionar un rango de tiempo al añadir el atributo `is-range`. También, `arrow-control` es soportado en modo de rango.
|
||||
```html
|
||||
<template>
|
||||
<el-time-picker
|
||||
is-range
|
||||
v-model="value4"
|
||||
range-separator="To"
|
||||
start-placeholder="Start time"
|
||||
end-placeholder="End time">
|
||||
</el-time-picker>
|
||||
<el-time-picker
|
||||
is-range
|
||||
arrow-control
|
||||
v-model="value5"
|
||||
range-separator="To"
|
||||
start-placeholder="Start time"
|
||||
end-placeholder="End time">
|
||||
</el-time-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
|
||||
value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: new Date(2016, 9, 10, 18, 40),
|
||||
value3: new Date(2016, 9, 10, 18, 40),
|
||||
value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
|
||||
value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ----------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ----------- |
|
||||
| readonly | si el Time Picker está en modo de sólo lectura | boolean | — | false |
|
||||
| disabled | si el Time Picker se encuentra deshabilitado | boolean | — | false |
|
||||
| editable | si el input puede ser editado | boolean | — | true |
|
||||
| clearable | si mostrar el botón de borrado | boolean | — | true |
|
||||
| size | tamaño del input | string | medium / small / mini | — |
|
||||
| placeholder | placeholder en un modo fuera de rango | string | — | — |
|
||||
| start-placeholder | placeholder para el tiempo de inicio en modo de rango | string | — | — |
|
||||
| end-placeholder | placeholder para el tiempo de finalización en modo de rango | string | — | — |
|
||||
| is-range | si es posible escoger un rango de tiempo, solo funciona con `<el-time-picker>` | boolean | — | false |
|
||||
| arrow-control | si es posible escoger el tiempo usando los botones de flecha, solo funciona con `<el-time-picker>` | boolean | — | false |
|
||||
| value | valor del selector | Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
|
||||
| align | alineación | left / center / right | left | |
|
||||
| popper-class | nombre de clase personalizada para el dropdown del Time Picker | string | — | — |
|
||||
| picker-options | opciones adicionales, revisar la tabla posterior | object | — | {} |
|
||||
| range-separator | separador de rango | string | - | '-' |
|
||||
| default-value | opcional, fecha por defecto del calendario | Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo | cualquier cosa aceptada por `new Date()` para el Selector de Tiempo, Selector de Tiempo, valor seleccionable para el Seleccionador de Tiempo | — |
|
||||
| value-format | opcional, solo para Time Picker, formato de valor limitado | string | hour `HH`, minute `mm`, second `ss` | — |
|
||||
| name | como `name` en input nativo | string | — | — |
|
||||
|
||||
### Opciones para Time Picker
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ---------------------------------------- | ------ | ----------------- | ----------- |
|
||||
| start | tiempo de inicio | string | — | 09:00 |
|
||||
| end | tiempo de finalización | string | — | 18:00 |
|
||||
| step | salto de tiempo | string | — | 00:30 |
|
||||
| minTime | tiempo mínimo, cualquier tiempo antes de éste será deshabilitado | string | — | 00:00 |
|
||||
| maxTime | tiempo máximo, cualquier tiempo después de éste será deshabilitado | string | — | — |
|
||||
|
||||
### Opciones para Time Picker
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| --------------- | ---------------------------------------- | -------------- | ----------------------------------- | ----------- |
|
||||
| selectableRange | rango de tiempo disponible p.ej. `'18:30:00 - 20:30:00'`ó`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |
|
||||
| format | formato para el selector | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
|
||||
|
||||
|
||||
### Eventos
|
||||
| Nombre de Evento | Descripción | Parámetros |
|
||||
| ---------------- | ---------------------------------------- | ----------------------------- |
|
||||
| change | se lanza cuando el usuario confirma el valor | valor limitado del componente |
|
||||
| blur | se lanza cuando el input se difumina | (event: Event) |
|
||||
| focus | se lanza cuando el input se enfoca | (event: Event) |
|
||||
|
|
@ -0,0 +1,243 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
disabled: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-tooltip.demo-en-US {
|
||||
&:first-of-type .source {
|
||||
.el-button {
|
||||
width: 110px;
|
||||
}
|
||||
}
|
||||
.el-tooltip + .el-tooltip {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.box {
|
||||
width: 400px;
|
||||
|
||||
.top {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.left .el-tooltip__popper,
|
||||
.right .el-tooltip__popper {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
.el-tooltip {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Tooltip
|
||||
|
||||
Mostrar aviso de información con el hover del mouse.
|
||||
|
||||
### Uso básico
|
||||
|
||||
Tooltip tiene 9 colocaciones.
|
||||
|
||||
:::demo Use el atributo `content` para establecer el contenido que se mostrará al hacer hover. El atributo `placement` determina la posición del tooltip. Su valor es `[orientation]-[alignment]` con cuatro orientaciones `top`, `left`, `right`, `bottom` y tres alineaciones `start`, `end`, `null`, la alineación default es null. Tome `placement="left-end"` como ejemplo, Tooltip será mostrado en la izquierda del elemento en que se esté haciendo hover y el fondo del tooltip se alineará con el fondo del elemento.
|
||||
```html
|
||||
<div class="box">
|
||||
<div class="top">
|
||||
<el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">
|
||||
<el-button>top-start</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">
|
||||
<el-button>top</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">
|
||||
<el-button>top-end</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="left">
|
||||
<el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">
|
||||
<el-button>left-start</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">
|
||||
<el-button>left</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">
|
||||
<el-button>left-end</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">
|
||||
<el-button>right-start</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">
|
||||
<el-button>right</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">
|
||||
<el-button>right-end</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">
|
||||
<el-button>bottom-start</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">
|
||||
<el-button>bottom</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">
|
||||
<el-button>bottom-end</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.box {
|
||||
width: 400px;
|
||||
|
||||
.top {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.left .el-tooltip__popper,
|
||||
.right .el-tooltip__popper {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 110px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Tema
|
||||
|
||||
Tooltip tiene dos temas: `dark` and `light`.
|
||||
|
||||
:::demo Establecer `effect` para modificar el tema, el valor por defecto es `dark`.
|
||||
```html
|
||||
<el-tooltip content="Top center" placement="top">
|
||||
<el-button>Dark</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="Bottom center" placement="bottom" effect="light">
|
||||
<el-button>Light</el-button>
|
||||
</el-tooltip>
|
||||
```
|
||||
:::
|
||||
|
||||
### Más Contenido
|
||||
|
||||
Despliegue múltiples líneas de texto y establezca su formato.
|
||||
|
||||
:::demo Sobre-escribiba el atributo `content` del `el-tooltip` añadiendo un slot llamado `content`.
|
||||
```html
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">multiple lines<br/>second line</div>
|
||||
<el-button>Top center</el-button>
|
||||
</el-tooltip>
|
||||
```
|
||||
:::
|
||||
|
||||
### Uso Avanzado
|
||||
|
||||
Adicional a los usos básicos, existen algunos atributos que permiten la personalización:
|
||||
|
||||
el atributo `transition` permite personalizar la animación con la que el Tooltip se muestra o se esconda, el valor por defecto es `el-fade-in-linear`.
|
||||
|
||||
el atributo `disabled` permite deshabilitar `tooltip`. Solo es necesario definirlo como `true`.
|
||||
|
||||
De hecho, Tooltip es una extension basada en [Vue-popper](https://github.com/element-component/vue-popper), es posible utilizar cualquier atributo permitido en Vue-popper.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom" effect="light">
|
||||
<el-button @click="disabled = !disabled">click to {{disabled ? 'active' : 'close'}} tooltip function</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.slide-fade-enter-active {
|
||||
transition: all .3s ease;
|
||||
}
|
||||
.slide-fade-leave-active {
|
||||
transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
|
||||
}
|
||||
.slide-fade-enter, .expand-fade-leave-active {
|
||||
margin-left: 20px;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
:::tip
|
||||
El componente `router-link` no es soportado por Tooltip, favor de usar `vm.$router.push`.
|
||||
|
||||
Elementos de forma deshabilitados no son soportados por Tooltip, más información puede ser encontrada en [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter).
|
||||
Es necesario envolver los elementos de forma deshabilitados en un elemento contenedor para que Tooltipo funcione.
|
||||
:::
|
||||
|
||||
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------------- | ---------------------------------------- | ------- | ---------------------------------------- | ---------------------------------------- |
|
||||
| effect | tema del Tooltip | string | dark/light | dark |
|
||||
| content | contenido a mostrar, puede ser sobre-escrito por `slot#content` | string | — | — |
|
||||
| placement | posición del Tooltip | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
|
||||
| value(v-model) | visibilidad del Tooltip | boolean | — | false |
|
||||
| disabled | saber si el Tooltip se encuentra deshabilitado | boolean | — | false |
|
||||
| offset | offset del Tooltip | number | — | 0 |
|
||||
| transition | nombre de animación | string | — | el-fade-in-linear |
|
||||
| visible-arrow | si una flecha es mostrada. Para mayor información, revisar la página de [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
|
||||
| popper-options | parámetros de [popper.js](https://popper.js.org/documentation.html) | Object | referirse a la documentación de [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| open-delay | retraso de la apariencia, en milisegundos | number | — | 0 |
|
||||
| manual | si el Tooltipo será controlado de forma manual. `mouseenter` y `mouseleave` no tendrán efecto si fue establecido como `true` | boolean | — | false |
|
||||
| popper-class | nombre de clase personalizada para el popper del Tooltip | string | — | — |
|
||||
| enterable | si el mouse puede entrar al Tooltip | Boolean | — | true |
|
||||
| hide-after | tiempo a esperar en milisegundos para esconder el Tooltip | number | — | 0 |
|
||||
|
|
@ -0,0 +1,286 @@
|
|||
<style>
|
||||
.demo-transfer {
|
||||
.transfer-footer {
|
||||
margin-left: 15px;
|
||||
padding: 6px 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const generateData = _ => {
|
||||
const data = [];
|
||||
for (let i = 1; i <= 15; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
label: `Option ${ i }`,
|
||||
disabled: i % 4 === 0
|
||||
});
|
||||
}
|
||||
return data;
|
||||
};
|
||||
const generateData2 = _ => {
|
||||
const data = [];
|
||||
const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
|
||||
const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
|
||||
states.forEach((city, index) => {
|
||||
data.push({
|
||||
label: city,
|
||||
key: index,
|
||||
initial: initials[index]
|
||||
});
|
||||
});
|
||||
return data;
|
||||
};
|
||||
const generateData3 = _ => {
|
||||
const data = [];
|
||||
for (let i = 1; i <= 15; i++) {
|
||||
data.push({
|
||||
value: i,
|
||||
desc: `Option ${ i }`,
|
||||
disabled: i % 4 === 0
|
||||
});
|
||||
}
|
||||
return data;
|
||||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
data2: generateData2(),
|
||||
data3: generateData3(),
|
||||
value1: [1, 4],
|
||||
value2: [],
|
||||
value3: [1],
|
||||
value4: [],
|
||||
filterMethod(query, item) {
|
||||
return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
|
||||
},
|
||||
renderFunc(h, option) {
|
||||
return <span>{ option.key } - { option.label }</span>;
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleChange(value, direction, movedKeys) {
|
||||
console.log(value, direction, movedKeys);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Transfer
|
||||
|
||||
### Uso básico
|
||||
:::demo Los datos se pasan a Transfer a través del atributo `data`. Los datos tienen que ser un array de objetos, y cada objeto debe tener estos atributos: `key` que será el identificador del item, `label` que será el texto a mostrar, y `disabled` que indicará si el elemento esta desactivado. Los items dentro de la lista destino están sincronizados con la variable asociada a `v-model`, y el valor de esa variable es un array de claves de los elementos de la lista destino. Así que si no quiere que la lista destino esté vacía inicialmente puede inicializar el `v-model` con un array.
|
||||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
v-model="value1"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const generateData = _ => {
|
||||
const data = [];
|
||||
for (let i = 1; i <= 15; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
label: `Option ${ i }`,
|
||||
disabled: i % 4 === 0
|
||||
});
|
||||
}
|
||||
return data;
|
||||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value1: [1, 4]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Filtrar
|
||||
|
||||
Puede buscar y filtrar los items.
|
||||
|
||||
::demo Ponga el atributo `filterable` a true para permitir el filtrado.Por defecto si el `label` del item contiene el término buscado será incluido en el resultado. También puede implementar su propio método de filtrado con el atributo `filter-method`, que recibe un método y le pasa la búsqueda y cada item. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.
|
||||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
filterable
|
||||
:filter-method="filterMethod"
|
||||
filter-placeholder="State Abbreviations"
|
||||
v-model="value2"
|
||||
:data="data2">
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const generateData2 = _ => {
|
||||
const data = [];
|
||||
const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
|
||||
const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
|
||||
states.forEach((city, index) => {
|
||||
data.push({
|
||||
label: city,
|
||||
key: index,
|
||||
initial: initials[index]
|
||||
});
|
||||
});
|
||||
return data;
|
||||
};
|
||||
return {
|
||||
data2: generateData2(),
|
||||
value2: [],
|
||||
filterMethod(query, item) {
|
||||
return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Personalizable
|
||||
|
||||
Puede personalizar los títulos, botones, la función de renderizado de los items, el texto de status de la cabecera y el contenido del pie.
|
||||
|
||||
:::demo Use `titles`, `button-texts`, `render-content` y `format` respectivamente para personalizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Para el pie de la lista hay dos slots: `left-footer` y `right-footer`. Además, si quiere algunos items marcados inicialmente puede usar `left-default-checked` y `right-default-checked`. Finalmente este ejemplo muestra el evento `change`. Tenga en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias son configuradas correctamente.
|
||||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
v-model="value3"
|
||||
filterable
|
||||
:left-default-checked="[2, 3]"
|
||||
:right-default-checked="[1]"
|
||||
:render-content="renderFunc"
|
||||
:titles="['Source', 'Target']"
|
||||
:button-texts="['To left', 'To right']"
|
||||
:format="{
|
||||
noChecked: '${total}',
|
||||
hasChecked: '${checked}/${total}'
|
||||
}"
|
||||
@change="handleChange"
|
||||
:data="data">
|
||||
<el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>
|
||||
<el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.transfer-footer {
|
||||
margin-left: 20px;
|
||||
padding: 6px 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const generateData = _ => {
|
||||
const data = [];
|
||||
for (let i = 1; i <= 15; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
label: `Option ${ i }`,
|
||||
disabled: i % 4 === 0
|
||||
});
|
||||
}
|
||||
return data;
|
||||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value3: [1],
|
||||
renderFunc(h, option) {
|
||||
return <span>{ option.key } - { option.label }</span>;
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleChange(value, direction, movedKeys) {
|
||||
console.log(value, direction, movedKeys);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Prop con alias
|
||||
|
||||
Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada elemento. Si sus datos tienen un nombre diferente para la clave puede usar el atributo `props` para añadir alias.
|
||||
|
||||
:::demo En este ejemplo los elementos no tienen `key`y `label`, en vez de eso tienen `value` y `desc`. Así que tiene que añadir alias para `key` y `label`.
|
||||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
v-model="value4"
|
||||
:props="{
|
||||
key: 'value',
|
||||
label: 'desc'
|
||||
}"
|
||||
:data="data3">
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const generateData3 = _ => {
|
||||
const data = [];
|
||||
for (let i = 1; i <= 15; i++) {
|
||||
data.push({
|
||||
value: i,
|
||||
desc: `Option ${ i }`,
|
||||
disabled: i % 4 === 0
|
||||
});
|
||||
}
|
||||
return data;
|
||||
};
|
||||
return {
|
||||
data3: generateData3(),
|
||||
value4: []
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos
|
||||
| Atriburo | Descripcion | Tipo | Valores aceptados | Por defecto |
|
||||
| --------------------- | ---------------------------------------- | ------------------------------- | ----------------- | ---------------------------------------- |
|
||||
| data | Origen de datos | array[{ key, label, disabled }] | — | [ ] |
|
||||
| filterable | Si se puede filtrar | boolean | — | false |
|
||||
| filter-placeholder | Placeholder para el input del filtro | string | — | Enter keyword |
|
||||
| filter-method | Método de filtrado | function | — | — |
|
||||
| titles | Títulos de las listas | array | — | ['List 1', 'List 2'] |
|
||||
| button-texts | Texto de los botones | array | — | [ ] |
|
||||
| render-content | Función de renderizado | function(h, option) | — | — |
|
||||
| format | Texto para el status en el header | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
|
||||
| props | prop alias para el origen de datos | object{key, label, disabled} | — | — |
|
||||
| left-default-checked | Array de claves de los elementos marcados inicialmente en la lista de la izquierda | array | — | [ ] |
|
||||
| right-default-checked | Array de claves de los elementos marcados inicialmente en la lista de la derecha | array | — | [ ] |
|
||||
|
||||
### Slot
|
||||
| Nombre | Descripcion |
|
||||
| ------------ | ---------------------------------------- |
|
||||
| left-footer | Contenido del footer de la lista de la izquierda |
|
||||
| right-footer | Contenido del footer de la lista de la derecha |
|
||||
|
||||
### Eventos
|
||||
| Nombre | Descripcion | Parametros |
|
||||
| ------ | ---------------------------------------- | ---------------------------------------- |
|
||||
| change | se lanzá cuando los elementos cambian en la lista de la derecha | array con las claves de los elementos de la lista de la derecha |
|
||||
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
## Transiciones incorporadas
|
||||
|
||||
Puede usar directamente las transiciones incorporadas en Element. Antes de hacerlo, por favor lea la [documentación](https://vuejs.org/v2/api/#transition).
|
||||
|
||||
### Fade
|
||||
|
||||
:::demo Tenemos dos efectos de fading: `el-fade-in-linear` y `el-fade-in`.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="show = !show">Click Me</el-button>
|
||||
|
||||
<div style="display: flex; margin-top: 20px; height: 100px;">
|
||||
<transition name="el-fade-in-linear">
|
||||
<div v-show="show" class="transition-box">.el-fade-in-linear</div>
|
||||
</transition>
|
||||
<transition name="el-fade-in">
|
||||
<div v-show="show" class="transition-box">.el-fade-in</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
show: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.transition-box {
|
||||
margin-bottom: 10px;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
border-radius: 4px;
|
||||
background-color: #409EFF;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Zoom
|
||||
|
||||
:::demo También tenemos zoom: `el-zoom-in-center`, `el-zoom-in-top` y `el-zoom-in-bottom`.
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="show2 = !show2">Click Me</el-button>
|
||||
|
||||
<div style="display: flex; margin-top: 20px; height: 100px;">
|
||||
<transition name="el-zoom-in-center">
|
||||
<div v-show="show2" class="transition-box">.el-zoom-in-center</div>
|
||||
</transition>
|
||||
|
||||
<transition name="el-zoom-in-top">
|
||||
<div v-show="show2" class="transition-box">.el-zoom-in-top</div>
|
||||
</transition>
|
||||
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
show2: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.transition-box {
|
||||
margin-bottom: 10px;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
border-radius: 4px;
|
||||
background-color: #409EFF;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Colapsado
|
||||
Para efectos de colapsado usar el componente `el-collapse-transition`.
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="show3 = !show3">Click Me</el-button>
|
||||
|
||||
<div style="margin-top: 20px; height: 200px;">
|
||||
<el-collapse-transition>
|
||||
<div v-show="show3">
|
||||
<div class="transition-box">el-collapse-transition</div>
|
||||
<div class="transition-box">el-collapse-transition</div>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
show3: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.transition-box {
|
||||
margin-bottom: 10px;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
border-radius: 4px;
|
||||
background-color: #409EFF;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### On demand
|
||||
|
||||
```js
|
||||
// fade/zoom
|
||||
import 'element-ui/lib/theme-chalk/base.css';
|
||||
// colapsar
|
||||
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
|
||||
import Vue from 'vue'
|
||||
|
||||
Vue.component(CollapseTransition.name, CollapseTransition)
|
||||
```
|
||||
|
||||
<style>
|
||||
.transition-box {
|
||||
margin-bottom: 10px;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
border-radius: 4px;
|
||||
background-color: #409EFF;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 40px 20px;
|
||||
margin-right: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data: () => ({
|
||||
show: true,
|
||||
show2: true,
|
||||
show3: true
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,984 @@
|
|||
<style>
|
||||
.demo-tree {
|
||||
.leaf {
|
||||
width: 20px;
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.folder {
|
||||
width: 20px;
|
||||
background: #888;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.filter-tree {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const data = [{
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
label: 'Level two 1-1',
|
||||
children: [{
|
||||
label: 'Level three 1-1-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: 'Level one 2',
|
||||
children: [{
|
||||
label: 'Level two 2-1',
|
||||
children: [{
|
||||
label: 'Level three 2-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: 'Level two 2-2',
|
||||
children: [{
|
||||
label: 'Level three 2-2-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: 'Level one 3',
|
||||
children: [{
|
||||
label: 'Level two 3-1',
|
||||
children: [{
|
||||
label: 'Level three 3-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: 'Level two 3-2',
|
||||
children: [{
|
||||
label: 'Level three 3-2-1'
|
||||
}]
|
||||
}]
|
||||
}];
|
||||
|
||||
const data2 = [{
|
||||
id: 1,
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
id: 4,
|
||||
label: 'Level two 1-1',
|
||||
children: [{
|
||||
id: 9,
|
||||
label: 'Level three 1-1-1'
|
||||
}, {
|
||||
id: 10,
|
||||
label: 'Level three 1-1-2'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'Level one 2',
|
||||
children: [{
|
||||
id: 5,
|
||||
label: 'Level two 2-1'
|
||||
}, {
|
||||
id: 6,
|
||||
label: 'Level two 2-2'
|
||||
}]
|
||||
}, {
|
||||
id: 3,
|
||||
label: 'Level one 3',
|
||||
children: [{
|
||||
id: 7,
|
||||
label: 'Level two 3-1'
|
||||
}, {
|
||||
id: 8,
|
||||
label: 'Level two 3-2'
|
||||
}]
|
||||
}];
|
||||
|
||||
const data3 = [{
|
||||
id: 1,
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
id: 3,
|
||||
label: 'Level two 2-1',
|
||||
children: [{
|
||||
id: 4,
|
||||
label: 'Level three 3-1-1'
|
||||
}, {
|
||||
id: 5,
|
||||
label: 'Level three 3-1-2',
|
||||
disabled: true
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'Level two 2-2',
|
||||
disabled: true,
|
||||
children: [{
|
||||
id: 6,
|
||||
label: 'Level three 3-2-1'
|
||||
}, {
|
||||
id: 7,
|
||||
label: 'Level three 3-2-2',
|
||||
disabled: true
|
||||
}]
|
||||
}]
|
||||
}];
|
||||
|
||||
let id = 1000;
|
||||
|
||||
const regions = [{
|
||||
'name': 'region1'
|
||||
}, {
|
||||
'name': 'region2'
|
||||
}];
|
||||
|
||||
let count = 1;
|
||||
|
||||
const props = {
|
||||
label: 'name',
|
||||
children: 'zones'
|
||||
};
|
||||
|
||||
const props1 = {
|
||||
label: 'name',
|
||||
children: 'zones',
|
||||
isLeaf: 'leaf'
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
};
|
||||
|
||||
export default {
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree2.filter(val);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleCheckChange(data, checked, indeterminate) {
|
||||
console.log(data, checked, indeterminate);
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
console.log(data);
|
||||
},
|
||||
loadNode(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
|
||||
}
|
||||
if (node.level > 3) return resolve([]);
|
||||
var hasChild;
|
||||
if (node.data.name === 'region1') {
|
||||
hasChild = true;
|
||||
} else if (node.data.name === 'region2') {
|
||||
hasChild = false;
|
||||
} else {
|
||||
hasChild = Math.random() > 0.5;
|
||||
}
|
||||
|
||||
setTimeout(function() {
|
||||
let data;
|
||||
if (hasChild) {
|
||||
data = [{
|
||||
name: 'zone' + count++
|
||||
}, {
|
||||
name: 'zone' + count++
|
||||
}];
|
||||
} else {
|
||||
data = [];
|
||||
}
|
||||
|
||||
resolve(data);
|
||||
}, 500);
|
||||
},
|
||||
loadNode1(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
return resolve([{ name: 'region' }]);
|
||||
}
|
||||
if (node.level > 1) return resolve([]);
|
||||
|
||||
setTimeout(() => {
|
||||
const data = [{
|
||||
name: 'leaf',
|
||||
leaf: true
|
||||
}, {
|
||||
name: 'zone'
|
||||
}];
|
||||
|
||||
resolve(data);
|
||||
}, 500);
|
||||
},
|
||||
getCheckedNodes() {
|
||||
console.log(this.$refs.tree.getCheckedNodes());
|
||||
},
|
||||
getCheckedKeys() {
|
||||
console.log(this.$refs.tree.getCheckedKeys());
|
||||
},
|
||||
setCheckedNodes() {
|
||||
this.$refs.tree.setCheckedNodes([
|
||||
{
|
||||
id: 5,
|
||||
label: '二级 2-1'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
label: '三级 1-1-1'
|
||||
}
|
||||
]);
|
||||
},
|
||||
setCheckedKeys() {
|
||||
this.$refs.tree.setCheckedKeys([3]);
|
||||
},
|
||||
resetChecked() {
|
||||
this.$refs.tree.setCheckedKeys([]);
|
||||
},
|
||||
append(data) {
|
||||
const newChild = { id: id++, label: 'testtest', children: [] };
|
||||
if (!data.children) {
|
||||
this.$set(data, 'children', []);
|
||||
}
|
||||
data.children.push(newChild);
|
||||
},
|
||||
|
||||
remove(node, data) {
|
||||
const parent = node.parent;
|
||||
const children = parent.data.children || parent.data;
|
||||
const index = children.findIndex(d => d.id === data.id);
|
||||
children.splice(index, 1);
|
||||
},
|
||||
|
||||
renderContent(h, { node, data, store }) {
|
||||
return (
|
||||
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
|
||||
<span>
|
||||
<span>{node.label}</span>
|
||||
</span>
|
||||
<span>
|
||||
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(data) }>Append</el-button>
|
||||
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
|
||||
</span>
|
||||
</span>);
|
||||
},
|
||||
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
data,
|
||||
data2,
|
||||
data3,
|
||||
data4: JSON.parse(JSON.stringify(data2)),
|
||||
regions,
|
||||
defaultProps,
|
||||
props,
|
||||
props1,
|
||||
defaultCheckedKeys: [5],
|
||||
defaultExpandedKeys: [2, 3],
|
||||
filterText: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Tree
|
||||
|
||||
Muestra un conjunto de datos jerárquicos.
|
||||
|
||||
### Uso básico
|
||||
|
||||
Estructura básica de árbol.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [{
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
label: 'Level two 1-1',
|
||||
children: [{
|
||||
label: 'Level three 1-1-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: 'Level one 2',
|
||||
children: [{
|
||||
label: 'Level two 2-1',
|
||||
children: [{
|
||||
label: 'Level three 2-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: 'Level two 2-2',
|
||||
children: [{
|
||||
label: 'Level three 2-2-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: 'Level one 3',
|
||||
children: [{
|
||||
label: 'Level two 3-1',
|
||||
children: [{
|
||||
label: 'Level three 3-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: 'Level two 3-2',
|
||||
children: [{
|
||||
label: 'Level three 3-2-1'
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleNodeClick(data) {
|
||||
console.log(data);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Seleccionable
|
||||
|
||||
Usado para la selección de nodos.
|
||||
|
||||
::: demo Este ejemplo también muestra como cargar los datos de forma asíncrona.
|
||||
```html
|
||||
<el-tree
|
||||
:props="props"
|
||||
:load="loadNode"
|
||||
lazy
|
||||
show-checkbox
|
||||
@check-change="handleCheckChange">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
props: {
|
||||
label: 'name',
|
||||
children: 'zones'
|
||||
},
|
||||
count: 1
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleCheckChange(data, checked, indeterminate) {
|
||||
console.log(data, checked, indeterminate);
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
console.log(data);
|
||||
},
|
||||
loadNode(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
|
||||
}
|
||||
if (node.level > 3) return resolve([]);
|
||||
|
||||
var hasChild;
|
||||
if (node.data.name === 'region1') {
|
||||
hasChild = true;
|
||||
} else if (node.data.name === 'region2') {
|
||||
hasChild = false;
|
||||
} else {
|
||||
hasChild = Math.random() > 0.5;
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
var data;
|
||||
if (hasChild) {
|
||||
data = [{
|
||||
name: 'zone' + this.count++
|
||||
}, {
|
||||
name: 'zone' + this.count++
|
||||
}];
|
||||
} else {
|
||||
data = [];
|
||||
}
|
||||
|
||||
resolve(data);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Nodos hoja en modo perezoso
|
||||
|
||||
:::demo Los datos de un nodo no son cargados hasta que no es pinchado, así que el árbol no puede predecir si es una hoja. Por eso a cada nodo se le añade el botón de desplegar, y si el nodo es una hoja el botón desaparecerá al pinchar en él. También puede decirle al árbol que el nodo es una hoja de antemano, y así evita que muestre el botón de desplegar.
|
||||
```html
|
||||
<el-tree
|
||||
:props="props1"
|
||||
:load="loadNode1"
|
||||
lazy
|
||||
show-checkbox>
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
props1: {
|
||||
label: 'name',
|
||||
children: 'zones',
|
||||
isLeaf: 'leaf'
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadNode1(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
return resolve([{ name: 'region' }]);
|
||||
}
|
||||
if (node.level > 1) return resolve([]);
|
||||
|
||||
setTimeout(() => {
|
||||
const data = [{
|
||||
name: 'leaf',
|
||||
leaf: true
|
||||
}, {
|
||||
name: 'zone'
|
||||
}];
|
||||
|
||||
resolve(data);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkbox desactivados
|
||||
|
||||
El checkbox de un nodo se puede poner como desactivado.
|
||||
|
||||
::: demo En el ejemplo, la propiedad 'disabled' se declara en defaultProps, y algunos nodos se ponen como 'disabled:true'. Los checkboxes correspondientes son desactivados y no se pueden pinchar.
|
||||
```html
|
||||
<el-tree
|
||||
:data="data3"
|
||||
:props="defaultProps"
|
||||
show-checkbox
|
||||
@check-change="handleCheckChange">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data3: [{
|
||||
id: 1,
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
id: 3,
|
||||
label: 'Level two 2-1',
|
||||
children: [{
|
||||
id: 4,
|
||||
label: 'Level three 3-1-1'
|
||||
}, {
|
||||
id: 5,
|
||||
label: 'Level three 3-1-2',
|
||||
disabled: true
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'Level two 2-2',
|
||||
disabled: true,
|
||||
children: [{
|
||||
id: 6,
|
||||
label: 'Level three 3-2-1'
|
||||
}, {
|
||||
id: 7,
|
||||
label: 'Level three 3-2-2',
|
||||
disabled: true
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label',
|
||||
disabled: 'disabled',
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Desplegado o seleccionado por defecto
|
||||
Los nodos pueden estar desplegados o seleccionados por defecto.
|
||||
|
||||
:::demo Utilice `default-expanded-keys` y `default-checked-keys` para establecer los nodos desplegados y seleccionados respectivamente. Tenga en cuenta que para que funcione es necesario que tengan `node-key`. Su valor es el nombre de una clave en el objeto data, y el valor de la clave debe ser único en todo el árbol.
|
||||
```html
|
||||
<el-tree
|
||||
:data="data2"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[2, 3]"
|
||||
:default-checked-keys="[5]"
|
||||
:props="defaultProps">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data2: [{
|
||||
id: 1,
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
id: 4,
|
||||
label: 'Level two 1-1',
|
||||
children: [{
|
||||
id: 9,
|
||||
label: 'Level three 1-1-1'
|
||||
}, {
|
||||
id: 10,
|
||||
label: 'Level three 1-1-2'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'Level one 2',
|
||||
children: [{
|
||||
id: 5,
|
||||
label: 'Level two 2-1'
|
||||
}, {
|
||||
id: 6,
|
||||
label: 'Level two 2-2'
|
||||
}]
|
||||
}, {
|
||||
id: 3,
|
||||
label: 'Level one 3',
|
||||
children: [{
|
||||
id: 7,
|
||||
label: 'Level two 3-1'
|
||||
}, {
|
||||
id: 8,
|
||||
label: 'Level two 3-2'
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Seleccionando nodos
|
||||
|
||||
::: demo Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo hace por claves el atributo `node-key` es necesario.
|
||||
```html
|
||||
<el-tree
|
||||
:data="data2"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
node-key="id"
|
||||
ref="tree"
|
||||
highlight-current
|
||||
:props="defaultProps">
|
||||
</el-tree>
|
||||
|
||||
<div class="buttons">
|
||||
<el-button @click="getCheckedNodes">get by node</el-button>
|
||||
<el-button @click="getCheckedKeys">get by key</el-button>
|
||||
<el-button @click="setCheckedNodes">set by node</el-button>
|
||||
<el-button @click="setCheckedKeys">set by key</el-button>
|
||||
<el-button @click="resetChecked">reset</el-button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
getCheckedNodes() {
|
||||
console.log(this.$refs.tree.getCheckedNodes());
|
||||
},
|
||||
getCheckedKeys() {
|
||||
console.log(this.$refs.tree.getCheckedKeys());
|
||||
},
|
||||
setCheckedNodes() {
|
||||
this.$refs.tree.setCheckedNodes([{
|
||||
id: 5,
|
||||
label: 'Level two 2-1'
|
||||
}, {
|
||||
id: 9,
|
||||
label: 'Level three 1-1-1'
|
||||
}]);
|
||||
},
|
||||
setCheckedKeys() {
|
||||
this.$refs.tree.setCheckedKeys([3]);
|
||||
},
|
||||
resetChecked() {
|
||||
this.$refs.tree.setCheckedKeys([]);
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
data2: [{
|
||||
id: 1,
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
id: 4,
|
||||
label: 'Level two 1-1',
|
||||
children: [{
|
||||
id: 9,
|
||||
label: 'Level three 1-1-1'
|
||||
}, {
|
||||
id: 10,
|
||||
label: 'Level three 1-1-2'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'Level one 2',
|
||||
children: [{
|
||||
id: 5,
|
||||
label: 'Level two 2-1'
|
||||
}, {
|
||||
id: 6,
|
||||
label: 'Level two 2-2'
|
||||
}]
|
||||
}, {
|
||||
id: 3,
|
||||
label: 'Level one 3',
|
||||
children: [{
|
||||
id: 7,
|
||||
label: 'Level two 3-1'
|
||||
}, {
|
||||
id: 8,
|
||||
label: 'Level two 3-2'
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Contenido personalizado en los nodos
|
||||
El contenido de los nodos puede ser personalizado, así que puede añadir iconos y botones a su gusto.
|
||||
|
||||
::: demo Utilice `render-content` para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mire la documentación de node para una introducción detallada a las funciondes de renderizado. Ten en cuenta que este ejemplo no puede ejecutarse en jsfiddle ya que no soporta la sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias relevantes están configuradas correctamente.
|
||||
```html
|
||||
<el-tree
|
||||
:data="data4"
|
||||
:props="defaultProps"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
:expand-on-click-node="false"
|
||||
:render-content="renderContent">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
let id = 1000;
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data4: [{
|
||||
id: 1,
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
id: 4,
|
||||
label: 'Level two 1-1',
|
||||
children: [{
|
||||
id: 9,
|
||||
label: 'Level three 1-1-1'
|
||||
}, {
|
||||
id: 10,
|
||||
label: 'Level three 1-1-2'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'Level one 2',
|
||||
children: [{
|
||||
id: 5,
|
||||
label: 'Level two 2-1'
|
||||
}, {
|
||||
id: 6,
|
||||
label: 'Level two 2-2'
|
||||
}]
|
||||
}, {
|
||||
id: 3,
|
||||
label: 'Level one 3',
|
||||
children: [{
|
||||
id: 7,
|
||||
label: 'Level two 3-1'
|
||||
}, {
|
||||
id: 8,
|
||||
label: 'Level two 3-2'
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
append(data) {
|
||||
const newChild = { id: id++, label: 'testtest', children: [] };
|
||||
if (!data.children) {
|
||||
this.$set(data, 'children', []);
|
||||
}
|
||||
data.children.push(newChild);
|
||||
},
|
||||
|
||||
remove(node, data) {
|
||||
const parent = node.parent;
|
||||
const children = parent.data.children || parent.data;
|
||||
const index = children.findIndex(d => d.id === data.id);
|
||||
children.splice(index, 1);
|
||||
},
|
||||
|
||||
renderContent(h, { node, data, store }) {
|
||||
return (
|
||||
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
|
||||
<span>
|
||||
<span>{node.label}</span>
|
||||
</span>
|
||||
<span>
|
||||
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(data) }>Append</el-button>
|
||||
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
|
||||
</span>
|
||||
</span>);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Filtrado de nodos
|
||||
Los nodos del árbol se pueden filtrar.
|
||||
|
||||
:::demo Invoque el método `filter` de la instancia de Tree para filtrar los nodos. Su parametro es la palabra de filtrado. Tenga en cuenta que para que funcione es necesario `filter-node-method`, y su valor el método de filtrado.
|
||||
```html
|
||||
<el-input
|
||||
placeholder="Filter keyword"
|
||||
v-model="filterText">
|
||||
</el-input>
|
||||
|
||||
<el-tree
|
||||
class="filter-tree"
|
||||
:data="data2"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree2">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree2.filter(val);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
filterText: '',
|
||||
data2: [{
|
||||
id: 1,
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
id: 4,
|
||||
label: 'Level two 1-1',
|
||||
children: [{
|
||||
id: 9,
|
||||
label: 'Level three 1-1-1'
|
||||
}, {
|
||||
id: 10,
|
||||
label: 'Level three 1-1-2'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'Level one 2',
|
||||
children: [{
|
||||
id: 5,
|
||||
label: 'Level two 2-1'
|
||||
}, {
|
||||
id: 6,
|
||||
label: 'Level two 2-2'
|
||||
}]
|
||||
}, {
|
||||
id: 3,
|
||||
label: 'Level one 3',
|
||||
children: [{
|
||||
id: 7,
|
||||
label: 'Level two 3-1'
|
||||
}, {
|
||||
id: 8,
|
||||
label: 'Level two 3-2'
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Acordeón
|
||||
|
||||
Solo puede ser expandido un nodo del mismo nivel a la vez.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-tree
|
||||
:data="data"
|
||||
:props="defaultProps"
|
||||
accordion
|
||||
@node-click="handleNodeClick">
|
||||
</el-tree>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [{
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
label: 'Level two 1-1',
|
||||
children: [{
|
||||
label: 'Level three 1-1-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: 'Level one 2',
|
||||
children: [{
|
||||
label: 'Level two 2-1',
|
||||
children: [{
|
||||
label: 'Level three 2-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: 'Level two 2-2',
|
||||
children: [{
|
||||
label: 'Level three 2-2-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: 'Level one 3',
|
||||
children: [{
|
||||
label: 'Level two 3-1',
|
||||
children: [{
|
||||
label: 'Level three 3-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: 'Level two 3-2',
|
||||
children: [{
|
||||
label: 'Level three 3-2-1'
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleNodeClick(data) {
|
||||
console.log(data);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| --------------------- | ---------------------------------------- | --------------------------------- | ----------------- | ----------- |
|
||||
| data | Datos del árbol | array | — | — |
|
||||
| empty-text | Texto a mostrar cuando data es void | string | — | — |
|
||||
| node-key | Identificador único en todo el árbol para los nodos | string | — | — |
|
||||
| props | Opciones de configuración | object | — | — |
|
||||
| load | Método para cargar los datos de subárboles | function(node, resolve) | — | — |
|
||||
| render-content | Función de renderizado para los nodos | Function(h, { node, data, store } | — | — |
|
||||
| highlight-current | Si el nodo actual está resaltado | boolean | — | false |
|
||||
| default-expand-all | Expandir todos los nodos por defecto | boolean | — | false |
|
||||
| expand-on-click-node | Si expandir o contraer un nodo al pincharlo, si es false solo se hará al pinchar en la flecha | — | true | - |
|
||||
| auto-expand-parent | Expandir un nodo padre si el hijo está seleccionado | boolean | — | true |
|
||||
| default-expanded-keys | Array de claves de los nodos expandidos inicialmente | array | — | — |
|
||||
| show-checkbox | Si un nodo es seleccionable | boolean | — | false |
|
||||
| check-strictly | El estado de seleccion de un nodo no afecta a sus padres o hijos, cuando `show-checkbox` es `true` | boolean | — | false |
|
||||
| default-checked-keys | Array con claves de los nodos seleccionados inicialmente | array | — | — |
|
||||
| filter-node-method | Esta función se ejecutará en cada nodo cuando se use el método filtrtar, si devuelve `false` el nodo se oculta | Function(value, data, node) | — | — |
|
||||
| accordion | Si solo un nodo de cada nivel puede expandirse a la vez | boolean | — | false |
|
||||
| indent | Indentación horizontal de los nodos en niveles adyacentes, en pixeles | number | — | 16 |
|
||||
|
||||
### props
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ---------------------------------------- | ----------------------------- | ----------------- | ----------- |
|
||||
| label | Especifica que clave del objecto nodo se utilizará como label | string, function(data, node) | — | — |
|
||||
| children | Especifica que objeto del nodo se utiliza como subárbol | string, function(data, node) | — | — |
|
||||
| isLeaf | Especifica si el nodo es una hoja | boolean, function(data, node) | — | — |
|
||||
|
||||
### Métodos
|
||||
`Tree` tiene los siguientes métodos, que devuelven el array de nodos seleccionados.
|
||||
| Método | Descripción | Parámetros |
|
||||
| ----------------- | ---------------------------------------- | ---------------------------------------- |
|
||||
| filter | Filtra los nodos del árbol, los nodos filtrados estarán ocultos | Acepta un parámetro que será usado como primer parámetro para filter-node-method |
|
||||
| updateKeyChildren | Asocia un nuevo dato al nodo, solo funciona si `node-key` está asignado | (key, data)Acepta dos parámetros: 1. clave del nodo 2. nuevo dato |
|
||||
| getCheckedNodes | Si los nodos puede ser seleccionado (`show-checkbox` es `true`), devuelve el array de nodos seleccionados | Acepta un booleano cuyo valor por defecto es `false` |
|
||||
| setCheckedNodes | Establece algunos nodos como seleccionados, solo funciona cuando `node-key` está asignado | Un array de nodos a seleccionar |
|
||||
| getCheckedKeys | Si los nodos pueden ser seleccionados (`show-checkbox` es `true`), devuelve un array con las claves de los nodos seleccionados | (leafOnly) Acepta un booleano que por defecto es `false`. |
|
||||
| setCheckedKeys | Establece algunos nodos como seleccionados, solo si `node-key` está asignado | (keys, leafOnly) Acepta dos parametros: 1. un array de claves 2. un booleano cuyo valor por defecto es `false`. Si el parámetro es `true`, solo devuelve los nodos seleccionados |
|
||||
| setChecked | Establece si un nodo está seleccionado, solo funciona si `node-key` esta asignado | (key/data, checked, deep) Acepta tres parámetros: 1. la clave o dato del nodo a ser seleccionado 2. un booleano que indica si un nodo el nodo estará seleccionado 3. un booleanoque indica si se hará en profundidad |
|
||||
| getCurrentKey | devuelve la clave del nodo resaltado actualmente (null si no hay ninguno) | — |
|
||||
| getCurrentNode | devuelve el nodo resaltado (null si no hay ninguno) | — |
|
||||
| setCurrentKey | establece el nodo resaltado por la clave, solo funciona si `node-key` está asignado | (key) la clave del nodo a ser resaltado |
|
||||
| setCurrentNode | establece el nodo resaltado, solo funciona si `node-key` está asignado | (node) nodo a ser resaltado |
|
||||
|
||||
### Eventos
|
||||
| Nombre del evento | Descripción | Parámetros |
|
||||
| ----------------- | ---------------------------------------- | ---------------------------------------- |
|
||||
| node-click | se lanza cuando un nodo es pinchado | tres parámetros: el objeto del nodo seleccionado, propiedad `node` de TreeNode y el TreeNode en si |
|
||||
| check-change | se lanza cuando el estado de selección del nodo cambia | tres parámetros: objeto nodo que se corresponde con el que ha cambiado, booleano que dice si esta seleccionado, booleano que dice si el nodo tiene hijos seleccionados |
|
||||
| current-change | cambia cuando el nodo actual cambia | dos parámetros: objeto nodo que se corresponde al nodo actual y propiedad `node` del TreeNode |
|
||||
| node-expand | se lanza cuando el nodo actual se abre | tres parámetros: el objeto del nodo abierto, propiedad `node` de TreeNode y el TreeNode en si |
|
||||
| node-collapse | se lanza cuando el nodo actual se cierra | tres parámetros: el objeto del nodo cerrado, propiedad `node` de TreeNode y el TreeNode en si |
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
<style>
|
||||
.demo-typo-box {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
position: relative;
|
||||
border: 1px solid #eaeefb;
|
||||
font-size: 40px;
|
||||
color: #1f2d3d;
|
||||
text-align: center;
|
||||
line-height: 162px;
|
||||
padding-bottom: 36px;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
margin-right: 17px;
|
||||
border-radius: 4px;
|
||||
|
||||
.name {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
border-top: 1px solid #eaeefb;
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
line-height: 35px;
|
||||
text-align: left;
|
||||
text-indent: 10px;
|
||||
font-family: 'Helvetica Neue';
|
||||
}
|
||||
}
|
||||
.demo-typo-size {
|
||||
.h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
.h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.text-regular {
|
||||
font-size: 14px;
|
||||
}
|
||||
.text-small {
|
||||
font-size: 13px;
|
||||
}
|
||||
.text-smaller {
|
||||
font-size: 12px;
|
||||
}
|
||||
.color-dark-light {
|
||||
color: #99a9bf;
|
||||
}
|
||||
}
|
||||
.typo-PingFang {
|
||||
font-family: 'PingFang SC';
|
||||
}
|
||||
.typo-Hiragino {
|
||||
font-family: 'Hiragino Sans GB';
|
||||
}
|
||||
.typo-Microsoft {
|
||||
font-family: 'Microsoft YaHei';
|
||||
}
|
||||
/* 英文 */
|
||||
.typo-Helvetica-Neue {
|
||||
font-family: 'Helvetica Neue';
|
||||
}
|
||||
.typo-Helvetica {
|
||||
font-family: 'Helvetica';
|
||||
}
|
||||
.typo-Arial {
|
||||
font-family: 'Arial';
|
||||
}
|
||||
</style>
|
||||
|
||||
## Tipografía
|
||||
|
||||
Creamos una convención de fuentes para asegurar la mejor presentación en diferentes plataformas.
|
||||
|
||||
### Fuente en chino
|
||||
|
||||
<div class="demo-typo-box typo-PingFang">
|
||||
和畅惠风
|
||||
<div class="name">PingFang SC</div>
|
||||
</div>
|
||||
<div class="demo-typo-box typo-Hiragino">
|
||||
和畅惠风
|
||||
<div class="name">Hiragino Sans GB</div>
|
||||
</div>
|
||||
<div class="demo-typo-box typo-Microsoft">
|
||||
和畅惠风
|
||||
<div class="name">Microsoft YaHei</div>
|
||||
</div>
|
||||
|
||||
### Inglés / Fuente Numérica
|
||||
|
||||
<div class="demo-typo-box typo-Helvetica-neue">
|
||||
RGag
|
||||
<div class="name">Helvetica Neue</div>
|
||||
</div>
|
||||
<div class="demo-typo-box typo-Helvetica">
|
||||
RGag
|
||||
<div class="name">Helvetica</div>
|
||||
</div>
|
||||
<div class="demo-typo-box typo-Arial">
|
||||
RGag
|
||||
<div class="name">Arial</div>
|
||||
</div>
|
||||
|
||||
### Font-family
|
||||
|
||||
```css
|
||||
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
||||
```
|
||||
|
||||
### Convención de fuentes
|
||||
|
||||
<table class="demo-typo-size">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="h1">Main Title</td>
|
||||
<td class="h1">Build with Element</td>
|
||||
<td class="color-dark-light">20px Extra large</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="h2">Title</td>
|
||||
<td class="h2">Build with Element</td>
|
||||
<td class="color-dark-light">18px large</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="h3">Small Title</td>
|
||||
<td class="h3">Build with Element</td>
|
||||
<td class="color-dark-light">16px Medium</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-regular">Body</td>
|
||||
<td class="text-regular">Build with Element</td>
|
||||
<td class="color-dark-light">14px Small</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-small">Body (small)</td>
|
||||
<td class="text-small">Build with Element</td>
|
||||
<td class="color-dark-light">13px Extra Small</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-smaller">Supplementary text</td>
|
||||
<td class="text-smaller">Build with Element</td>
|
||||
<td class="color-dark-light">12px Extra Extra Small</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
|
@ -0,0 +1,426 @@
|
|||
<style>
|
||||
.upload-tip {
|
||||
color: #8492a6;
|
||||
font-size: 12px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
.demo-box {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.upload-demo {
|
||||
width: 360px;
|
||||
}
|
||||
.avatar-uploader {
|
||||
.el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover, &:focus {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: @width;
|
||||
line-height: @height;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: @width;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fileList: [{
|
||||
name: 'food.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
||||
status: 'finished'
|
||||
}, {
|
||||
name: 'food2.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
||||
status: 'finished'
|
||||
}],
|
||||
fileList2: [{
|
||||
name: 'food.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
||||
status: 'finished'
|
||||
}, {
|
||||
name: 'food2.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
||||
status: 'finished'
|
||||
}],
|
||||
fileList3: [{
|
||||
name: 'food.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
||||
status: 'finished'
|
||||
}, {
|
||||
name: 'food2.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
||||
status: 'finished'
|
||||
}],
|
||||
imageUrl: '',
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
beforeUpload(file) {
|
||||
if (file.size > 40000000) {
|
||||
console.warn(file.name + ' is too large!');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
submitUpload() {
|
||||
this.$refs.upload.submit();
|
||||
},
|
||||
handleAvatarSuccess(res, file) {
|
||||
this.imageUrl = URL.createObjectURL(file.raw);
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
const isJPG = file.type === 'image/jpeg';
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
|
||||
if (!isJPG) {
|
||||
this.$message.error('Avatar picture must be JPG format!');
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error('Avatar picture size can not exceed 2MB!');
|
||||
}
|
||||
return isJPG && isLt2M;
|
||||
},
|
||||
handleChange(file, fileList) {
|
||||
this.fileList3 = fileList.slice(-3);
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(`You can upload up to 3 files. You selected ${files.length} files this time, and ${files.length + fileList.length} files totally`);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
## Carga de archivos
|
||||
|
||||
Carga archivos haciendo clic o arrastrándolos.
|
||||
|
||||
### Clic para cargar archivos
|
||||
|
||||
:::demo Personalice el tipo y texto del botón utilizando la propiedad `slot`. Defina las propiedades `limit` y `on-exceed` para limitar el número máximo de archivos a subir y especifique un método para cuando el límite ha sido excedido.
|
||||
```html
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
multiple
|
||||
:limit="3"
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="fileList">
|
||||
<el-button size="small" type="primary">Clic para subir archivo</el-button>
|
||||
<div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
|
||||
</el-upload>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(`El límite es 3, haz seleccionado ${files.length} archivos esta vez, añade hasta ${files.length + fileList.length}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Cargar avatar de usuario
|
||||
|
||||
Utilice el _hook_ `before-upload` para limitar el formato de archivo y su tamaño.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload">
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
|
||||
<style>
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageUrl: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleAvatarSuccess(res, file) {
|
||||
this.imageUrl = URL.createObjectURL(file.raw);
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
const isJPG = file.type === 'image/jpeg';
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
|
||||
if (!isJPG) {
|
||||
this.$message.error('La imagen debe estar en formato JPG!');
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error('La imagen excede los 2MB!');
|
||||
}
|
||||
return isJPG && isLt2M;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Pared de fotografías
|
||||
|
||||
Utilice la propiedad `list-type` para cambiar el estilo a un listado de archivos.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-upload
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="handleRemove">
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible" size="tiny">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisible = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Lista de archivos con miniatura
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:file-list="fileList2"
|
||||
list-type="picture">
|
||||
<el-button size="small" type="primary">Clic para subir archivo</el-button>
|
||||
<div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
|
||||
</el-upload>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fileList2: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Control de lista de archivos
|
||||
|
||||
Utilice el _hook_ `on-change` para controlar la funcionalidad de la lista de archivos subidos.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-change="handleChange"
|
||||
:file-list="fileList3">
|
||||
<el-button size="small" type="primary">Clic para subir archivo</el-button>
|
||||
<div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
|
||||
</el-upload>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fileList3: [{
|
||||
name: 'food.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
||||
status: 'finished'
|
||||
}, {
|
||||
name: 'food2.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
|
||||
status: 'finished'
|
||||
}]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange(file, fileList) {
|
||||
this.fileList3 = fileList.slice(-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Arrastrar para cargar archivo
|
||||
|
||||
Puede arrastrar el archivo dentro de un área en especifico para cargar el archivo.
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:file-list="fileList"
|
||||
multiple>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">Suelta tu archivo aquí o <em>haz clic para cargar</em></div>
|
||||
<div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
|
||||
</el-upload>
|
||||
```
|
||||
:::
|
||||
|
||||
### Carga normal
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
ref="upload"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:auto-upload="false">
|
||||
<el-button slot="trigger" size="small" type="primary">Selecciona un archivo</el-button>
|
||||
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">Cargar al servidor</el-button>
|
||||
<div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
|
||||
</el-upload>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
submitUpload() {
|
||||
this.$refs.upload.submit();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ---------------- | ---------------------------------------- | ---------------------------------- | ------------------------- | ----------- |
|
||||
| action | obligatorio, URL de la petición | string | — | — |
|
||||
| headers | cabeceras de la petición | object | — | — |
|
||||
| multiple | especifica si se permite subir múltiples archivos | boolean | — | — |
|
||||
| data | opciones adicionales de la petición | object | — | — |
|
||||
| name | nombre clave del archivo | string | — | file |
|
||||
| with-credentials | especifica si enviará cookies | boolean | — | false |
|
||||
| show-file-list | especifica si se debe mostrar la lista de archivos cargados | boolean | — | true |
|
||||
| drag | se especifica si se activará el modo arrastrar y soltar | boolean | — | false |
|
||||
| accept | acepta [tipos de archivos](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), puede no funcionar cuando `thumbnail-mode` esta en `true` | string | — | — |
|
||||
| on-preview | _hook_ lanzado al hacer clic en los archivos subidos | function(file) | — | — |
|
||||
| on-remove | _hook_ lanzado cuando los archivos son eliminados | function(file, fileList) | — | — |
|
||||
| on-success | _hook_ lanzado cuando los archivos fueron cargados correctamente | function(response, file, fileList) | — | — |
|
||||
| on-error | _hook_ lanzado cuando han ocurrido algunos errores | function(err, file, fileList) | — | — |
|
||||
| on-progress | _hook_ lanzado cuando se produce algún progreso | function(event, file, fileList) | — | — |
|
||||
| on-change | _hook_ lanzado cuando el archivo seleccionado se carga correctamente o falla | function(file, fileList) | — | — |
|
||||
| before-upload | _hook_ lanzado antes de que el archivo sea cargado. Si este devuelve `true` o `Promise` entonces será rechazado, la carga puede ser cancelada | function(file) | — | — |
|
||||
| thumbnail-mode | especifica si se mostrará la miniatura | boolean | — | false |
|
||||
| file-list | archivos cargados por defecto, por ejemplo, [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | [] |
|
||||
| list-type | tipo de lista de archivos | string | text/picture/picture-card | text |
|
||||
| auto-upload | se especifica si se autocargan archivos | boolean | — | true |
|
||||
| http-request | sobreescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos | function | — | — |
|
||||
| disabled | especifica si se deshabilita la carga de archivos | boolean | — | false |
|
||||
| limit | número máximo de cargas permitidas | number | — | — |
|
||||
| on-exceed | _hook_ lanzado cuando el límite ha sido excedido | function(files, fileList) | — | - |
|
||||
|
||||
### Métodos
|
||||
| Nombre del método | Descripción | Parametros |
|
||||
| ----------------- | ---------------------------------------- | ------------------------- |
|
||||
| clearFiles | limpia la lista de archivos cargados (este método no esta soportado en el _hook_ `before-upload`) | — |
|
||||
| abort | cancela la petición de carga | （ file: fileList's item ） |
|
||||
|
|
@ -60,5 +60,36 @@
|
|||
"nav": {
|
||||
"dropdown": "Version: "
|
||||
}
|
||||
},
|
||||
{
|
||||
"lang": "es",
|
||||
"demo-block": {
|
||||
"hide-text": "Ocultar",
|
||||
"show-text": "Mostrar",
|
||||
"button-text": "Probar",
|
||||
"tooltip-text": "Prueba este ejemplo en jsfiddle.net"
|
||||
},
|
||||
"footer": {
|
||||
"links": "Enlaces",
|
||||
"repo": "GitHub",
|
||||
"community": "Comunidad",
|
||||
"changelog": "Lista de cambios",
|
||||
"theme": "Generador de temas por CLI",
|
||||
"preview": "Generador de temas en línea",
|
||||
"faq": "FAQ",
|
||||
"gitter": "Gitter",
|
||||
"starter": "Kit de inicio",
|
||||
"feedback": "Comentarios",
|
||||
"contribution": "Contribución",
|
||||
"eleme": "Eleme"
|
||||
},
|
||||
"header": {
|
||||
"guide": "Guía",
|
||||
"components": "Componentes",
|
||||
"resource": "Recursos"
|
||||
},
|
||||
"nav": {
|
||||
"dropdown": "Versión: "
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -3,9 +3,6 @@
|
|||
"lang": "zh-CN",
|
||||
"pages": {
|
||||
"index": {
|
||||
"lang": "zh-CN",
|
||||
"titleSize": "34",
|
||||
"paraSize": "18",
|
||||
"1": "网站快速成型工具",
|
||||
"2": "Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库",
|
||||
"3": "指南",
|
||||
|
|
@ -14,7 +11,10 @@
|
|||
"6": "组件",
|
||||
"7": "使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。",
|
||||
"8": "资源",
|
||||
"9": "下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。"
|
||||
"9": "下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。",
|
||||
"lang": "zh-CN",
|
||||
"titleSize": "34",
|
||||
"paraSize": "18"
|
||||
},
|
||||
"component": {},
|
||||
"changelog": {
|
||||
|
|
@ -76,9 +76,6 @@
|
|||
"15": "适用于导航较少，页面篇幅较长的网站。"
|
||||
},
|
||||
"resource": {
|
||||
"paraHeight": "1.8",
|
||||
"placeholder1": "整理中",
|
||||
"placeholder2": "设计资源正在整理和完善中",
|
||||
"1": "资源",
|
||||
"2": "整理中",
|
||||
"3": "Axure Components",
|
||||
|
|
@ -87,7 +84,10 @@
|
|||
"6": "Sketch Template",
|
||||
"7": "从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格",
|
||||
"8": "组件交互文档",
|
||||
"9": "进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节"
|
||||
"9": "进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节",
|
||||
"paraHeight": "1.8",
|
||||
"placeholder1": "整理中",
|
||||
"placeholder2": "设计资源正在整理和完善中"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -95,12 +95,6 @@
|
|||
"lang": "en-US",
|
||||
"pages": {
|
||||
"index": {
|
||||
"lang": "en-US",
|
||||
"titleSize": "34",
|
||||
"paraSize": "18",
|
||||
"theatreParam": "{ maxSpeed: 100 }",
|
||||
"typingFunc": ".addScene('product designers', 1800, -17, 800)\n .addScene('UI designers', 1800, -12, 800)\n .addScene('UX designers', 1800, -12, 800)\n .addScene('product managers', 1800, -16, 800)\n .addScene('FE developers', 1800, -13, 800)",
|
||||
"typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:For ', 500)",
|
||||
"1": "A Desktop UI Library",
|
||||
"2": "Element, a Vue 2.0 based component library for developers, designers and product managers",
|
||||
"3": "Guide",
|
||||
|
|
@ -109,7 +103,13 @@
|
|||
"6": "Component",
|
||||
"7": "Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.",
|
||||
"8": "Resource",
|
||||
"9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency."
|
||||
"9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.",
|
||||
"lang": "en-US",
|
||||
"titleSize": "34",
|
||||
"paraSize": "18",
|
||||
"theatreParam": "{ maxSpeed: 100 }",
|
||||
"typingFunc": ".addScene('product designers', 1800, -17, 800)\n .addScene('UI designers', 1800, -12, 800)\n .addScene('UX designers', 1800, -12, 800)\n .addScene('product managers', 1800, -16, 800)\n .addScene('FE developers', 1800, -13, 800)",
|
||||
"typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:For ', 500)"
|
||||
},
|
||||
"component": {},
|
||||
"changelog": {
|
||||
|
|
@ -171,9 +171,6 @@
|
|||
"15": "Suitable for sites with few navigations and large chunks."
|
||||
},
|
||||
"resource": {
|
||||
"paraHeight": "1.6",
|
||||
"placeholder1": "Under construction",
|
||||
"placeholder2": "Please wait while we prepare the design resources",
|
||||
"1": "Resource",
|
||||
"2": "Under construction.",
|
||||
"3": "Axure Components",
|
||||
|
|
@ -182,7 +179,105 @@
|
|||
"6": "Sketch Template",
|
||||
"7": "Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.",
|
||||
"8": "Interaction Design Documentation",
|
||||
"9": "Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective."
|
||||
"9": "Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.",
|
||||
"paraHeight": "1.6",
|
||||
"placeholder1": "Under construction",
|
||||
"placeholder2": "Please wait while we prepare the design resources"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"lang": "es",
|
||||
"pages": {
|
||||
"index": {
|
||||
"1": "Un kit de interfaz de usuario para la web",
|
||||
"2": "Element, una librería de componentes basada en Vue 2.0 para desarrolladores, diseñadores y jefes de producto",
|
||||
"3": "Guía",
|
||||
"4": "Entender los líneamientos de diseño, ayudando a diseñadores a crear productos que sean lógicos, razonablemente estructurados y fáciles de usar.",
|
||||
"5": "Ver detalle",
|
||||
"6": "Componentes",
|
||||
"7": "Experimenta la interacción al pasear con los ejemplos de los componentes. Utiliza el código encapsulado para mejorar la eficiencia en el desarrollo.",
|
||||
"8": "Recursos",
|
||||
"9": "Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.",
|
||||
"lang": "es",
|
||||
"titleSize": "34",
|
||||
"paraSize": "18",
|
||||
"theatreParam": "{ maxSpeed: 100 }",
|
||||
"typingFunc": ".addScene('product designers', 1800, -17, 800)\n .addScene('UI designers', 1800, -12, 800)\n .addScene('UX designers', 1800, -12, 800)\n .addScene('product managers', 1800, -16, 800)\n .addScene('FE developers', 1800, -13, 800)",
|
||||
"typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:For ', 500)"
|
||||
},
|
||||
"component": {},
|
||||
"changelog": {
|
||||
"1": "Lista de cambios",
|
||||
"2": "en-US"
|
||||
},
|
||||
"design": {
|
||||
"1": "Disciplinas de diseño",
|
||||
"2": "Consistencia",
|
||||
"3": "",
|
||||
"4": "Comentarios",
|
||||
"5": "",
|
||||
"6": "Eficiencia",
|
||||
"7": "",
|
||||
"8": "Control",
|
||||
"9": "",
|
||||
"10": "Consistencia",
|
||||
"11": "Consistente con la vida real: ",
|
||||
"12": "en línea con el proceso y la vida real, y cumple con los idiomas y hábitos a los que los usuarios están acostumbrados.",
|
||||
"13": "Consistente dentro de la interfaz: ",
|
||||
"14": "todos los elementos deben ser consistentes, como: estilo de diseño, iconos y texto, posición de los elementos, etc.",
|
||||
"15": "Comentarios",
|
||||
"16": "Comentarios sobre la operación: ",
|
||||
"17": "Permite a los usuarios percibir claramente las operaciones mediante actualizaciones de estilo y efectos interactivos.",
|
||||
"18": "Comentarios visuales: ",
|
||||
"19": "Refleja el estado actual al actualizar o reorganizar los elementos de la página.",
|
||||
"20": "Eficiencia",
|
||||
"21": "Simplifica el proceso: ",
|
||||
"22": "Mantiene el proceso operativo simple e intuitivo.",
|
||||
"23": "Bien definido y claro: ",
|
||||
"24": "Expresa las intenciones claramente para que los usuarios puedan comprender y tomar decisiones rápidamente.",
|
||||
"25": "Fácil de identificar: ",
|
||||
"26": "La interfaz debe ser sencilla, lo que permitirá a los usuarios a identificar y liberarlos de la memorización y recuerdos.",
|
||||
"27": "Control",
|
||||
"28": "Toma de decisiones: ",
|
||||
"29": "Brindar consejos sobres las operaciones es aceptable, pero no tomar desiciones para los usuarios.",
|
||||
"30": "Consecuencias controladas: ",
|
||||
"31": "Los usuarios deben tener la libertad de operar, incluida la cancelación, el aborto o la terminación de las operaciones actuales."
|
||||
},
|
||||
"guide": {
|
||||
"1": "Disciplinas de diseño",
|
||||
"2": "Navegación"
|
||||
},
|
||||
"nav": {
|
||||
"1": "Navegación",
|
||||
"2": "La navegación se centra en resolver los problemas de los usuarios sobre donde ir y como llegar ahí. En general, se puede categorizar en 'navegación de barra lateral' y 'navegación superior'.",
|
||||
"3": "Elige la navegación correcta",
|
||||
"4": "Una navegación apropiada provee a los usuarios una mejor experiencia, mientras que una inapropiada genera confusión. Esta es la diferencia entre la navegación de la barra lateral y la navegación superior.",
|
||||
"5": "Navegación lateral",
|
||||
"6": "Fija la navegación del lado izquierdo, esto permitirá una mejor visibilidad, lo que facilitará el cambio de pagina. En este caso, el área superior de la pagina contiene herramientas comúnmente utilizadas, por ejemplo, barra de búsqueda, botón de ayuda, botón de aviso, etc. Adecuado para sitios web de gestión.",
|
||||
"7": "Categorías de Nivel 1",
|
||||
"8": "Adecuado para sitios con una estructura simple con un solo nivel de páginas. No se necesita un 'breadcrumb'.",
|
||||
"9": "Categorías de Nivel 2",
|
||||
"10": "La barra lateral muestra hasta dos niveles de navegación. Se recomienda utilizar un 'breadcrumb' en combinación con la navegación de segundo nivel, lo que facilita la localización y navegación de los usuarios.",
|
||||
"11": "Categorías de Nivel 3",
|
||||
"12": "Adecuado para sitios web bastante complejos. La barra lateral izquierda contiene navegación de primer nivel, y la columna central muestra navegación de segundo nivel u otras opciones de utilidad.",
|
||||
"13": "Navegación superior",
|
||||
"14": "Se ajusta de acuerdo a la exploración normal de arriba a abajo, lo que hace que las cosas sean más naturales. La cantidad de navegación y la longitud del texto están limitadas al ancho de la parte superior.",
|
||||
"15": "Adecuado para sitios con pocas navegaciones y grandes trozos."
|
||||
},
|
||||
"resource": {
|
||||
"1": "Recursos",
|
||||
"2": "En construcción",
|
||||
"3": "Componetes de Axure",
|
||||
"4": "Mediante la importación de elementos de interfaz de usuario en Axure, se puede aplicar fácilmente a todos los componentes que proporcionamos durante el diseño de interacción.",
|
||||
"5": "Descarga",
|
||||
"6": "Plantilla de Sketch",
|
||||
"7": "Aplica componentes de la plantilla Element para que pueda mejorarla eficiencia del diseño manteniendo un estilo visual unificado.",
|
||||
"8": "Documentación de diseño de interacción",
|
||||
"9": "Eche un vistazo más de cerca a la documentación de diseño de interacción. Conoce más detalles de cada componente desde una perspectiva microcósmica.",
|
||||
"paraHeight": "1.6",
|
||||
"placeholder1": "En construcción",
|
||||
"placeholder2": "Por favor espere mientras preparamos los recursos de diseño"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,5 +4,8 @@
|
|||
},
|
||||
{
|
||||
"lang": "en-US"
|
||||
},
|
||||
{
|
||||
"lang": "es"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -10,5 +10,11 @@
|
|||
"guide": "Guide | Element",
|
||||
"component": "Component | Element",
|
||||
"resource": "Resource | Element"
|
||||
},
|
||||
"es": {
|
||||
"home": "Element - Un kit de interfaz de usuario para la web",
|
||||
"guide": "Guía | Element",
|
||||
"component": "Componentes | Element",
|
||||
"resource": "Recursos | Element"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -498,5 +498,255 @@
|
|||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"es": [
|
||||
{
|
||||
"name": "Changelog-es",
|
||||
"path": "/changelog"
|
||||
},
|
||||
{
|
||||
"name": "Element React",
|
||||
"href": "https://eleme.github.io/element-react/"
|
||||
},
|
||||
{
|
||||
"name": "Element Angular",
|
||||
"href": "https://eleme.github.io/element-angular/"
|
||||
},
|
||||
{
|
||||
"name": "Development",
|
||||
"children": [
|
||||
{
|
||||
"path": "/installation",
|
||||
"name": "Installation-es"
|
||||
},
|
||||
{
|
||||
"path": "/quickstart",
|
||||
"name": "Quick Start-es"
|
||||
},
|
||||
{
|
||||
"path": "/i18n",
|
||||
"name": "Internationalization-es"
|
||||
},
|
||||
{
|
||||
"path": "/custom-theme",
|
||||
"name": "Custom Theme-es"
|
||||
},
|
||||
{
|
||||
"path": "/transition",
|
||||
"name": "Built-in transition-es"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Components",
|
||||
"groups": [
|
||||
{
|
||||
"groupName": "Basic",
|
||||
"list": [
|
||||
{
|
||||
"path": "/layout",
|
||||
"title": "Layout-es"
|
||||
},
|
||||
{
|
||||
"path": "/container",
|
||||
"title": "Layout Container-es"
|
||||
},
|
||||
{
|
||||
"path": "/color",
|
||||
"title": "Color-es"
|
||||
},
|
||||
{
|
||||
"path": "/typography",
|
||||
"title": "Typography-es"
|
||||
},
|
||||
{
|
||||
"path": "/icon",
|
||||
"title": "Icon-es"
|
||||
},
|
||||
{
|
||||
"path": "/button",
|
||||
"title": "Button-es"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "Form",
|
||||
"list": [
|
||||
{
|
||||
"path": "/radio",
|
||||
"title": "Radio-es"
|
||||
},
|
||||
{
|
||||
"path": "/checkbox",
|
||||
"title": "Checkbox-es"
|
||||
},
|
||||
{
|
||||
"path": "/input",
|
||||
"title": "Input-es"
|
||||
},
|
||||
{
|
||||
"path": "/input-number",
|
||||
"title": "InputNumber-es"
|
||||
},
|
||||
{
|
||||
"path": "/select",
|
||||
"title": "Select-es"
|
||||
},
|
||||
{
|
||||
"path": "/cascader",
|
||||
"title": "Cascader-es"
|
||||
},
|
||||
{
|
||||
"path": "/switch",
|
||||
"title": "Switch-es"
|
||||
},
|
||||
{
|
||||
"path": "/slider",
|
||||
"title": "Slider-es"
|
||||
},
|
||||
{
|
||||
"path": "/time-picker",
|
||||
"title": "TimePicker-es"
|
||||
},
|
||||
{
|
||||
"path": "/date-picker",
|
||||
"title": "DatePicker-es"
|
||||
},
|
||||
{
|
||||
"path": "/datetime-picker",
|
||||
"title": "DateTimePicker-es"
|
||||
},
|
||||
{
|
||||
"path": "/upload",
|
||||
"title": "Upload-es"
|
||||
},
|
||||
{
|
||||
"path": "/rate",
|
||||
"title": "Rate-es"
|
||||
},
|
||||
{
|
||||
"path": "/color-picker",
|
||||
"title": "ColorPicker-es"
|
||||
},
|
||||
{
|
||||
"path": "/transfer",
|
||||
"title": "Transfer-es"
|
||||
},
|
||||
{
|
||||
"path": "/form",
|
||||
"title": "Form-es"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "Data",
|
||||
"list": [
|
||||
{
|
||||
"path": "/table",
|
||||
"title": "Table-es"
|
||||
},
|
||||
{
|
||||
"path": "/tag",
|
||||
"title": "Tag-es"
|
||||
},
|
||||
{
|
||||
"path": "/progress",
|
||||
"title": "Progress-es"
|
||||
},
|
||||
{
|
||||
"path": "/tree",
|
||||
"title": "Tree-es"
|
||||
},
|
||||
{
|
||||
"path": "/pagination",
|
||||
"title": "Pagination-es"
|
||||
},
|
||||
{
|
||||
"path": "/badge",
|
||||
"title": "Badge-es"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "Notice",
|
||||
"list": [
|
||||
{
|
||||
"path": "/alert",
|
||||
"title": "Alert-es"
|
||||
},
|
||||
{
|
||||
"path": "/loading",
|
||||
"title": "Loading-es"
|
||||
},
|
||||
{
|
||||
"path": "/message",
|
||||
"title": "Message-es"
|
||||
},
|
||||
{
|
||||
"path": "/message-box",
|
||||
"title": "MessageBox-es"
|
||||
},
|
||||
{
|
||||
"path": "/notification",
|
||||
"title": "Notification-es"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "Navigation",
|
||||
"list": [
|
||||
{
|
||||
"path": "/menu",
|
||||
"title": "NavMenu-es"
|
||||
},
|
||||
{
|
||||
"path": "/tabs",
|
||||
"title": "Tabs-es"
|
||||
},
|
||||
{
|
||||
"path": "/breadcrumb",
|
||||
"title": "Breadcrumb-es"
|
||||
},
|
||||
{
|
||||
"path": "/dropdown",
|
||||
"title": "Dropdown-es"
|
||||
},
|
||||
{
|
||||
"path": "/steps",
|
||||
"title": "Steps-es"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"groupName": "Others",
|
||||
"list": [
|
||||
{
|
||||
"path": "/dialog",
|
||||
"title": "Dialog-es"
|
||||
},
|
||||
{
|
||||
"path": "/tooltip",
|
||||
"title": "Tooltip-es"
|
||||
},
|
||||
{
|
||||
"path": "/popover",
|
||||
"title": "Popover-es"
|
||||
},
|
||||
{
|
||||
"path": "/card",
|
||||
"title": "Card-es"
|
||||
},
|
||||
{
|
||||
"path": "/carousel",
|
||||
"title": "Carousel-es"
|
||||
},
|
||||
{
|
||||
"path": "/collapse",
|
||||
"title": "Collapse-es"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,188 @@
|
|||
<style>
|
||||
.page-changelog {
|
||||
padding-bottom: 100px;
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
padding: 0;
|
||||
|
||||
&.el-button {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&:hover a {
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 24px;
|
||||
margin-bottom: 60px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
padding: 0;
|
||||
padding-bottom: 10px;
|
||||
position: relative;
|
||||
color: #5e6d82;
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
padding-bottom: 15px;
|
||||
list-style: none;
|
||||
line-height: 1.8;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 30px 30px 15px;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
padding-top: 5px;
|
||||
padding-left: 27px;
|
||||
|
||||
li {
|
||||
padding-left: 0;
|
||||
color: #555;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
li::before {
|
||||
content: '';
|
||||
circle: 4px #fff;
|
||||
border: solid 1px #333;
|
||||
margin-right: -12px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li li {
|
||||
font-size: 16px;
|
||||
list-style: none;
|
||||
padding-left: 20px;
|
||||
padding-bottom: 5px;
|
||||
color: #333;
|
||||
word-break: break-all;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
circle: 6px #333;
|
||||
transform: translateX(-20px);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
padding: 0 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin:0;
|
||||
padding: 15px 30px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
|
||||
a {
|
||||
opacity: 1;
|
||||
font-size: 20px;
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
margin-bottom: -10px;
|
||||
font-size: 18px;
|
||||
padding-left: 54px;
|
||||
padding-top: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
em {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
font-style: normal;
|
||||
top: 23px;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="page-changelog">
|
||||
<div class="heading">
|
||||
<el-button class="fr">
|
||||
<a href="https://github.com/ElemeFE/element/releases" target="_blank">Github Releases</a>
|
||||
</el-button>
|
||||
Changelog
|
||||
</div>
|
||||
<ul class="timeline" ref="timeline">
|
||||
</ul>
|
||||
<change-log ref="changeLog"></change-log>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ChangeLog from '../../../CHANGELOG.en-US.md';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ChangeLog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
count: 3
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const changeLog = this.$refs.changeLog;
|
||||
const changeLogNodes = changeLog.$el.children;
|
||||
let a = changeLogNodes[1].querySelector('a');
|
||||
a && a.remove();
|
||||
let release = changeLogNodes[1].textContent.trim();
|
||||
let fragments = `<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v${release}" target="_blank">${release}</a></h3>`;
|
||||
|
||||
for (let len = changeLogNodes.length, i = 2; i < len; i++) {
|
||||
let node = changeLogNodes[i];
|
||||
a = changeLogNodes[i].querySelector('a');
|
||||
a && a.getAttribute('class') === 'header-anchor' && a.remove();
|
||||
if (node.tagName !== 'H3') {
|
||||
fragments += changeLogNodes[i].outerHTML;
|
||||
} else {
|
||||
release = changeLogNodes[i].textContent.trim();
|
||||
fragments += `</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v${release}" target="_blank">${release}</a></h3>`;
|
||||
}
|
||||
}
|
||||
fragments = fragments.replace(/#(\d+)/g, '<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>');
|
||||
fragments = fragments.replace(/@(\w+)/g, '<a href="https://github.com/$1" target="_blank">@$1</a>');
|
||||
this.$refs.timeline.innerHTML = `${fragments}</li>`;
|
||||
|
||||
changeLog.$el.remove();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,288 @@
|
|||
<style>
|
||||
.page-component__scroll {
|
||||
height: calc(100% - 80px);
|
||||
margin-top: 80px;
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.page-component {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
|
||||
&.page-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page-component__nav {
|
||||
width: 240px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin-top: 80px;
|
||||
transition: padding-top .3s;
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.is-extended {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.side-nav {
|
||||
height: 100%;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
padding-right: 0;
|
||||
|
||||
& > ul {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-component__content {
|
||||
padding-left: 270px;
|
||||
padding-bottom: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 50px;
|
||||
|
||||
> {
|
||||
h3 {
|
||||
margin: 55px 0 20px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
font-size: 14px;
|
||||
margin-bottom: 45px;
|
||||
line-height: 1.5em;
|
||||
|
||||
strong {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
td, th {
|
||||
border-bottom: 1px solid #d8d8d8;
|
||||
padding: 15px;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
color: #666;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
td {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
th:first-child, td:first-child {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
ul:not(.timeline) {
|
||||
margin: 10px 0;
|
||||
padding: 0 0 0 20px;
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
line-height: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-component-up {
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
right: 100px;
|
||||
bottom: 150px;
|
||||
size: 40px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
box-shadow: 0 0 6px rgba(0,0,0, .12);
|
||||
|
||||
i {
|
||||
color: #409EFF;
|
||||
display: block;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&.hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.back-top-fade-enter,
|
||||
.back-top-fade-leave-active {
|
||||
transform: translateY(-30px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-component {
|
||||
.page-component__nav {
|
||||
width: 100%;
|
||||
position: static;
|
||||
margin-top: 0;
|
||||
}
|
||||
.side-nav {
|
||||
padding-top: 0;
|
||||
padding-left: 50px;
|
||||
}
|
||||
.page-component__content {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.content {
|
||||
padding-top: 0;
|
||||
}
|
||||
.content > table {
|
||||
overflow: auto;
|
||||
display: block;
|
||||
}
|
||||
.page-component-up {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<el-scrollbar class="page-component__scroll" ref="componentScrollBar">
|
||||
<div class="page-container page-component">
|
||||
<el-scrollbar class="page-component__nav">
|
||||
<side-nav :data="navsData[lang]" :base="`/${ lang }/component`"></side-nav>
|
||||
</el-scrollbar>
|
||||
<div class="page-component__content">
|
||||
<router-view class="content"></router-view>
|
||||
<footer-nav></footer-nav>
|
||||
</div>
|
||||
<transition name="back-top-fade">
|
||||
<div
|
||||
class="page-component-up"
|
||||
:class="{ 'hover': hover }"
|
||||
v-show="showBackToTop"
|
||||
@mouseenter="hover = true"
|
||||
@mouseleave="hover = false"
|
||||
@click="toTop">
|
||||
<i class="el-icon-caret-top"></i>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
<script>
|
||||
import bus from '../../bus';
|
||||
import navsData from '../../nav.config.json';
|
||||
import throttle from 'throttle-debounce/throttle';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lang: this.$route.meta.lang,
|
||||
navsData,
|
||||
hover: false,
|
||||
showBackToTop: false,
|
||||
scrollTop: 0,
|
||||
showHeader: true,
|
||||
componentScrollBar: null,
|
||||
componentScrollBoxElement: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$route.path'() {
|
||||
// 触发伪滚动条更新
|
||||
this.componentScrollBox.scrollTop = 0;
|
||||
this.$nextTick(() => {
|
||||
this.componentScrollBar.update();
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
renderAnchorHref() {
|
||||
if (/changelog/g.test(location.href)) return;
|
||||
const anchors = document.querySelectorAll('h2 a,h3 a');
|
||||
const basePath = location.href.split('#').splice(0, 2).join('#');
|
||||
|
||||
[].slice.call(anchors).forEach(a => {
|
||||
const href = a.getAttribute('href');
|
||||
a.href = basePath + href;
|
||||
});
|
||||
},
|
||||
|
||||
goAnchor() {
|
||||
if (location.href.match(/#/g).length > 1) {
|
||||
const anchor = location.href.match(/#[^#]+$/g);
|
||||
if (!anchor) return;
|
||||
const elm = document.querySelector(anchor[0]);
|
||||
if (!elm) return;
|
||||
|
||||
setTimeout(_ => {
|
||||
this.componentScrollBox.scrollTop = elm.offsetTop;
|
||||
}, 50);
|
||||
}
|
||||
},
|
||||
toTop() {
|
||||
this.hover = false;
|
||||
this.showBackToTop = false;
|
||||
this.componentScrollBox.scrollTop = 0;
|
||||
},
|
||||
|
||||
handleScroll() {
|
||||
const scrollTop = this.componentScrollBox.scrollTop;
|
||||
this.showBackToTop = scrollTop >= 0.5 * document.body.clientHeight;
|
||||
if (this.showHeader !== this.scrollTop > scrollTop) {
|
||||
this.showHeader = this.scrollTop > scrollTop;
|
||||
}
|
||||
if (scrollTop === 0) {
|
||||
this.showHeader = true;
|
||||
}
|
||||
if (!this.navFaded) {
|
||||
bus.$emit('fadeNav');
|
||||
}
|
||||
this.scrollTop = scrollTop;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
bus.$on('navFade', val => {
|
||||
this.navFaded = val;
|
||||
});
|
||||
window.addEventListener('hashchange', () => {
|
||||
if (location.href.match(/#/g).length < 2) {
|
||||
document.documentElement.scrollTop = document.body.scrollTop = 0;
|
||||
this.renderAnchorHref();
|
||||
} else {
|
||||
this.goAnchor();
|
||||
}
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.componentScrollBar = this.$refs.componentScrollBar;
|
||||
this.componentScrollBox = this.componentScrollBar.$el.querySelector('.el-scrollbar__wrap');
|
||||
this.throttledScrollHandler = throttle(300, this.handleScroll);
|
||||
this.componentScrollBox.addEventListener('scroll', this.throttledScrollHandler);
|
||||
this.renderAnchorHref();
|
||||
this.goAnchor();
|
||||
document.body.classList.add('is-component');
|
||||
},
|
||||
destroyed() {
|
||||
document.body.classList.remove('is-component');
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.componentScrollBox.removeEventListener('scroll', this.throttledScrollHandler);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<style scoped>
|
||||
.cards {
|
||||
margin: 30px 0 70px;
|
||||
}
|
||||
.card {
|
||||
background: #fbfcfd;
|
||||
height: 204px;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
margin: 40px auto 25px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
color: #1f2d3d;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<h2>Design Disciplines</h2>
|
||||
<el-row :gutter="14" class="cards">
|
||||
<el-col :xs="12" :sm="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/consistency.png" alt="Consistency">
|
||||
<h4>Consistency</h4>
|
||||
<span></span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/feedback.png" alt="Feedback">
|
||||
<h4>Feedback</h4>
|
||||
<span></span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/efficiency.png" alt="Efficiency">
|
||||
<h4>Efficiency</h4>
|
||||
<span></span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="6">
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/controllability.png" alt="Controllability">
|
||||
<h4>Controllability</h4>
|
||||
<span></span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<h3>Consistency</h3>
|
||||
<ul>
|
||||
<li><strong>Consistent with real life: </strong>in line with the process and logic of real life, and comply with languages and habits that the users are used to.</li>
|
||||
<li><strong>Consistent within interface: </strong>all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</li>
|
||||
</ul>
|
||||
<h3>Feedback</h3>
|
||||
<ul>
|
||||
<li><strong>Operation feedback: </strong>enable the users to clearly perceive their operations by style updates and interactive effects.</li>
|
||||
<li><strong>Visual feedback: </strong>reflect current state by updating or rearranging elements of the page.</li>
|
||||
</ul>
|
||||
<h3>Efficiency</h3>
|
||||
<ul>
|
||||
<li><strong>Simplify the process: </strong>keep operating process simple and intuitive.</li>
|
||||
<li><strong>Definite and clear: </strong>enunciate your intentions clearly so that the users can quickly understand and make decisions.</li>
|
||||
<li><strong>Easy to identify: </strong>the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</li>
|
||||
</ul>
|
||||
<h3>Controllability</h3>
|
||||
<ul>
|
||||
<li><strong>Decision making: </strong>giving advices about operations is acceptable, but do not make decisions for the users.</li>
|
||||
<li><strong>Controlled consequences: </strong>users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<style>
|
||||
.page-guide {
|
||||
padding: 55px 30px 95px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.content {
|
||||
padding-left: 25px;
|
||||
margin-left: -1px;
|
||||
h2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
font-weight: normal;
|
||||
margin: 0 0 30px;
|
||||
color: #1f2d3d;
|
||||
}
|
||||
p {
|
||||
line-height: 1.6;
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
}
|
||||
ul {
|
||||
margin-bottom: 50px;
|
||||
padding-left: 0;
|
||||
}
|
||||
li {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
color: #99a9bf;
|
||||
list-style: none;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: @width;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
background-color: #5e6d82;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #5e6d82;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-guide {
|
||||
.content {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="page-container page-guide">
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="5">
|
||||
<side-nav :data="navsData" :base="`/${ lang }/guide`"></side-nav>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="19">
|
||||
<router-view class="content"></router-view>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lang: this.$route.meta.lang,
|
||||
navsData: [
|
||||
{
|
||||
path: '/design',
|
||||
name: 'Design Disciplines'
|
||||
},
|
||||
{
|
||||
path: '/nav',
|
||||
name: 'Navigation'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,323 @@
|
|||
<style scoped>
|
||||
.banner {
|
||||
text-align: center;
|
||||
}
|
||||
.banner-desc {
|
||||
padding-top: 20px;
|
||||
|
||||
h1 {
|
||||
font-size: 34px;
|
||||
margin: 0;
|
||||
line-height: 48px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
color: #888;
|
||||
margin: 10px 0 5px;
|
||||
}
|
||||
}
|
||||
.jumbotron {
|
||||
width: 890px;
|
||||
height: 465px;
|
||||
margin: 30px auto 100px;
|
||||
position: relative;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.jumbotron-cloud-1 {
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.jumbotron-plant-2 {
|
||||
left: 60px;
|
||||
top: 200px;
|
||||
}
|
||||
|
||||
.jumbotron-web {
|
||||
height: 385px;
|
||||
top: 35px;
|
||||
left: 110px;
|
||||
}
|
||||
|
||||
.jumbotron-cloud-2 {
|
||||
left: 0;
|
||||
top: 50px;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.jumbotron-compo-1 {
|
||||
left: 94px;
|
||||
height: 90px;
|
||||
top: 220px;
|
||||
}
|
||||
|
||||
.jumbotron-compo-2 {
|
||||
right: 73px;
|
||||
top: 60px;
|
||||
height: 124px;
|
||||
}
|
||||
|
||||
.jumbotron-compo-3 {
|
||||
right: 42px;
|
||||
top: 200px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.jumbotron-plant-1 {
|
||||
bottom: 0;
|
||||
left: 30px;
|
||||
height: 185px;
|
||||
}
|
||||
|
||||
.jumbotron-figure-1 {
|
||||
bottom: 0;
|
||||
right: 180px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.jumbotron-figure-2 {
|
||||
bottom: 0;
|
||||
right: 10px;
|
||||
height: 68px;
|
||||
}
|
||||
}
|
||||
.cards {
|
||||
margin: 0 auto 110px;
|
||||
width: 1140px;
|
||||
|
||||
.container {
|
||||
@utils-clearfix;
|
||||
padding: 0;
|
||||
margin: 0 -11px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 33.33333%;
|
||||
padding: 0 19px;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 160px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
height: 430px;
|
||||
width: 100%;
|
||||
background:#ffffff;
|
||||
border:1px solid #eaeefb;
|
||||
border-radius:5px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
transition: all .3s ease-in-out;
|
||||
bottom: 0;
|
||||
|
||||
img {
|
||||
margin: 66px auto 60px;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #1f2f3d;
|
||||
font-weight: normal;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
padding: 0 25px;
|
||||
line-height: 20px;
|
||||
}
|
||||
a {
|
||||
height: 53px;
|
||||
line-height: 52px;
|
||||
font-size: 14px;
|
||||
color: #409EFF;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
border-top: 1px solid #eaeefb;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 0 0 5px 5px;
|
||||
transition: all .3s;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: #409EFF;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
bottom: 6px;
|
||||
box-shadow: 0 6px 18px 0 rgba(232,237,250,0.50);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1140px) {
|
||||
.cards {
|
||||
width: 100%;
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.banner .container {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.banner img {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.banner .container {
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.jumbotron {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cards {
|
||||
li {
|
||||
width: 80%;
|
||||
margin: 0 auto 20px;
|
||||
float: none;
|
||||
}
|
||||
.card {
|
||||
height: auto;
|
||||
padding-bottom: 54px;
|
||||
}
|
||||
}
|
||||
.banner-stars {
|
||||
display: none;
|
||||
}
|
||||
.banner-desc {
|
||||
#line2 {
|
||||
display: none;
|
||||
}
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
p {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<div class="banner">
|
||||
<div class="banner-desc">
|
||||
<h1>A Desktop UI Library</h1>
|
||||
<p>Element, a Vue 2.0 based component library for developers, designers and product managers</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jumbotron">
|
||||
<div>
|
||||
<img class="jumbotron-plant-2" src="~examples/assets/images/plant-2.png" alt="">
|
||||
<img class="jumbotron-web" src="~examples/assets/images/web.png" alt="">
|
||||
<img class="jumbotron-plant-1" src="~examples/assets/images/plant-1.png" alt="">
|
||||
<img class="jumbotron-figure-1" src="~examples/assets/images/figure-1.png" alt="">
|
||||
<img class="jumbotron-figure-2" src="~examples/assets/images/figure-2.png" alt="">
|
||||
</div>
|
||||
<div data-hover-layer="0">
|
||||
<img class="jumbotron-cloud-1" src="~examples/assets/images/cloud-1.png" alt="">
|
||||
<img class="jumbotron-cloud-2" src="~examples/assets/images/cloud-2.png" alt="">
|
||||
</div>
|
||||
<div data-hover-layer="1">
|
||||
<img class="jumbotron-compo-1" src="~examples/assets/images/compo-1.png" alt="">
|
||||
<img class="jumbotron-compo-2" src="~examples/assets/images/compo-2.png" alt="">
|
||||
<img class="jumbotron-compo-3" src="~examples/assets/images/compo-3.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<ul class="container">
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/guide.png" alt="">
|
||||
<h3>Guide</h3>
|
||||
<p>Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.</p>
|
||||
<router-link
|
||||
active-class="active"
|
||||
to="/en-US/guide/design"
|
||||
exact>View Detail
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/component.png" alt="">
|
||||
<h3>Component</h3>
|
||||
<p>Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.</p>
|
||||
<router-link
|
||||
active-class="active"
|
||||
to="/en-US/component/layout"
|
||||
exact>View Detail
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card">
|
||||
<img src="~examples/assets/images/resource.png" alt="">
|
||||
<h3>Resource</h3>
|
||||
<p>Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.</p>
|
||||
<router-link
|
||||
active-class="active"
|
||||
to="/en-US/resource"
|
||||
exact>View Detail
|
||||
</router-link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Hover } from 'perspective.js';
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
new Hover('.jumbotron', { // eslint-disable-line
|
||||
max: 3,
|
||||
scale: 1,
|
||||
perspective: 700,
|
||||
layers: [{
|
||||
multiple: 0.01,
|
||||
reverseTranslate: true
|
||||
}, {
|
||||
multiple: 0.02,
|
||||
reverseTranslate: true
|
||||
}]
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<style scoped>
|
||||
h3 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.block {
|
||||
margin-bottom: 55px;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
.nav-demos {
|
||||
p {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
h5 {
|
||||
margin: 0;
|
||||
}
|
||||
img {
|
||||
padding: 15px;
|
||||
background-color: #F9FAFC;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.dialog-img {
|
||||
position: fixed;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
outline: 0;
|
||||
|
||||
.imgWrap {
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
top: 100px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #373737;
|
||||
background-color: rgba(55, 55, 55, 0.6);
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
.zoom-enter-active,
|
||||
.zoom-leave-active {
|
||||
transition: transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
}
|
||||
.zoom-enter,
|
||||
.zoom-leave-active {
|
||||
transform: scale(0.3);
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
}
|
||||
.fade-enter,
|
||||
.fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<h2>Navigation</h2>
|
||||
<div class="block">
|
||||
<p>Navigation focuses on solving the users' problems of where to go and how to get there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'.</p>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h3>Choose the right navigation</h3>
|
||||
<p>An appropriate navigation gives users a smooth experience, while an inappropriate one leads to confusion. Here are the differences between sidebar navigation and top navigation</p>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h3>Side Navigation</h3>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="9">
|
||||
<p>Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In this case, the top area of the page holds commonly used tools, e.g. search bar, help button, notice button, etc. Suitable for background management or utility websites.</p>
|
||||
</el-col>
|
||||
<el-col :span="15" class="nav-demos">
|
||||
<img src="~examples/assets/images/navbar_1.png" alt="Level 1 categories" @click="enlarge(846, $event)">
|
||||
<h5>Level 1 categories</h5>
|
||||
<p>Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.</p>
|
||||
<img src="~examples/assets/images/navbar_2.png" alt="Level 2 categories" @click="enlarge(846, $event)">
|
||||
<h5>Level 2 categories</h5>
|
||||
<p>Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate.</p>
|
||||
<img src="~examples/assets/images/navbar_3.png" alt="Level 3 categories" @click="enlarge(846, $event)">
|
||||
<h5>Level 3 categories</h5>
|
||||
<p>Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options.</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h3>Top Navigation</h3>
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<p>Conforms to the normal browsing order from top to bottom, which makes things more natural. The navigation amount and text length are limited to the width of the top.</p>
|
||||
</el-col>
|
||||
<el-col :span="14" class="nav-demos">
|
||||
<img src="~examples/assets/images/navbar_0.png" alt="" @click="enlarge(846, $event)">
|
||||
<p>Suitable for sites with few navigations and large chunks.</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div class="mask" v-show="showDialog" @click="showDialog = false"></div>
|
||||
</transition>
|
||||
<transition name="zoom">
|
||||
<div class="dialog-img" :style='imgWrapStyle' v-show="showDialog" @click="showDialog = false">
|
||||
<div class="imgWrap" :style="imgStyle">
|
||||
<img :src="imgUrl" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imgUrl: '',
|
||||
imgBound: {},
|
||||
showDialog: false,
|
||||
imgStyle: {},
|
||||
imgWrapStyle: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
showDialog(val) {
|
||||
document.body.style.overflow = val ? 'hidden' : '';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
enlarge(imgWidth, ev) {
|
||||
var imgNode = ev.target;
|
||||
// var bound = imgNode.getBoundingClientRect();
|
||||
var offset = {};
|
||||
var doc = document;
|
||||
|
||||
offset.left = (doc.body.scrollWidth - imgWidth) / 2;
|
||||
offset.top = 100;
|
||||
|
||||
this.imgUrl = imgNode.src;
|
||||
this.imgBound = imgNode.getBoundingClientRect();
|
||||
|
||||
this.imgWrapStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;
|
||||
// this.imgStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;
|
||||
this.imgStyle.width = imgWidth + 'px';
|
||||
this.showDialog = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<style scoped>
|
||||
.page-resource {
|
||||
padding-top: 55px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.resource-placeholder {
|
||||
margin: 50px auto 100px;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 20px 0 16px;
|
||||
font-size: 16px;
|
||||
color: #1f2f3d;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cards {
|
||||
margin: 35px auto 110px;
|
||||
|
||||
.container {
|
||||
@utils-clearfix;
|
||||
padding: 0;
|
||||
margin: 0 -11px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 33.33333%;
|
||||
padding: 0 11px;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
}
|
||||
.card {
|
||||
height: 394px;
|
||||
width: 100%;
|
||||
background:#ffffff;
|
||||
border:1px solid #eaeefb;
|
||||
border-radius:5px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
transition: bottom .3s;
|
||||
bottom: 0;
|
||||
|
||||
img {
|
||||
margin: 75px auto 35px;
|
||||
height: 87px;
|
||||
}
|
||||
h3 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 18px;
|
||||
color: #1f2f3d;
|
||||
font-weight: normal;
|
||||
height: 22px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
padding: 0 30px;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
a {
|
||||
height: 42px;
|
||||
width: 190px;
|
||||
display: inline-block;
|
||||
line-height: @height;
|
||||
font-size: 14px;
|
||||
background-color: #409EFF;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
transition: all .3s;
|
||||
text-decoration: none;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 850px) {
|
||||
.cards {
|
||||
li {
|
||||
max-width: 500px;
|
||||
float: none;
|
||||
margin: 10px auto 30px;
|
||||
width: 80%;
|
||||
.card {
|
||||
height: auto;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="page-container page-resource">
|
||||
<h2>Resource</h2>
|
||||
<div class="resource-placeholder">
|
||||
<img src="~examples/assets/images/resource-placeholder.svg" alt="">
|
||||
<h4>Under construction</h4>
|
||||
<p>Please wait while we prepare the design resources</p>
|
||||
</div>
|
||||
|
||||
<!--<p>Under construction.</p>-->
|
||||
<!--<div class="cards">-->
|
||||
<!--<ul class="container">-->
|
||||
<!--<li>-->
|
||||
<!--<div class="card">-->
|
||||
<!--<img src="~examples/assets/images/Axure-Components.svg" alt="">-->
|
||||
<!--<h3>Axure Components</h3>-->
|
||||
<!--<p>By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.</p>-->
|
||||
<!--<a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib">Download</a>-->
|
||||
<!--</div>-->
|
||||
<!--</li>-->
|
||||
<!--<li>-->
|
||||
<!--<div class="card">-->
|
||||
<!--<img src="~examples/assets/images/Sketch-Template.svg" alt="">-->
|
||||
<!--<h3>Sketch Template</h3>-->
|
||||
<!--<p>Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.</p>-->
|
||||
<!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch">Download</a>-->
|
||||
<!--</div>-->
|
||||
<!--</li>-->
|
||||
<!--<li>-->
|
||||
<!--<div class="card">-->
|
||||
<!--<img src="~examples/assets/images/Module.svg" alt="">-->
|
||||
<!--<h3>Interaction Design Documentation</h3>-->
|
||||
<!--<p>Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.</p>-->
|
||||
<!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip">Download</a>-->
|
||||
<!--</div>-->
|
||||
<!--</li>-->
|
||||
<!--</ul>-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -11,6 +11,11 @@ const LOAD_MAP = {
|
|||
return r => require.ensure([], () =>
|
||||
r(require(`./pages/en-US/${name}.vue`)),
|
||||
'en-US');
|
||||
},
|
||||
'es': name => {
|
||||
return r => require.ensure([], () =>
|
||||
r(require(`./pages/es/${name}.vue`)),
|
||||
'es');
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -28,6 +33,11 @@ const LOAD_DOCS_MAP = {
|
|||
return r => require.ensure([], () =>
|
||||
r(require(`./docs/en-US${path}.md`)),
|
||||
'en-US');
|
||||
},
|
||||
'es': path => {
|
||||
return r => require.ensure([], () =>
|
||||
r(require(`./docs/es${path}.md`)),
|
||||
'es');
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -134,6 +144,8 @@ let userLanguage = localStorage.getItem('ELEMENT_LANGUAGE') || window.navigator.
|
|||
let defaultPath = '/en-US';
|
||||
if (userLanguage.indexOf('zh-') !== -1) {
|
||||
defaultPath = '/zh-CN';
|
||||
} else if (userLanguage.indexOf('es') !== -1) {
|
||||
defaultPath = '/es';
|
||||
}
|
||||
|
||||
route = route.concat([{
|
||||
|
|
|
|||
Loading…
Reference in New Issue