| <script lang="ts"> | |
| export default { | |
| props: { | |
| modelValue: { | |
| type: Boolean, | |
| required: true, | |
| }, | |
| }, | |
| computed: { | |
| state: { | |
| get() { | |
| return this.modelValue; | |
| }, | |
| set(value: boolean) { | |
| this.$emit('update:modelValue', value); | |
| }, | |
| }, | |
| }, | |
| methods: { | |
| toggleState() { | |
| this.state = !this.state; | |
| }, | |
| }, | |
| }; | |
| </script> | |
| <template> | |
| <div @click.stop="toggleState" class="icon-switch"> | |
| <slot name="enable-state" v-if="state"></slot> | |
| <slot name="disable-state" v-else></slot> | |
| </div> | |
| </template> | |
| <style scoped> | |
| .icon-switch { | |
| cursor: pointer; | |
| } | |
| </style> |