feat: 优化组件 emit 实现

packages/fighting-design/_hooks/use-input/index.ts

@@ -42,7 +42,7 @@ export interface UseInputReturn {
  */
 export const useInput = (
   prop: Partial<UseInputProps>,
-  modelValue: Ref<string | number | undefined>
+  modelValue: Ref<string | number>
 ): UseInputReturn => {
   const { run } = useRun()
 

packages/fighting-design/_hooks/use-offset/index.ts

@@ -1,5 +1,4 @@
 import { ref, onMounted, onUnmounted } from 'vue'
-import { EMIT_UPDATE } from '../../_tokens'
 import type { Ref } from 'vue'
 import type { SliderProps } from '../../slider'
 
@@ -22,13 +21,13 @@ export interface UseOffsetReturn {
  * @author Tyh2001 <https://github.com/Tyh2001>
  * @param { Object } el 小球元素节点
  * @param { Object } step 步长
- * @param { Function } emit 回调方法
+ * @param { Object } modelValue 绑定值
  * @returns { Object } 包括：偏移距离、距离左侧的偏移量、设置偏移量方法
  */
 export const useOffset = (
   el: Ref<HTMLDivElement | undefined>,
   prop: SliderProps,
-  emit: (event: 'update:modelValue', val: number) => void
+  modelValue: Ref<number>
 ): UseOffsetReturn => {
   /** 距离左侧的偏移量 */
   const offsetLeft = ref<number>(0)
@@ -118,7 +117,7 @@ export const useOffset = (
 
     offset.value = value
 
-    emit(EMIT_UPDATE, value)
+    modelValue.value = value
   }
 
   return { offset, offsetLeft, setPosition }

packages/fighting-design/_hooks/use-tabs/index.ts

@@ -9,7 +9,6 @@ import {
 } from 'vue'
 import { useChildren } from '../../_utils'
 import { useRun } from '../../_hooks'
-import { EMIT_UPDATE } from '../../_tokens'
 import { TABS_PROPS_KEY } from '../../tabs/src/props'
 import type { ComponentInternalInstance, ComputedRef, Ref } from 'vue'
 import type { TabsModelValue, TabsProps, TabsNavInstance, TabsEdit } from '../../tabs'
@@ -40,14 +39,6 @@ export type TabsProvide = {
   activeName: Ref<TabsModelValue>
 } & UseChildrenReturn<TabsPane>
 
-/**
- * setActiveName 回调类型
- *
- * @param { string } event 回调事件名
- * @param { string | number } val 回调参数
- */
-export type SetActiveNameEmit = (event: 'update:modelValue', val: string | number) => void
-
 /**
  * 设置绑定值回调类型
  *
@@ -63,7 +54,7 @@ export type SetActiveName = (name: TabsModelValue) => void
  * @param { Function } emit 回调函数
  * @returns { Object }
  */
-export const useTabs = (prop: TabsProps, emit: SetActiveNameEmit): UseTabsReturn => {
+export const useTabs = (prop: TabsProps, modelValue: Ref<string | number>): UseTabsReturn => {
   const { run } = useRun()
   /** 获取当前组件实例 */
   const instance = getCurrentInstance() as ComponentInternalInstance
@@ -80,7 +71,7 @@ export const useTabs = (prop: TabsProps, emit: SetActiveNameEmit): UseTabsReturn
   const setActiveName = (name: TabsModelValue): void => {
     activeName.value = name
     /** 回调更新绑定值 */
-    emit(EMIT_UPDATE, name)
+    modelValue.value = name
   }
 
   /**

packages/fighting-design/_hooks/use-visible/index.ts

@@ -1,28 +1,17 @@
-import { watch, ref } from 'vue'
 import { useRun } from '..'
-import { EMIT_VISIBLE } from '../../_tokens'
 import type { Ref } from 'vue'
 
 /**
  * useVisible 返回值类型接口
  *
- * @param { Object } isVisible 展示状态
  * @param { Function } closeVisible 关闭方法
+ * @param { Function } maskClose 遮罩层关闭方法
  */
 export interface UseVisibleReturn {
-  isVisible: Ref<boolean>
   closeVisible: () => void
   maskClose: () => void
 }
 
-/**
- * 回调函数类型
- *
- * @param { String } event 回调事件名
- * @param { Boolean } val 回调参数
- */
-export type UseVisibleEmit = (event: 'update:visible', val: boolean) => void
-
 /**
  * 控制 dialog 和 drawer 组件显示隐藏方法
  *
@@ -33,58 +22,27 @@ export type UseVisibleEmit = (event: 'update:visible', val: boolean) => void
  * @returns { Object }
  */
 export const useVisible = (
-  prop: { visible: boolean, maskClose: boolean },
-  emit: UseVisibleEmit,
+  prop: { maskClose: boolean },
+  visible: Ref<boolean>,
   callback?: Function
 ): UseVisibleReturn => {
   const { run } = useRun()
 
-  /** 是否展示 */
-  const isVisible = ref<boolean>(prop.visible)
-
   /**
    * 关闭
    *
    * @param { Object } [evt] 事件对象
    */
   const closeVisible = (evt?: MouseEvent): void => {
-    emit(EMIT_VISIBLE, false)
+    visible.value = false
     run(callback, evt)
   }
 
-  /** 监视绑定值的变化，如果为假则关闭 */
-  watch(
-    (): boolean => isVisible.value,
-    /**
-     * @param { boolean } newVal 最新值
-     */
-    (newVal: boolean): void => {
-      if (!newVal) {
-        closeVisible()
-      }
-    }
-  )
-
-  /** 监视数据更新绑定值 */
-  watch(
-    (): boolean => prop.visible,
-    /**
-     * @param { boolean } newVal 最新值
-     */
-    (newVal: boolean): void => {
-      isVisible.value = newVal
-    }
-  )
-
   /** 点击遮罩层关闭 */
   const maskClose = (): void => {
     if (!prop.maskClose) return
     closeVisible()
   }
 
-  return {
-    isVisible,
-    closeVisible,
-    maskClose
-  }
+  return { closeVisible, maskClose }
 }

packages/fighting-design/date-picker/src/date-picker.vue

@@ -4,27 +4,18 @@
   import { FInput } from '../../input'
   import { FTrigger } from '../../trigger'
   import { FCalendar } from '../../calendar'
-  import { EMIT_DATE } from '../../_tokens'
-  import { useModel } from '../../_hooks'
   import { addZero, warning, isFunction } from '../../_utils'
   import { FIconCalendar } from '../../_svg'
   import type { TriggerInstance } from '../../trigger'
 
   defineOptions({ name: 'FDatePicker' })
 
   const prop = defineProps(Props)
-  const emit = defineEmits([EMIT_DATE])
+  const dateModelValue = defineModel<string>('date', { required: true, default: '' })
 
   /** 传递给日历组件的当前时间 */
   const date = new Date()
 
-  const { keyword } = useModel<string>(
-    (): string => prop.date,
-    (val: string): void => {
-      emit(EMIT_DATE, val)
-    }
-  )
-
   /** trigger 组件实例 */
   const triggerInstance = ref<TriggerInstance>()
 
@@ -58,14 +49,10 @@
         )
       }
 
-      // keyword.value = `${year}/${prop.addZero ? addZero(month) : month}/${
-      //   prop.addZero ? addZero(date) : date
-      // }`
-
       setDateFun = (): void => {
         /** 将绑定值设置为格式化后的日期 */
         // keyword.value = formatDate
-        keyword.value = `${year}/${prop.addZero ? addZero(month) : month}/${
+        dateModelValue.value = `${year}/${prop.addZero ? addZero(month) : month}/${
           prop.addZero ? addZero(date) : date
         }`
       }
@@ -95,7 +82,7 @@
 
     setDateFun = (): void => {
       /** 将绑定值设置为格式化后的日期 */
-      keyword.value = formatDate
+      dateModelValue.value = formatDate
     }
   }
 
@@ -120,7 +107,7 @@
     <f-trigger ref="triggerInstance" trigger="click" :disabled="disabled">
       <!-- 输入框 -->
       <f-input
-        v-model="keyword"
+        v-model="dateModelValue"
         autocomplete="off"
         readonly
         :disabled="disabled"

packages/fighting-design/dialog/src/dialog.vue

@@ -3,15 +3,14 @@
   import { FCloseBtn } from '../../close-btn'
   import { useTransition } from '../../_hooks'
   import { useVisible, useList } from '../../_hooks'
-  import { EMIT_VISIBLE } from '../../_tokens'
 
   defineOptions({ name: 'FDialog' })
 
   const prop = defineProps(Props)
-  const emit = defineEmits([EMIT_VISIBLE])
+  const visible = defineModel<boolean>('visible', { required: true, default: false })
 
   const { styles, classes } = useList(prop, 'dialog')
-  const { isVisible, closeVisible, maskClose } = useVisible(prop, emit)
+  const { closeVisible, maskClose } = useVisible(prop, visible)
   const { handleOpen, handleOpenEnd, handleClose, handleCloseEnd } = useTransition(prop)
 
   /** 样式列表 */
@@ -34,7 +33,7 @@
       @after-leave="handleCloseEnd"
     >
       <div
-        v-show="isVisible"
+        v-show="visible"
         role="dialog"
         aria-modal="true"
         tabindex="-1"
@@ -47,7 +46,7 @@
         <!-- 主内容 -->
         <div class="f-dialog__wrapper" @click.self="maskClose">
           <transition name="f-dialog__container-trans">
-            <div v-show="isVisible" class="f-dialog__container">
+            <div v-show="visible" class="f-dialog__container">
               <!-- 头部 -->
               <header v-if="showHeader" class="f-dialog__header">
                 <!-- 头部前缀 -->

packages/fighting-design/drawer/src/drawer.vue

@@ -3,15 +3,14 @@
   import { FCloseBtn } from '../../close-btn'
   import { useTransition } from '../../_hooks'
   import { useVisible, useList } from '../../_hooks'
-  import { EMIT_VISIBLE } from '../../_tokens'
 
   defineOptions({ name: 'FDrawer' })
 
   const prop = defineProps(Props)
-  const emit = defineEmits([EMIT_VISIBLE])
+  const visible = defineModel<boolean>('visible', { required: true, default: false })
 
   const { styles, classes } = useList(prop, 'drawer')
-  const { isVisible, closeVisible, maskClose } = useVisible(prop, emit)
+  const { closeVisible, maskClose } = useVisible(prop, visible)
   const { handleOpen, handleOpenEnd, handleClose, handleCloseEnd } = useTransition(prop)
 
   /** 样式列表 */
@@ -34,7 +33,7 @@
       @after-leave="handleCloseEnd"
     >
       <div
-        v-show="isVisible"
+        v-show="visible"
         role="dialog"
         aria-modal="true"
         tabindex="-1"
@@ -47,7 +46,7 @@
         <!-- 主内容 -->
         <div class="f-drawer__wrapper" @click.self="maskClose">
           <transition name="f-drawer__container-trans">
-            <div v-show="isVisible" class="f-drawer__container">
+            <div v-show="visible" class="f-drawer__container">
               <!-- 头部 -->
               <header v-if="showHeader" class="f-drawer__header">
                 <slot name="header">

packages/fighting-design/image-preview/src/image-preview.vue

@@ -16,12 +16,11 @@
     FIconZoomOut
   } from '../../_svg'
   import { useOperationImg, useRun } from '../../_hooks'
-  import { EMIT_VISIBLE } from '../../_tokens'
 
   defineOptions({ name: 'FImagePreview' })
 
   const prop = defineProps(Props)
-  const emit = defineEmits([EMIT_VISIBLE])
+  const visible = defineModel<boolean>('visible', { required: true, default: false })
 
   const { run } = useRun()
   const {
@@ -112,7 +111,7 @@
    * @param { Object } evt 事件对象
    */
   const handelClose = (evt: MouseEvent): void => {
-    emit(EMIT_VISIBLE, false)
+    visible.value = false
     run(prop.onClose, evt)
   }
 </script>