<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> |