用 defineModel 重构部分组件

src/components/ImageUpload/index.vue

@@ -12,7 +12,6 @@ const props = withDefaults(
     headers?: UploadProps['headers']
     data?: UploadProps['data']
     name?: UploadProps['name']
-    url?: string
     size?: number
     width?: number
     height?: number
@@ -22,7 +21,6 @@ const props = withDefaults(
   }>(),
   {
     name: 'file',
-    url: '',
     size: 2,
     width: 150,
     height: 150,
@@ -33,14 +31,15 @@ const props = withDefaults(
 )
 
 const emits = defineEmits<{
-  'update:url': [
-    url: string,
-  ]
   'onSuccess': [
     res: any,
   ]
 }>()
 
+const url = defineModel<string>({
+  default: '',
+})
+
 const uploadData = ref({
   imageViewerVisible: false,
   progress: {
@@ -59,7 +58,7 @@ function previewClose() {
 }
 // 移除
 function remove() {
-  emits('update:url', '')
+  url.value = ''
 }
 const beforeUpload: UploadProps['beforeUpload'] = (file) => {
   const fileName = file.name.split('.')

src/components/ImagesUpload/index.vue

@@ -12,7 +12,6 @@ const props = withDefaults(
     headers?: UploadProps['headers']
     data?: UploadProps['data']
     name?: UploadProps['name']
-    url?: string[]
     size?: number
     max?: number
     width?: number
@@ -23,7 +22,6 @@ const props = withDefaults(
   }>(),
   {
     name: 'file',
-    url: () => [],
     size: 2,
     max: 3,
     width: 150,
@@ -35,14 +33,15 @@ const props = withDefaults(
 )
 
 const emits = defineEmits<{
-  'update:url': [
-    url: string[],
-  ]
   'onSuccess': [
     res: any,
   ]
 }>()
 
+const url = defineModel<string[]>({
+  default: [],
+})
+
 const uploadData = ref({
   dialogImageIndex: 0,
   imageViewerVisible: false,
@@ -63,20 +62,16 @@ function previewClose() {
 }
 // 移除
 function remove(index: number) {
-  const url = props.url
-  url.splice(index, 1)
-  emits('update:url', url)
+  url.value.splice(index, 1)
 }
 // 移动
 function move(index: number, type: 'left' | 'right') {
-  const url = props.url
   if (type === 'left' && index !== 0) {
-    url[index] = url.splice(index - 1, 1, url[index])[0]
+    url.value[index] = url.value.splice(index - 1, 1, url.value[index])[0]
   }
-  if (type === 'right' && index !== url.length - 1) {
-    url[index] = url.splice(index + 1, 1, url[index])[0]
+  if (type === 'right' && index !== url.value.length - 1) {
+    url.value[index] = url.value.splice(index + 1, 1, url.value[index])[0]
   }
-  emits('update:url', url)
 }
 
 const beforeUpload: UploadProps['beforeUpload'] = (file) => {

src/components/PcasCascader/index.vue

@@ -8,10 +8,6 @@ defineOptions({
 
 const props = withDefaults(
   defineProps<{
-    modelValue: string[] | {
-      code: string
-      name: string
-    }[]
     disabled?: boolean
     type?: 'pc' | 'pca' | 'pcas'
     format?: 'code' | 'name' | 'both'
@@ -23,14 +19,12 @@ const props = withDefaults(
   },
 )
 
-const emits = defineEmits<{
-  'update:modelValue': [
-    value: string[] | {
-      code: string
-      name: string
-    }[],
-  ]
-}>()
+const value = defineModel<string[] | {
+  code: string
+  name: string
+}[]>({
+  default: [],
+})
 
 interface pcasItem {
   code: string
@@ -88,11 +82,11 @@ const pcasData = computed(() => {
 const myValue = computed({
   // 将入参数据转成 code 码
   get: () => {
-    return anyToCode(props.modelValue)
+    return anyToCode(value.value)
   },
   // 将 code 码转成出参数据
-  set: (value) => {
-    emits('update:modelValue', value ? codeToAny(value) : [])
+  set: (val) => {
+    value.value = val ? codeToAny(val) : []
   },
 })
 

src/components/SearchBar/index.vue

@@ -3,38 +3,30 @@ defineOptions({
   name: 'SearchBar',
 })
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
-    fold?: boolean
     showToggle?: boolean
     background?: boolean
   }>(),
   {
-    fold: true,
     showToggle: true,
     background: false,
   },
 )
 
 const emits = defineEmits<{
-  'update:fold': [
-    value: boolean,
-  ]
   'toggle': [
     value: boolean,
   ]
 }>()
 
-const isFold = ref(props.fold)
-
-watch(() => props.fold, (value) => {
-  isFold.value = value
-  emits('update:fold', value)
+const fold = defineModel<boolean>('fold', {
+  default: true,
 })
 
 function toggle() {
-  isFold.value = !isFold.value
-  emits('toggle', isFold.value)
+  fold.value = !fold.value
+  emits('toggle', fold.value)
 }
 </script>
 
@@ -45,10 +37,10 @@ function toggle() {
       'px-4 bg-[var(--g-bg)] transition': background,
     }"
   >
-    <slot :fold="isFold" />
+    <slot :fold="fold" :toggle="toggle" />
     <div v-if="showToggle" class="absolute bottom-0 left-0 w-full translate-y-1/2 text-center">
       <button class="h-5 inline-flex cursor-pointer select-none items-center border-size-0 rounded bg-[var(--g-bg)] px-2 text-xs font-medium outline-none" @click="toggle">
-        <SvgIcon :name="isFold ? 'ep:caret-bottom' : 'ep:caret-top' " />
+        <SvgIcon :name="fold ? 'ep:caret-bottom' : 'ep:caret-top' " />
       </button>
     </div>
   </div>

src/layouts/ui-kit/HCheckList.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-const props = withDefaults(
+withDefaults(
   defineProps<{
-    modelValue: string | number | undefined
     options: {
       label?: string | number
       icon?: string
@@ -16,18 +15,19 @@ const props = withDefaults(
 )
 
 const emits = defineEmits<{
-  'update:modelValue': [string | number]
   'change': [string | number | undefined]
 }>()
 
-watch(() => props.modelValue, (val) => {
+const value = defineModel<string | number>()
+
+watch(value, (val) => {
   emits('change', val)
 })
 </script>
 
 <template>
   <div class="inline-flex select-none items-center justify-center of-hidden rounded-md bg-stone-3 dark:bg-stone-7">
-    <button v-for="option in options" :key="option.value" :disabled="disabled || option.disabled" class="flex cursor-pointer items-center truncate border-size-0 bg-inherit px-2 py-1.5 text-sm disabled:cursor-not-allowed disabled:opacity-50 hover:not-disabled:(bg-ui-primary text-ui-text)" :class="{ 'text-ui-text bg-ui-primary': modelValue === option.value }" @click="emits('update:modelValue', option.value)">
+    <button v-for="option in options" :key="option.value" :disabled="disabled || option.disabled" class="flex cursor-pointer items-center truncate border-size-0 bg-inherit px-2 py-1.5 text-sm disabled:cursor-not-allowed disabled:opacity-50 hover:not-disabled:(bg-ui-primary text-ui-text)" :class="{ 'text-ui-text bg-ui-primary': value === option.value }" @click="value = option.value">
       <SvgIcon v-if="option.icon" :name="option.icon" />
       <template v-else>
         {{ option.label }}

src/layouts/ui-kit/HDialog.vue

@@ -1,27 +1,28 @@
 <script setup lang="ts">
 import { Dialog, DialogDescription, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
-    modelValue: boolean
     appear?: boolean
     title?: string
     preventClose?: boolean
     overlay?: boolean
   }>(),
   {
-    modelValue: false,
     appear: false,
     preventClose: false,
     overlay: false,
   },
 )
 
 const emits = defineEmits<{
-  'update:modelValue': [boolean]
   'close': []
 }>()
 
+const isOpen = defineModel<boolean>({
+  default: false,
+})
+
 const slots = useSlots()
 
 const overlayTransitionClass = ref({
@@ -44,15 +45,6 @@ const transitionClass = computed(() => {
   }
 })
 
-const isOpen = computed({
-  get() {
-    return props.modelValue
-  },
-  set(value) {
-    emits('update:modelValue', value)
-  },
-})
-
 function close() {
   isOpen.value = false
   emits('close')

src/layouts/ui-kit/HInput.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 withDefaults(
   defineProps<{
-    modelValue: string
     placeholder?: string
     disabled?: boolean
   }>(),
@@ -10,23 +9,17 @@ withDefaults(
   },
 )
 
-const emits = defineEmits<{
-  'update:modelValue': [string]
-}>()
+const value = defineModel<string>()
 
 const inputRef = ref()
 
-function handleInput(event: Event) {
-  emits('update:modelValue', (event.target as HTMLInputElement).value)
-}
-
 defineExpose({
   ref: inputRef,
 })
 </script>
 
 <template>
   <div class="relative w-full lg:w-48">
-    <input ref="inputRef" type="text" :value="modelValue" :placeholder="placeholder" :disabled="disabled" class="relative block w-full border-0 rounded-md bg-white px-2.5 py-1.5 text-sm shadow-sm ring-1 ring-stone-2 ring-inset disabled:cursor-not-allowed dark:bg-dark disabled:opacity-50 focus:outline-none focus:ring-2 dark:ring-stone-8 focus:ring-ui-primary placeholder-stone-4 dark:placeholder-stone-5" @input="handleInput">
+    <input v-model="value" type="text" :placeholder="placeholder" :disabled="disabled" class="relative block w-full border-0 rounded-md bg-white px-2.5 py-1.5 text-sm shadow-sm ring-1 ring-stone-2 ring-inset disabled:cursor-not-allowed dark:bg-dark disabled:opacity-50 focus:outline-none focus:ring-2 dark:ring-stone-8 focus:ring-ui-primary placeholder-stone-4 dark:placeholder-stone-5">
   </div>
 </template>

src/layouts/ui-kit/HSelect.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    modelValue: string | number | undefined
     options: {
       label: string | number
       value: string | number
@@ -14,16 +13,14 @@ const props = withDefaults(
   },
 )
 
-const emits = defineEmits<{
-  'update:modelValue': [string | number]
-}>()
+const value = defineModel<string | number>()
 
 const selected = computed({
   get() {
-    return props.options.find(option => option.value === props.modelValue) ?? props.options[0]
+    return props.options.find(option => option.value === value.value) ?? props.options[0]
   },
   set(val) {
-    emits('update:modelValue', val.value)
+    value.value = val.value
   },
 })
 </script>

src/layouts/ui-kit/HSlideover.vue

@@ -4,15 +4,13 @@ import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue'
 
 const props = withDefaults(
   defineProps<{
-    modelValue: boolean
     appear?: boolean
     side?: 'left' | 'right'
     title?: string
     preventClose?: boolean
     overlay?: boolean
   }>(),
   {
-    modelValue: false,
     appear: false,
     side: 'right',
     preventClose: false,
@@ -21,10 +19,13 @@ const props = withDefaults(
 )
 
 const emits = defineEmits<{
-  'update:modelValue': [boolean]
   'close': []
 }>()
 
+const isOpen = defineModel<boolean>({
+  default: false,
+})
+
 const slots = useSlots()
 
 const overlayTransitionClass = ref({
@@ -47,15 +48,6 @@ const transitionClass = computed(() => {
   }
 })
 
-const isOpen = computed({
-  get() {
-    return props.modelValue
-  },
-  set(value) {
-    emits('update:modelValue', value)
-  },
-})
-
 function close() {
   isOpen.value = false
   emits('close')