test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-11-29 18:57:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Switch: trigger form validation if value changes (#14426)

Browse Source 
* switch: trigger form validation if value changes

* add French translation

* fix doc

* trigger validation in watch handler
This commit is contained in:
hetech 2019-02-28 16:07:25 +08:00 committed by Zhi Cun
parent febdd3bbb4
commit 651438eef3
7 changed files with 61 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
examples/docs/en-US/switch.md
View File

@ -139,28 +139,29 @@ Switch is used for switching between two opposing states.
### Attributes ### Attributes
Attribute | Description | Type | Accepted Values | Default | Attribute | Description | Type | Accepted Values | Default |
----| ----| ----| ----|---- |-----| ----| ----| ----|---- |
value / v-model | binding value | boolean / string / number | — | — | value / v-model | binding value | boolean / string / number | — | — |
disabled | whether Switch is disabled | boolean | — | false | disabled | whether Switch is disabled | boolean | — | false |
width | width of Switch | number | — | 40 | width | width of Switch | number | — | 40 |
active-icon-class | class name of the icon displayed when in `on` state, overrides `active-text` | string | — | — | 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 | — | — | 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 | — | — | active-text | text displayed when in `on` state | string | — | — |
inactive-text | text displayed when in `off` state | string | — | — | inactive-text | text displayed when in `off` state | string | — | — |
active-value | switch value when in `on` state | boolean / string / number | — | true | active-value | switch value when in `on` state | boolean / string / number | — | true |
inactive-value | switch value when in `off` state | boolean / string / number | — | false | inactive-value | switch value when in `off` state | boolean / string / number | — | false |
active-color | background color when in `on` state | string | — | #409EFF | active-color | background color when in `on` state | string | — | #409EFF |
inactive-color | background color when in `off` state | string | — | #C0CCDA | inactive-color | background color when in `off` state | string | — | #C0CCDA |
name| input name of Switch | string | — | — | name | input name of Switch | string | — | — |
| validate-event | whether to trigger form validation | boolean | - | true |
### Events ### Events
Event Name | Description | Parameters | Event Name | Description | Parameters |
---- | ----| ---- | ---- | ----| ---- |
change | triggers when value changes | value after changing | change | triggers when value changes | value after changing |
### Methods ### Methods
Method | Description | Parameters | Method | Description | Parameters |
------|--------|------- | ------|--------|------- |
focus | focus the Switch component | — | focus | focus the Switch component | — |

1
examples/docs/es/switch.md
View File

@ -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 | | 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 | | inactive-color | color de fondo cuando se encuentra en el estado `off` | string | — | #C0CCDA |
| name | nombre de entrada del componente Switch | string | — | — | | name | nombre de entrada del componente Switch | string | — | — |
| validate-event | si se debe lanzar la validación de formulario | boolean | - | true |
### Eventos ### Eventos

41
examples/docs/fr-FR/switch.md
View File

@ -141,29 +141,30 @@ Switch est utilisé pour choisir entre deux états opposés.
### Attributs ### Attributs
Attribut | Description | Type | Valeurs acceptées | Défaut | Attribut | Description | Type | Valeurs acceptées | Défaut |
----| ----| ----| ----|---- | ----| ----| ----| ----|---- |
value / v-model | La valeur liée. | boolean / string / number | — | — | value / v-model | La valeur liée. | boolean / string / number | — | — |
disabled | Si le switch est désactivé. | boolean | — | false | disabled | Si le switch est désactivé. | boolean | — | false |
width | Largeur du switch. | number | — | 40 | width | Largeur du switch. | number | — | 40 |
active-icon-class | Classe de l'icône de l'état `on`, écrase `active-text`. | string | — | — | 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 | — | — | 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 | — | — | active-text | Texte affiché dans l'état `on`. | string | — | — |
inactive-text | Texte affiché dans l'état `off`. | string | — | — | inactive-text | Texte affiché dans l'état `off`. | string | — | — |
active-value | Valeur du switch dans l'état `on`. | boolean / string / number | — | true | 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 | inactive-value | Valeur du switch dans l'état `off`. | boolean / string / number | — | false |
active-color | Couleur de fond de l'état `on`. | string | — | #409EFF | active-color | Couleur de fond de l'état `on`. | string | — | #409EFF |
inactive-color | Couleur de fond de l'état `off`. | string | — | #C0CCDA | inactive-color | Couleur de fond de l'état `off`. | string | — | #C0CCDA |
name| Nom du champ d'input du switch. | string | — | — | name| Nom du champ d'input du switch. | string | — | — |
| validate-event | Si la validation doit avoir lieu. | boolean | - | true |
### Évènements ### Évènements
Nom | Description | Paramètres | Nom | Description | Paramètres |
---- | ----| ---- | ---- | ----| ---- |
change | Se déclenche quand la valeur change. | La valeur après changement. | change | Se déclenche quand la valeur change. | La valeur après changement. |
### Méthodes ### Méthodes
Méthode | Description | Paramètres | Méthode | Description | Paramètres |
------|--------|------- |-------|--------|------- |
focus | Donne le focus au switch. | — | focus | Donne le focus au switch. | — |

3
examples/docs/zh-CN/switch.md
View File

@ -153,7 +153,8 @@
| inactive-value | switch 关闭时的值 | boolean / string / number | — | false | | inactive-value | switch 关闭时的值 | boolean / string / number | — | false |
| active-color | switch 打开时的背景色 | string | — | #409EFF | | active-color | switch 打开时的背景色 | string | — | #409EFF |
| inactive-color | switch 关闭时的背景色 | string | — | #C0CCDA | | inactive-color | switch 关闭时的背景色 | string | — | #C0CCDA |
| name | switch 对应的 name 属性 | string | — | — | | name | switch 对应的 name 属性 | string | — | — |
| validate-event | 改变 switch 状态时是否触发表单的校验 | boolean | - | true |
### Events ### Events
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |

15
packages/switch/src/component.vue
View File

@ -36,12 +36,13 @@
</div> </div>
</template> </template>
<script> <script>
import emitter from 'element-ui/src/mixins/emitter';
import Focus from 'element-ui/src/mixins/focus'; import Focus from 'element-ui/src/mixins/focus';
import Migrating from 'element-ui/src/mixins/migrating'; import Migrating from 'element-ui/src/mixins/migrating';
export default { export default {
name: 'ElSwitch', name: 'ElSwitch',
mixins: [Focus('input'), Migrating], mixins: [Focus('input'), Migrating, emitter],
inject: { inject: {
elForm: { elForm: {
default: '' default: ''
@ -90,6 +91,10 @@
type: String, type: String,
default: '' default: ''
}, },
validateEvent: {
type: Boolean,
default: true
},
id: String id: String
}, },
data() { data() {
@ -116,12 +121,16 @@
if (this.activeColor || this.inactiveColor) { if (this.activeColor || this.inactiveColor) {
this.setBackgroundColor(); this.setBackgroundColor();
} }
if (this.validateEvent) {
this.dispatch('ElFormItem', 'el.form.change', [this.value]);
}
} }
}, },
methods: { methods: {
handleChange(event) { handleChange(event) {
this.$emit('input', !this.checked ? this.activeValue : this.inactiveValue); const val = this.checked ? this.inactiveValue : this.activeValue;
this.$emit('change', !this.checked ? this.activeValue : this.inactiveValue); this.$emit('input', val);
this.$emit('change', val);
this.$nextTick(() => { this.$nextTick(() => {
// set input's checked property // set input's checked property
// in case parent refuses to change component's value // in case parent refuses to change component's value

1
packages/theme-chalk/src/popover.scss
View File

@ -15,6 +15,7 @@
text-align: justify; text-align: justify;
font-size: $--popover-font-size; font-size: $--popover-font-size;
box-shadow: $--box-shadow-light; box-shadow: $--box-shadow-light;
word-break: break-all;
@include m(plain) { @include m(plain) {
padding: $--popover-padding-large; padding: $--popover-padding-large;

3
types/switch.d.ts vendored
View File

@ -37,4 +37,7 @@ export declare class ElSwitch extends ElementUIComponent {
/** Input name of Switch */ /** Input name of Switch */
name: string name: string
/** Whether to trigger form validation */
validateEvent: boolean
} }