Button
Botones comúnmente usados.
Uso básico
Botón deshabilitado
El atributo disabled determina si un botón está deshabilitado.
Botón de enlace
WARNING
type="text" ha sido descontinuado y será eliminado en 3.0.0, considere cambiar a la nueva API.
Una nueva API del link ha sido añadido en 2.2.1, puede usar type para establecer el tema de su botón de enlace
Botón de texto
TIP
El botón de texto ha sido actualizado con un nuevo diseño desde 2.2.0 , si quiere usar el botón como en la versión anterior, tal vez quiera revisar Link.
La API también se actualizó, porque el atributo type también representa el estilo del botón. Así que tenemos que crear una nueva API text: boolean para el botón de texto.
Botones sin borde ni fondo.
Botón de icono
Use iconos para añadir más significado al botón. Se puede usar simplemente un icono o un icono con texto.
Grupo de botones
Mostrar un grupo de botones puede ser usado para mostrar un grupo de operaciones similares.
Botón de carga
Cuando se hace clic en un botón para descargar datos, el botón muestra un estado de carga.
Ajuste el atributo loading a true para mostrar el estado de carga.
TIP
Puede utilizar el slot loading o loadingIcon para personalizar el componente de carga
ps: el slot loading tiene mayor prioridad que loadingIcon
Tamaños
Además del tamaño predeterminado, el componente Button proporciona dos tamaños adicionales para que usted elija entre diferentes escenarios.
Etiqueta 2.3.4
Puede personalizar la etiqueta del elemento, Por ejemplo, botón, div, a, router-link, nuxt-link.
Color personalizado beta
Puede personalizar el color del botón.
Calcularemos automáticamente el color del hover & del activo.
API del Botón
Atributos del botón
| Nombre | Descripción | Tipo | Por defecto |
|---|---|---|---|
| size | tamaño del botón | enum | — |
| type | tipo de botón | enum | — |
| plain | determina si es un botón plano | boolean | false |
| text 2.2.0 | determinar si es un botón de texto | boolean | false |
| bg 2.2.0 | determinar si el color de fondo del botón de texto está siempre encendido | boolean | false |
| link 2.2.1 | determinar si es un botón de enlace | boolean | false |
| round | determinar si es un botón redondo | boolean | false |
| circle | determina si es un botón circular | boolean | false |
| loading | determina si está cargando | boolean | false |
| loading-icon | personalizar el componente de icono de carga | string / Component | Loading |
| disabled | desactiva el botón | boolean | false |
| icon | componente de icono | string / Component | — |
| autofocus | igual que en el botón nativo autofocus | boolean | false |
| native-type | igual que en el botón nativo type | enum | button |
| auto-insert-space | inserta automáticamente un espacio entre dos caracteres chinos | boolean | — |
| color | color de botón personalizado, calcula automáticamente los colores de hover y active | string | — |
| dark | modo oscuro, que convierte automáticamente color a colores oscuros | boolean | false |
| tag 2.3.4 | etiqueta de elemento personalizada | string / Component | button |
Slots del botón
| Nombre | Descripción |
|---|---|
| default | personaliza el contenido por defecto |
| loading | personaliza componente de carga |
| icon | personaliza el componente de icono |
Exposiciones del botón
| Nombre | Descripción | Tipo |
|---|---|---|
| ref | elemento html del botón | object |
| size | tamaño del botón | object |
| type | button type | object |
| disabled | botón deshabilitado | object |
| shouldAddSpace | si agrega espacio | object |
API de ButtonGroup
Atributos del ButtonGroup
| Nombre | Descripción | Tipo | Por defecto |
|---|---|---|---|
| size | controla el tamaño de los botones en este grupo de botones | enum | — |
| type | controlar el tipo de botones en este grupo de botones | enum | — |
Slots del ButtonGroup
| Nombre | Descripción | Subetiquetas |
|---|---|---|
| default | personaliza el contenido del grupo de botones | Button |
云游君
三咲智子
Jeremy
Xc
qiang
btea
zz
msidolphin
C.Y.Kun
Delyan Haralanov
神楽坂みずき
Aex
啝裳
Ryan2128
wzc520pyfm
sleepyShen1989
Hill
Fl
류한경
0song
Herrington Darkholme
Alan Wang
blackie
iamkun
一只前端汪
cuongle-hdwebsoft
Vincent Guo
Map1en_
on the field of hope
Hades-li
sea
愧怍
muhammadcahya
刘小灰