75 lines
1.6 KiB
Vue
75 lines
1.6 KiB
Vue
<script lang="ts" setup>
|
|
import { useToggle } from '@vueuse/core'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useGlobalStore } from '@/stores/globalStore'
|
|
const globalStore = useGlobalStore()
|
|
|
|
const { menu } = storeToRefs(globalStore)
|
|
const emit = defineEmits(['change'])
|
|
const props = defineProps<{
|
|
checked?: boolean
|
|
}>()
|
|
console.log(props.checked, '饿', menu.value)
|
|
const [value, toggle] = useToggle(props.checked)
|
|
const handleToggle = () => {
|
|
toggle()
|
|
emit('change', value.value)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="singleCheckbox" @click="handleToggle">
|
|
<div v-if="!value">
|
|
<svg
|
|
fill="none"
|
|
height="15"
|
|
viewBox="0 0 15 15"
|
|
width="15"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect
|
|
fill="#D9D9D9"
|
|
height="14.5"
|
|
stroke="black"
|
|
stroke-width="0.5"
|
|
width="14.5"
|
|
x="0.25"
|
|
y="0.25"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div v-else>
|
|
<svg
|
|
fill="none"
|
|
height="15"
|
|
viewBox="0 0 18 15"
|
|
width="18"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect
|
|
fill="#D9D9D9"
|
|
height="14.5"
|
|
stroke="black"
|
|
stroke-width="0.5"
|
|
width="14.5"
|
|
x="0.25"
|
|
y="0.25"
|
|
/>
|
|
<path
|
|
d="M2.91675 5.41666L6.66675 10.8333L17.0834 0.416656"
|
|
stroke="black"
|
|
stroke-width="0.5"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.singleCheckbox {
|
|
width: 16px;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
</style>
|