use define model
This commit is contained in:
@@ -1,24 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core';
|
||||
|
||||
interface Props {
|
||||
modelValue?: boolean;
|
||||
}
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: boolean): void;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: false
|
||||
});
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const value = useVModel(props, 'modelValue', emit);
|
||||
const modelValue = defineModel({ default: false });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<label class="flex items-center relative w-max cursor-pointer select-none">
|
||||
<input type="checkbox" class="appearance-none transition-colors cursor-pointer w-14 h-7 rounded-full" v-model="value" />
|
||||
<input type="checkbox" class="appearance-none transition-colors cursor-pointer w-14 h-7 rounded-full" v-model="modelValue" />
|
||||
<span class="absolute font-medium text-xs right-1"> Buy </span>
|
||||
<span class="absolute font-medium text-xs right-8"> Sell </span>
|
||||
<span class="w-7 h-7 right-7 absolute rounded-full transform transition-transform bg-slate-100" />
|
||||
|
||||
Reference in New Issue
Block a user