Isinya sengaja setipis mungkin: sebuah ref dan empat fungsi biasa. setup() berjalan sekali, jadi keduanya sudah stabil dengan sendirinya — tidak ada yang perlu dibungkus atau dijaga identitasnya.
Nilai kiri dan kanannya dikunci sekali saat composable ini dipanggil. Yang bolak-balik adalah nilainya, bukan batas-batasnya.
Installation
pnpm dlx shadcn-vue@latest add @kliping/use-toggle Perlu @kliping terdaftar di components.json project Anda. Lihat cara menyiapkannya.
Tanpa dependensi — tidak ada berkas lain yang ikut terpasang.
Salin kode berikut ke project Anda.
ts
import { ref, toValue } from 'vue'
import type { MaybeRefOrGetter, Ref } from 'vue'
export function useToggle<D = boolean, R = boolean>(
defaultValue: MaybeRefOrGetter<D> = false as D,
reverseValue?: MaybeRefOrGetter<R>,
) {
const left = toValue(defaultValue) as D
const right = (reverseValue === undefined ? !left : toValue(reverseValue)) as R
const value = ref(left) as Ref<D | R>
const set = (next: D | R) => {
value.value = next
}
const toggle = () => {
value.value = Object.is(value.value, left) ? right : left
}
return {
value,
toggle,
set,
setLeft: () => set(left),
setRight: () => set(right),
}
}API
ts
export function useToggle<D = boolean, R = boolean>(
defaultValue: MaybeRefOrGetter<D> = false as D,
reverseValue?: MaybeRefOrGetter<R>,
)