Memulai
Siklus Hidup
Peramban
Pengembangan
Paket Luar
useToggle
Membalik sebuah nilai bolak-balik antara dua kemungkinan.
Nilai: terang
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.
Pemasangan
npx 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 kiri = toValue(defaultValue) as D
const kanan = (
reverseValue === undefined ? !kiri : toValue(reverseValue)
) as R
const value = ref(kiri) as Ref<D | R>
const set = (nilai: D | R) => {
value.value = nilai
}
// `Object.is`, bukan `===`. Bedanya cuma terasa di `NaN` dan `-0`, tapi
// keduanya nilai yang sah untuk dibolak-balik, dan `===` diam-diam membuat
// toggle berhenti bekerja di sana.
const toggle = () => {
value.value = Object.is(value.value, kiri) ? kanan : kiri
}
return {
value,
toggle,
set,
setLeft: () => set(kiri),
setRight: () => set(kanan),
}
}API
ts
export function useToggle<D = boolean, R = boolean>(
defaultValue: MaybeRefOrGetter<D> = false as D,
reverseValue?: MaybeRefOrGetter<R>,
)