mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-01 18:58:10 +08:00
feat(switch): add border color (#2933)
This commit is contained in:
Hatem Satouri
GitHub
parent
2067e6587c
commit
7fb574a161
@ -64,6 +64,7 @@ interface ISwitchProps {
|
||||
inactiveText: string
|
||||
activeColor: string
|
||||
inactiveColor: string
|
||||
borderColor: string
|
||||
activeValue: ValueType
|
||||
inactiveValue: ValueType
|
||||
name: string
|
||||
@ -116,6 +117,10 @@ export default defineComponent({
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
activeValue: {
|
||||
type: [Boolean, String, Number],
|
||||
default: true,
|
||||
@ -232,7 +237,8 @@ export default defineComponent({
|
||||
const setBackgroundColor = (): void => {
|
||||
const newColor = checked.value ? props.activeColor : props.inactiveColor
|
||||
const coreEl = core.value
|
||||
coreEl.style.borderColor = newColor
|
||||
if (props.borderColor) coreEl.style.borderColor = props.borderColor
|
||||
else if (!props.borderColor) coreEl.style.borderColor = newColor
|
||||
coreEl.style.backgroundColor = newColor
|
||||
coreEl.children[0].style.color = newColor
|
||||
}
|
||||
@ -242,7 +248,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (props.activeColor || props.inactiveColor) {
|
||||
if (props.activeColor || props.inactiveColor || props.borderColor) {
|
||||
setBackgroundColor()
|
||||
}
|
||||
|
||||
|
||||
@ -208,6 +208,7 @@ Switch is used for switching between two opposing states.
|
||||
| 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 |
|
||||
| border-color | border color of the switch | 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 | function | — | — |
|
||||
|
||||
@ -208,6 +208,7 @@ Switch es utilizado para realizar cambios entre dos estados opuestos.
|
||||
| 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 |
|
||||
| border-color | color del borde del switch. | string | — | — |
|
||||
| name | nombre de entrada del componente Switch | string | — | — |
|
||||
| validate-event | si se debe lanzar la validación de formulario | 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 | function | — | — |
|
||||
|
||||
@ -198,7 +198,7 @@ Switch est utilisé pour choisir entre deux états opposés.
|
||||
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | ----------------- | ------- |
|
||||
| model-value / v-model | Valeur liée. Elle doit être équivalente à `active-value` ou `inactive-value`, par défaut elle est de type `boolean`. | boolean / string / number | — | — |
|
||||
| disabled | Si le switch est désactivé. | boolean | — | false |
|
||||
| loading | whether Switch is in loading state | boolean | — | false |
|
||||
| loading | Si le switch est en chargement. | 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 | — | — |
|
||||
@ -208,6 +208,7 @@ Switch est utilisé pour choisir entre deux états opposés.
|
||||
| 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 |
|
||||
| border-color | Couleur de la bordure du switch. | string | — | — |
|
||||
| name | Nom du champ d'input du switch. | string | — | — |
|
||||
| validate-event | Si la validation doit avoir lieu. | boolean | — | true |
|
||||
| before-change | Le hook avant le changement d'état du commutateur. S'il renvoie false ou renvoie une promesse et est rejeté, le commutateur s'arrêtera. | function | — | — |
|
||||
|
||||
@ -208,6 +208,7 @@
|
||||
| inactive-value | `off` 状態のときのスイッチの値 | boolean / string / number | — | false |
|
||||
| active-color | `on` 状態のときの背景色 | string | — | #409EFF |
|
||||
| inactive-color | `off` 状態のときの背景色 | string | — | #C0CCDA |
|
||||
| border-color | スイッチの境界線の色 | string | — | — |
|
||||
| name | スイッチのインプット名 | string | — | — |
|
||||
| validate-event | フォームバリデーションをトリガするかどうか | boolean | — | true |
|
||||
| before-change | スイッチの状態が変化する前のフックは、false を返すか、Promise を返し、切り替えを停止するために拒否されます | function | — | — |
|
||||
|
||||
@ -201,6 +201,7 @@
|
||||
| inactive-value | switch 关闭时的值 | boolean / string / number | — | false |
|
||||
| active-color | switch 打开时的背景色 | string | — | #409EFF |
|
||||
| inactive-color | switch 关闭时的背景色 | string | — | #C0CCDA |
|
||||
| border-color | switch 边框颜色 | string | — | — |
|
||||
| name | switch 对应的 name 属性 | string | — | — |
|
||||
| validate-event | 改变 switch 状态时是否触发表单的校验 | boolean | — | true |
|
||||
| before-change | switch 状态改变前的钩子，返回 false 或者返回 Promise 且被 reject 则停止切换 | function | — | — |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user