Last active
May 14, 2024 19:32
-
-
Save Kcko/3776fec64144548d070da2d1cf77e51d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- MouseTracker.vue --> | |
<script setup> | |
import { ref, onMounted, onUnmounted } from 'vue' | |
const x = ref(0) | |
const y = ref(0) | |
const update = e => { | |
x.value = e.pageX | |
y.value = e.pageY | |
} | |
onMounted(() => window.addEventListener('mousemove', update)) | |
onUnmounted(() => window.removeEventListener('mousemove', update)) | |
</script> | |
<template> | |
<slot :x="x" :y="y"/> | |
</template> | |
<!-- Usage: --> | |
<template> | |
<MouseTracker v-slot="{ x, y }"> | |
Mouse is at: {{ x }}, {{ y }} | |
</MouseTracker> | |
</template> | |
<!-- 1) composable --> | |
<script setup> | |
import { ref } from "vue"; | |
const checkbox = ref(false); | |
const toggleCheckbox = () => { | |
checkbox.value = !checkbox.value; | |
}; | |
</script> | |
<!--1) Usage in component --> | |
<template> | |
<div class="comp"> | |
<label class="switch"> | |
<input type="checkbox" :value="checkbox" @click="toggleCheckbox" /> | |
<div class="slider rounded" :class="checkbox ? 'active' : ''"></div> | |
</label> | |
</div> | |
</template> | |
<script setup> | |
import { useCheckboxToggle } from "./composables/useCheckboxToggle"; | |
const { checkbox, toggleCheckbox } = useCheckboxToggle(); | |
</script> | |
<!-- 2) instead composable we can use renderless component --> | |
<template> | |
<slot :checkbox="checkbox" :toggleCheckbox="toggleCheckbox"></slot> | |
</template> | |
<script setup> | |
import { ref } from "vue"; | |
const checkbox = ref(false); | |
const toggleCheckbox = () => { | |
checkbox.value = !checkbox.value; | |
}; | |
</script> | |
<!--2) many different usage, depends on us and styles --> | |
<template> | |
<slot :checkbox="checkbox" :toggleCheckbox="toggleCheckbox"></slot> | |
</template> | |
<script setup> | |
import { ref } from "vue"; | |
const checkbox = ref(false); | |
const toggleCheckbox = () => { | |
checkbox.value = !checkbox.value; | |
}; | |
</script> | |
<!-- useFetch --> | |
// fetch.js | |
import { ref, watchEffect, toValue } from 'vue' | |
export function useFetch(url) { | |
const data = ref(null) | |
const error = ref(null) | |
const fetchData = () => { | |
// reset state before fetching.. | |
data.value = null | |
error.value = null | |
fetch(toValue(url)) | |
.then((res) => res.json()) | |
.then((json) => (data.value = json)) | |
.catch((err) => (error.value = err)) | |
} | |
watchEffect(() => { | |
fetchData() | |
}) | |
return { data, error } | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment