Switch
Switch es utilizado para realizar cambios entre dos estados opuestos.
Uso básico
Tamaños
Texto de descripción
Puede añadir active-text y inactive-text para mostrar textos. usar el atributo inline-prompt para controlar si el texto se muestra dentro del punto.
Mostrar iconos personalizados
TIP
Utilice el atributo active-icon y inactive-icon para añadir iconos. Puede pasarle ya sea el nombre del componente (registrado de antemano) o el propio componente que es un componente SVG Vue. Element Plus ha proporcionado un conjunto de iconos que puedes encontrar en icono
Tipos de valores extendidos
Deshabilitado
Cargando
Prevenir interruptores
custom action icon 2.3.9
custom action slot 2.4.4
API
Attributes
| Name | Descripción | Tipo | Default |
|---|---|---|---|
| model-value / v-model | valor vinculante, debe ser equivalente al active-value o al inactive-value. El tipo por defecto es el tipo boolean. | boolean / string / number | false |
| disabled | si Switch esta deshabilitado | boolean | false |
| loading | si el interruptor está en estado de carga | boolean | false |
| size | tamaño del interruptor | enum | '' |
| width | ancho del componente Switch | number / string | '' |
| inline-prompt | si el icono o el texto se muestran dentro de un punto, sólo el primer carácter será renderizado para el texto | boolean | false |
| active-icon | componente del icono que se muestra en on, anula active-text | string / Component | — |
| inactive-icon | componente del icono que se muestra cuando está en off, anula inactive-text | string / Component | — |
| active-action-icon 2.3.9 | component of the icon displayed in action when in on state | string / Component | — |
| inactive-action-icon 2.3.9 | component of the icon displayed in action when in off state | string / Component | — |
| active-text | text displayed when in on state | string | '' |
| inactive-text | text displayed when in off state | string | '' |
| active-value | switch value when in on state | boolean / string / number | true |
| inactive-value | switch value when in off state | boolean / string / number | false |
| active-color deprecated | background color when in on state ( deprecated, use CSS var --el-switch-on-color instead ) | string | '' |
| inactive-color deprecated | background color when in off state ( deprecated, use CSS var --el-switch-off-color instead ) | string | '' |
| border-color deprecated | border color of the switch ( deprecated, use CSS var --el-switch-border-color instead ) | string | '' |
| name | input name of Switch | string | '' |
| validate-event | whether to trigger form validation | boolean | true |
| before-change | before-change hook before the switch state changes. If false is returned or a Promise is returned and then is rejected, will stop switching | boolean / Function | — |
| id | id for input | string | — |
| tabindex | tabindex for input | string / number | — |
| label a11y deprecated | same as aria-label in native input | string | — |
| aria-label a11y 2.7.2 | same as aria-label in native input | string | — |
Events
| Name | Descripción | Type |
|---|---|---|
| change | se dispara cuando el valor cambia | Function |
Switch Slots
| Name | Descripción |
|---|---|
| active-action 2.4.4 | customize active action |
| inactive-action 2.4.4 | customize inactive action |
Exposes
| Método | Description | Type |
|---|---|---|
| focus | manual focus to the switch component | Function |
三咲智子
云游君
Jeremy
kooriookami
Aex
zz
LIUCHAO
Delyan Haralanov
btea
Xc
啝裳
C.Y.Kun
星如雨
Karolis_Stoncius_Sneakybox
wzc520pyfm
Simon He
Carter Li
류한경
opengraphica
joson
Herrington Darkholme
Alan Wang
deepthan
Sleepy Five
on the field of hope
Weiqi Wu
zazzaz
Ther-su
Hades-li
sea
qiang
0song