refactor: StatusSwitch使用defineModel

This commit is contained in:
dhb52 2024-05-05 00:36:03 +08:00
parent a7752db587
commit 526ffd1f4d

View File

@ -1,17 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from 'vue'; import { ref } from 'vue';
defineOptions({ defineOptions({
name: 'StatusSwitch' name: 'StatusSwitch'
}); });
interface Props { const modelValue = defineModel<Api.Common.EnableStatusNumber>('value', { default: 0 });
value?: Api.Common.EnableStatusNumber;
}
const props = withDefaults(defineProps<Props>(), {
value: 0
});
interface Emits { interface Emits {
(e: 'fetch', value: Api.Common.EnableStatusNumber, callback: () => void): void; (e: 'fetch', value: Api.Common.EnableStatusNumber, callback: () => void): void;
@ -19,16 +13,9 @@ interface Emits {
const emit = defineEmits<Emits>(); const emit = defineEmits<Emits>();
const active = ref(props.value); /** 状态切换过程的 loading 状态 */
const loading = ref(false); const loading = ref(false);
watch(
() => props.value,
value => {
active.value = value;
}
);
const handleUpdateValue = (value: Api.Common.EnableStatusNumber) => { const handleUpdateValue = (value: Api.Common.EnableStatusNumber) => {
loading.value = true; loading.value = true;
emit('fetch', value, () => { emit('fetch', value, () => {
@ -39,7 +26,7 @@ const handleUpdateValue = (value: Api.Common.EnableStatusNumber) => {
<template> <template>
<NSwitch <NSwitch
:value="active" :value="modelValue"
:loading="loading" :loading="loading"
:rubber-band="false" :rubber-band="false"
:checked-value="1" :checked-value="1"