refactor: StatusSwitch使用defineModel
This commit is contained in:
parent
a7752db587
commit
526ffd1f4d
@ -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"
|
||||||
|
Loading…
Reference in New Issue
Block a user