54 lines
1.1 KiB
Vue
54 lines
1.1 KiB
Vue
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import { featureEnableBlock } from "@/utils/storage"
|
|
|
|
const isEnabled = ref(false)
|
|
let unwatchStorage: (() => void | undefined)
|
|
|
|
onMounted(async() => {
|
|
isEnabled.value = await featureEnableBlock.getValue()
|
|
|
|
unwatchStorage = featureEnableBlock.watch((newValue) => {
|
|
if (newValue !== isEnabled.value) {
|
|
isEnabled.value = newValue
|
|
}
|
|
})
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (unwatchStorage) unwatchStorage();
|
|
})
|
|
|
|
watch(isEnabled, async (newValue) => {
|
|
await featureEnableBlock.setValue(newValue)
|
|
})
|
|
|
|
const toggleOnOff = () => {
|
|
isEnabled.value = !isEnabled.value
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<button @click="toggleOnOff" class="button-toggle">
|
|
<img src="/icon/128.png" class="logo" :class="{ 'logo-on': isEnabled }" alt="let me focus logo" />
|
|
</button>
|
|
<br/>
|
|
{{ isEnabled ? '[on]' : '[off]' }}
|
|
</template>
|
|
|
|
<style scoped>
|
|
.button-toggle {
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
background: none;
|
|
}
|
|
.button-toggle .logo {
|
|
width: 80%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button-toggle .logo-on {
|
|
filter: drop-shadow(0 0 1em #ffffff);
|
|
}
|
|
</style>
|