fix indeterminate state animation
This commit is contained in:
parent
6b0d72937e
commit
99f85069b8
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<label
|
||||
class="checkbox"
|
||||
:class="{ disabled, indeterminate }"
|
||||
:class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
@ -14,6 +14,7 @@
|
||||
<i
|
||||
class="checkbox-indicator"
|
||||
:aria-hidden="true"
|
||||
@transitionend.capture="onTransitionEnd"
|
||||
/>
|
||||
<span
|
||||
v-if="!!$slots.default"
|
||||
@ -31,7 +32,22 @@ export default {
|
||||
'indeterminate',
|
||||
'disabled'
|
||||
],
|
||||
emits: ['update:modelValue']
|
||||
emits: ['update:modelValue'],
|
||||
data: () => ({
|
||||
indeterminateTransitionFix: false
|
||||
}),
|
||||
watch: {
|
||||
indeterminate (e) {
|
||||
if (e) {
|
||||
this.indeterminateTransitionFix = true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onTransitionEnd (e) {
|
||||
this.indeterminateTransitionFix = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -98,6 +114,12 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
&.indeterminate-fix {
|
||||
input[type="checkbox"] + .checkbox-indicator::before {
|
||||
content: "–";
|
||||
}
|
||||
}
|
||||
|
||||
& > span {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user