mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-29 18:57:36 +08:00
Switch: trigger form validation if value changes (#14426)
* switch: trigger form validation if value changes * add French translation * fix doc * trigger validation in watch handler
This commit is contained in:
hetech
Zhi Cun
parent
febdd3bbb4
commit
651438eef3
@ -139,28 +139,29 @@ Switch is used for switching between two opposing states.
|
||||
|
||||
### Attributes
|
||||
|
||||
Attribute | Description | Type | Accepted Values | Default
|
||||
----| ----| ----| ----|----
|
||||
value / v-model | binding value | boolean / string / number | — | —
|
||||
disabled | whether Switch is disabled | boolean | — | false
|
||||
width | width of Switch | number | — | 40
|
||||
active-icon-class | class name of the icon displayed when in `on` state, overrides `active-text` | string | — | —
|
||||
inactive-icon-class |class name of the icon displayed when in `off` state, overrides `inactive-text`| string | — | —
|
||||
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 | background color when in `on` state | string | — | #409EFF
|
||||
inactive-color | background color when in `off` state | string | — | #C0CCDA
|
||||
name| input name of Switch | string | — | —
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|-----| ----| ----| ----|---- |
|
||||
| value / v-model | binding value | boolean / string / number | — | — |
|
||||
| disabled | whether Switch is disabled | boolean | — | false |
|
||||
| width | width of Switch | number | — | 40 |
|
||||
| active-icon-class | class name of the icon displayed when in `on` state, overrides `active-text` | string | — | — |
|
||||
| inactive-icon-class |class name of the icon displayed when in `off` state, overrides `inactive-text`| string | — | — |
|
||||
| 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 | background color when in `on` state | string | — | #409EFF |
|
||||
| inactive-color | background color when in `off` state | string | — | #C0CCDA |
|
||||
| name | input name of Switch | string | — | — |
|
||||
| validate-event | whether to trigger form validation | boolean | - | true |
|
||||
|
||||
### Events
|
||||
|
||||
Event Name | Description | Parameters
|
||||
---- | ----| ----
|
||||
change | triggers when value changes | value after changing
|
||||
| Event Name | Description | Parameters |
|
||||
| ---- | ----| ---- |
|
||||
| change | triggers when value changes | value after changing |
|
||||
|
||||
### Methods
|
||||
Method | Description | Parameters
|
||||
------|--------|-------
|
||||
focus | focus the Switch component | —
|
||||
| Method | Description | Parameters |
|
||||
| ------|--------|------- |
|
||||
| focus | focus the Switch component | — |
|
||||
|
||||
@ -154,6 +154,7 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
|
||||
| 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 | — | — |
|
||||
| validate-event | si se debe lanzar la validación de formulario | boolean | - | true |
|
||||
|
||||
### Eventos
|
||||
|
||||
|
||||
@ -141,29 +141,30 @@ Switch est utilisé pour choisir entre deux états opposés.
|
||||
|
||||
### Attributs
|
||||
|
||||
Attribut | Description | Type | Valeurs acceptées | Défaut
|
||||
----| ----| ----| ----|----
|
||||
value / v-model | La valeur liée. | boolean / string / number | — | —
|
||||
disabled | Si le switch est désactivé. | boolean | — | false
|
||||
width | Largeur du switch. | number | — | 40
|
||||
active-icon-class | Classe de l'icône de l'état `on`, écrase `active-text`. | string | — | —
|
||||
inactive-icon-class | Classe de l'icône de l'état `off`, écrase `inactive-text`. | string | — | —
|
||||
active-text | Texte affiché dans l'état `on`. | string | — | —
|
||||
inactive-text | Texte affiché dans l'état `off`. | string | — | —
|
||||
active-value | Valeur du switch dans l'état `on`. | boolean / string / number | — | true
|
||||
inactive-value | Valeur du switch dans l'état `off`. | boolean / string / number | — | false
|
||||
active-color | Couleur de fond de l'état `on`. | string | — | #409EFF
|
||||
inactive-color | Couleur de fond de l'état `off`. | string | — | #C0CCDA
|
||||
name| Nom du champ d'input du switch. | string | — | —
|
||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||
| ----| ----| ----| ----|---- |
|
||||
| value / v-model | La valeur liée. | boolean / string / number | — | — |
|
||||
| disabled | Si le switch est désactivé. | boolean | — | false |
|
||||
| width | Largeur du switch. | number | — | 40 |
|
||||
| active-icon-class | Classe de l'icône de l'état `on`, écrase `active-text`. | string | — | — |
|
||||
| inactive-icon-class | Classe de l'icône de l'état `off`, écrase `inactive-text`. | string | — | — |
|
||||
| active-text | Texte affiché dans l'état `on`. | string | — | — |
|
||||
| inactive-text | Texte affiché dans l'état `off`. | string | — | — |
|
||||
| active-value | Valeur du switch dans l'état `on`. | boolean / string / number | — | true |
|
||||
| inactive-value | Valeur du switch dans l'état `off`. | boolean / string / number | — | false |
|
||||
| active-color | Couleur de fond de l'état `on`. | string | — | #409EFF |
|
||||
| inactive-color | Couleur de fond de l'état `off`. | string | — | #C0CCDA |
|
||||
| name| Nom du champ d'input du switch. | string | — | — |
|
||||
| validate-event | Si la validation doit avoir lieu. | boolean | - | true |
|
||||
|
||||
### Évènements
|
||||
|
||||
Nom | Description | Paramètres
|
||||
---- | ----| ----
|
||||
change | Se déclenche quand la valeur change. | La valeur après changement.
|
||||
| Nom | Description | Paramètres |
|
||||
| ---- | ----| ---- |
|
||||
| change | Se déclenche quand la valeur change. | La valeur après changement. |
|
||||
|
||||
### Méthodes
|
||||
|
||||
Méthode | Description | Paramètres
|
||||
------|--------|-------
|
||||
focus | Donne le focus au switch. | —
|
||||
| Méthode | Description | Paramètres |
|
||||
|-------|--------|------- |
|
||||
| focus | Donne le focus au switch. | — |
|
||||
|
||||
@ -153,7 +153,8 @@
|
||||
| inactive-value | switch 关闭时的值 | boolean / string / number | — | false |
|
||||
| active-color | switch 打开时的背景色 | string | — | #409EFF |
|
||||
| inactive-color | switch 关闭时的背景色 | string | — | #C0CCDA |
|
||||
| name | switch 对应的 name 属性 | string | — | — |
|
||||
| name | switch 对应的 name 属性 | string | — | — |
|
||||
| validate-event | 改变 switch 状态时是否触发表单的校验 | boolean | - | true |
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|
||||
@ -36,12 +36,13 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import emitter from 'element-ui/src/mixins/emitter';
|
||||
import Focus from 'element-ui/src/mixins/focus';
|
||||
import Migrating from 'element-ui/src/mixins/migrating';
|
||||
|
||||
export default {
|
||||
name: 'ElSwitch',
|
||||
mixins: [Focus('input'), Migrating],
|
||||
mixins: [Focus('input'), Migrating, emitter],
|
||||
inject: {
|
||||
elForm: {
|
||||
default: ''
|
||||
@ -90,6 +91,10 @@
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
validateEvent: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
id: String
|
||||
},
|
||||
data() {
|
||||
@ -116,12 +121,16 @@
|
||||
if (this.activeColor || this.inactiveColor) {
|
||||
this.setBackgroundColor();
|
||||
}
|
||||
if (this.validateEvent) {
|
||||
this.dispatch('ElFormItem', 'el.form.change', [this.value]);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(event) {
|
||||
this.$emit('input', !this.checked ? this.activeValue : this.inactiveValue);
|
||||
this.$emit('change', !this.checked ? this.activeValue : this.inactiveValue);
|
||||
const val = this.checked ? this.inactiveValue : this.activeValue;
|
||||
this.$emit('input', val);
|
||||
this.$emit('change', val);
|
||||
this.$nextTick(() => {
|
||||
// set input's checked property
|
||||
// in case parent refuses to change component's value
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
text-align: justify;
|
||||
font-size: $--popover-font-size;
|
||||
box-shadow: $--box-shadow-light;
|
||||
word-break: break-all;
|
||||
|
||||
@include m(plain) {
|
||||
padding: $--popover-padding-large;
|
||||
|
||||
3
types/switch.d.ts
vendored
3
types/switch.d.ts
vendored
@ -37,4 +37,7 @@ export declare class ElSwitch extends ElementUIComponent {
|
||||
|
||||
/** Input name of Switch */
|
||||
name: string
|
||||
|
||||
/** Whether to trigger form validation */
|
||||
validateEvent: boolean
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user