From 4908d55c7c611c3224cff28833cfec02c1ce3422 Mon Sep 17 00:00:00 2001
From: tyh2001 <1469442737@qq.com>
Date: Wed, 15 Feb 2023 15:21:40 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=20ref=20=F0=9F=90=A7=F0=9F=90=A7=F0=9F=90=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/theme/components/vp-demo.vue           |  2 +-
 packages/fighting-design/button/src/button.vue         |  3 +--
 .../collapse-animation/src/collapse-animation.vue      |  5 ++---
 packages/fighting-design/image/src/image.vue           |  6 +++---
 .../infinite-scrolling/src/infinite-scrolling.vue      |  9 ++++++---
 packages/fighting-design/ripple/src/ripple.vue         | 10 ++++++----
 packages/fighting-design/slider/src/slider.vue         |  6 ++----
 packages/fighting-design/up-load/src/up-load.vue       |  8 ++++----
 8 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/docs/.vitepress/theme/components/vp-demo.vue b/docs/.vitepress/theme/components/vp-demo.vue
index 1a219985da..f02cabb760 100644
--- a/docs/.vitepress/theme/components/vp-demo.vue
+++ b/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 = () => {
diff --git a/packages/fighting-design/button/src/button.vue b/packages/fighting-design/button/src/button.vue
index 68ef99793b..11add5dfc6 100644
--- a/packages/fighting-design/button/src/button.vue
+++ b/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>()
 
   /**
    * 按钮点击
diff --git a/packages/fighting-design/collapse-animation/src/collapse-animation.vue b/packages/fighting-design/collapse-animation/src/collapse-animation.vue
index f9cce71f3d..c4b6442e92 100644
--- a/packages/fighting-design/collapse-animation/src/collapse-animation.vue
+++ b/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)
diff --git a/packages/fighting-design/image/src/image.vue b/packages/fighting-design/image/src/image.vue
index c1ebbd0509..57ed1206e9 100644
--- a/packages/fighting-design/image/src/image.vue
+++ b/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)
   })
 
   /** 类名列表 */
diff --git a/packages/fighting-design/infinite-scrolling/src/infinite-scrolling.vue b/packages/fighting-design/infinite-scrolling/src/infinite-scrolling.vue
index 1b36c6ff0a..df75fc419a 100644
--- a/packages/fighting-design/infinite-scrolling/src/infinite-scrolling.vue
+++ b/packages/fighting-design/infinite-scrolling/src/infinite-scrolling.vue
@@ -2,7 +2,6 @@
   import { Props } from './props'
   import { ref } from 'vue'
   import { useRun } from '../../_hooks'
-  import type { Ref } from 'vue'
 
   const prop = defineProps(Props)
 
@@ -10,14 +9,18 @@
   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
+
     /**
      * 获取到滚动的距离
      *
diff --git a/packages/fighting-design/ripple/src/ripple.vue b/packages/fighting-design/ripple/src/ripple.vue
index 3dad12c06c..afce5127aa 100644
--- a/packages/fighting-design/ripple/src/ripple.vue
+++ b/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>
 
diff --git a/packages/fighting-design/slider/src/slider.vue b/packages/fighting-design/slider/src/slider.vue
index 3d971d444a..ac0a5d3a8f 100644
--- a/packages/fighting-design/slider/src/slider.vue
+++ b/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)
diff --git a/packages/fighting-design/up-load/src/up-load.vue b/packages/fighting-design/up-load/src/up-load.vue
index deae303e1e..6a17dfc036 100644
--- a/packages/fighting-design/up-load/src/up-load.vue
+++ b/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)
   }
 
   /**