refactor:优化点选验证码组件的渲染与销毁

Author: build-admin

web/src/components/clickCaptcha/index.ts

@@ -1,7 +1,6 @@
-import { shortUuid } from '/@/utils/random'
 import { createVNode, render } from 'vue'
 import clickCaptchaConstructor from './index.vue'
-import type { VNode } from 'vue'
+import { shortUuid } from '/@/utils/random'
 
 interface ClickCaptchaOptions {
     // 验证码弹窗的自定义class
@@ -21,14 +20,18 @@ interface ClickCaptchaOptions {
  * @param options
  */
 const clickCaptcha = (uuid: string, callback?: (captchaInfo: string) => void, options: ClickCaptchaOptions = {}) => {
-    let vnode: VNode | null = createVNode(clickCaptchaConstructor, {
+    const container = document.createElement('div')
+    const vnode = createVNode(clickCaptchaConstructor, {
         uuid,
         callback,
         ...options,
         key: shortUuid(),
+        onDestroy: () => {
+            render(null, container)
+        },
     })
-    render(vnode, document.body)
-    vnode = null
+    render(vnode, container)
+    document.body.appendChild(container.firstElementChild!)
 }
 
 export default clickCaptcha

web/src/components/clickCaptcha/index.vue

@@ -39,8 +39,8 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, computed } from 'vue'
-import { getCaptchaData, checkClickCaptcha } from '/@/api/common'
+import { computed, reactive } from 'vue'
+import { checkClickCaptcha, getCaptchaData } from '/@/api/common'
 import { i18n } from '/@/lang'
 
 interface Props {
@@ -85,6 +85,10 @@ const state: {
     },
 })
 
+const emits = defineEmits<{
+    (e: 'destroy'): void
+}>()
+
 const load = () => {
     state.loading = true
     getCaptchaData(props.uuid).then((res) => {
@@ -123,7 +127,7 @@ const onCancelRecord = (index: number) => {
 }
 
 const onClose = () => {
-    document.getElementById(props.uuid)?.remove()
+    emits('destroy')
 }
 
 const captchaBoxTop = computed(() => (state.captcha.height + 200) / 2 + 'px')