67 lines
1.1 KiB
Vue
67 lines
1.1 KiB
Vue
<template>
|
|
<div
|
|
:class="page.checked ? 'checked' : 'unchecked'"
|
|
@pointerdown="onHover"
|
|
@pointerenter="onHover"
|
|
@click="click"
|
|
>
|
|
{{ props.interval }}
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, reactive } from "vue";
|
|
|
|
const props = defineProps<{
|
|
interval: string;
|
|
add: Function;
|
|
remove: Function;
|
|
checked?: boolean;
|
|
}>();
|
|
|
|
const page = reactive<{
|
|
checked: boolean;
|
|
}>({
|
|
checked: false,
|
|
});
|
|
|
|
onMounted(() => {
|
|
if (props.checked) {
|
|
change();
|
|
}
|
|
});
|
|
|
|
function onHover(payload: PointerEvent) {
|
|
if (payload.buttons && payload.pointerType !== "touch") {
|
|
change();
|
|
}
|
|
}
|
|
|
|
function click(payload: MouseEvent) {
|
|
const pointerPayload = payload as PointerEvent;
|
|
if (pointerPayload.pointerType === "mouse") {
|
|
return;
|
|
}
|
|
change();
|
|
}
|
|
|
|
function change() {
|
|
page.checked = !page.checked;
|
|
if (page.checked) {
|
|
props.add(props.interval);
|
|
} else {
|
|
props.remove(props.interval);
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.checked {
|
|
background-color: #bae7ff;
|
|
user-select: none;
|
|
}
|
|
.unchecked {
|
|
background-color: white;
|
|
user-select: none;
|
|
}
|
|
</style>
|