style: 优化组件 ref 🐧🐧🐧

docs/.vitepress/theme/components/vp-demo.vue

@@ -4,7 +4,7 @@
   /** 是否展示内容 */
   const isOpen = ref(false)
   /** 折叠的 dom 节点 */
-  const content = ref(null)
+  const content = ref()
 
   /** 点击执行 */
   const handleClick = () => {

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

@@ -5,7 +5,6 @@
   import { FIconLoadingAVue } from '../../_svg'
   import { useRipples, useRun, useGlobal, useButton } from '../../_hooks'
   import type { RipplesOptions } from '../../_hooks'
-  import type { Ref } from 'vue'
   import type { FightingIcon } from '../../_interface'
 
   const prop = defineProps(Props)
@@ -15,7 +14,7 @@
   const { classList, styleList } = useButton(prop)
 
   /** 元素节点 */
-  const FButtonEl: Ref<HTMLButtonElement | null> = ref(null)
+  const FButtonEl = ref<HTMLButtonElement>()
 
   /**
    * 按钮点击

packages/fighting-design/collapse-animation/src/collapse-animation.vue

@@ -1,15 +1,14 @@
 <script lang="ts" setup name="FCollapseAnimation">
   import { Props } from './props'
   import { ref, onMounted, computed, watch } from 'vue'
-  import type { Ref } from 'vue'
 
   const prop = defineProps(Props)
 
   /** 初始是否展开 */
   const isOpened = computed((): boolean => !!prop.opened)
 
-  /** om 元素 */
-  const collapseEl: Ref<HTMLDivElement | null> = ref(null)
+  /** DOM 元素 */
+  const collapseEl = ref<HTMLDivElement>()
 
   /** 需要展开的尺寸 */
   const defaultSize = ref<number>(null as unknown as number)

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

@@ -3,7 +3,7 @@
   import { onMounted, ref, computed } from 'vue'
   import { sizeChange } from '../../_utils'
   import { useLoadImg, useProps } from '../../_hooks'
-  import type { CSSProperties, Ref } from 'vue'
+  import type { CSSProperties } from 'vue'
   import type { ClassList } from '../../_interface'
   import type { UseLoadImgProp } from '../../_hooks'
 
@@ -16,10 +16,10 @@
   )
 
   /** 元素节点 */
-  const imageEl: Ref<HTMLImageElement | null> = ref(null)
+  const imageEl = ref<HTMLImageElement>()
 
   onMounted((): void => {
-    loadImg(imageEl.value as HTMLImageElement)
+    imageEl.value && loadImg(imageEl.value)
   })
 
   /** 类名列表 */

packages/fighting-design/infinite-scrolling/src/infinite-scrolling.vue

@@ -2,22 +2,25 @@
   import { Props } from './props'
   import { ref } from 'vue'
   import { useRun } from '../../_hooks'
-  import type { Ref } from 'vue'
 
   const prop = defineProps(Props)
 
   /** 是否到达底部 */
   const target = ref(false)
 
   /** 元素节点 */
-  const scrollEl: Ref<HTMLDivElement | null> = ref(null)
+  const scrollEl = ref<HTMLDivElement>()
 
   /** 滚动触发 */
   const scroll = (): void => {
     if (prop.loading) return
 
     /** 获取到元素节点 */
-    const view: HTMLDivElement = scrollEl.value as HTMLDivElement
+    const view: HTMLDivElement | undefined = scrollEl.value
+
+    /** 如果没找到则直接拦截 */
+    if (!view) return
+
     /**
      * 获取到滚动的距离
      *

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

@@ -3,7 +3,6 @@
   import { useRipples, useList, useGlobal } from '../../_hooks'
   import { ref, toRefs, reactive } from 'vue'
   import type { RipplesOptions } from '../../_hooks'
-  import type { Ref } from 'vue'
 
   const prop = defineProps(Props)
 
@@ -18,7 +17,7 @@
   const { styles } = useList(params, 'ripple')
 
   /** 元素节点 */
-  const rippleEl: Ref<HTMLElement | null> = ref(null)
+  const rippleEl = ref<HTMLElement>()
 
   /** 样式列表 */
   const styleList = styles(['startOpacity', 'endOpacity'], false)
@@ -42,9 +41,12 @@
       ripplesColor: ripplesColor.value
     })
 
-    const { runRipples } = useRipples(evt, rippleEl.value as HTMLElement, options)
+    /** 必须在元素节点存在的情况下才触发涟漪 */
+    if (rippleEl.value) {
+      const { runRipples } = useRipples(evt, rippleEl.value, options)
 
-    runRipples()
+      runRipples()
+    }
   }
 </script>
 

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

@@ -3,9 +3,7 @@
   import { onMounted, ref, computed } from 'vue'
   import { isNumber } from '../../_utils'
   import { useList, useSlider } from '../../_hooks'
-  // import { FTooltip } from '../../tooltip'
   import { EMIT_UPDATE } from '../../_tokens'
-  import type { Ref } from 'vue'
 
   const prop = defineProps(Props)
   const emit = defineEmits({
@@ -15,9 +13,9 @@
   const { styles, classes } = useList(prop, 'slider')
 
   /** dom 元素 */
-  const sliderEl: Ref<HTMLDivElement | null> = ref(null)
+  const sliderEl = ref<HTMLDivElement>()
   /** 滑块小球 dom 元素 */
-  const sliderCircle: Ref<HTMLDivElement | null> = ref(null)
+  const sliderCircle= ref<HTMLDivElement>()
 
   /** 便宜距离 */
   const offset = ref<number>(0)

packages/fighting-design/up-load/src/up-load.vue

@@ -7,7 +7,6 @@
   import { FCloseBtn } from '../../close-btn'
   import { FIconNotesVue, FIconPlusVue } from '../../_svg'
   import { EMIT_FILES } from '../../_tokens'
-  import type { Ref } from 'vue'
 
   const prop = defineProps(Props)
   const emit = defineEmits({
@@ -20,11 +19,11 @@
   const fileList = ref<File[]>(null as unknown as File[])
 
   /** 文件上传输入框 */
-  const inputEl: Ref<HTMLInputElement | null> = ref(null)
+  const inputEl = ref<HTMLInputElement>()
 
   /** 点击上传 */
   const handleClick = (): void => {
-    ;(inputEl.value as HTMLInputElement).click()
+    inputEl.value && inputEl.value.click()
   }
 
   /**
@@ -80,10 +79,11 @@
   /**
    * 删除文件
    *
+   * @see Array.prototype.splice() https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
    * @param { number } index 需要删除的文件索引
    */
   const removeFile = (index: number): void => {
-    ;(fileList.value as File[]).splice(index, 1)
+    fileList.value.splice(index, 1)
   }
 
   /**