From fb0f3c1a871c7fb9d60247882687ed57c868a7a0 Mon Sep 17 00:00:00 2001
From: good-ideal <83727128@qq.com>
Date: Tue, 28 Jun 2022 15:05:09 +0800
Subject: [PATCH] =?UTF-8?q?refactor(.):=20=E2=99=BB=EF=B8=8F=20toast?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E4=BB=A3=E7=A0=81=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

toast部分代码重构, 提交可维护性.
---
 packages/components/toast/index.ts      | 13 ++-----
 packages/components/toast/index.vue     | 33 ++++--------------
 packages/components/toast/toastTypes.ts | 46 +++++++++++++++++++++++++
 packages/utils/dom.ts                   | 29 ++++++++++++++++
 packages/utils/index.ts                 |  1 +
 5 files changed, 86 insertions(+), 36 deletions(-)
 create mode 100644 packages/components/toast/toastTypes.ts
 create mode 100644 packages/utils/dom.ts

diff --git a/packages/components/toast/index.ts b/packages/components/toast/index.ts
index 48a3f65..8e8d540 100644
--- a/packages/components/toast/index.ts
+++ b/packages/components/toast/index.ts
@@ -1,5 +1,5 @@
-import { h, render } from 'vue'
 import toast from './index.vue'
+import { createGlobalNode, removeGlobalNode } from '~/utils'
 import type { ToastApi } from './index.vue'
 
 // 函数式调用
@@ -7,17 +7,10 @@ export function UToast(options: ToastApi) {
   let duration = options.duration
   if (!options.message) return
   options.duration = duration ? duration : 1000
-  // 根据components定义生成虚拟DOM
-  const vnode = h(toast, options)
-  // 需要创建一个容器div来渲染这个虚拟节点
-  const div = document.createElement('div')
-  // 然后将container append 到body上面
-  document.body.append(div)
-  // 这样就成功将虚拟节点渲染到 div
-  render(vnode, div)
+  const { vnode, div } = createGlobalNode(toast, options)
 
   setTimeout(() => {
-    render(null, div)
+    removeGlobalNode(div)
   }, options.duration + 300)
   return vnode
 }
diff --git a/packages/components/toast/index.vue b/packages/components/toast/index.vue
index f619fd9..d9fd617 100644
--- a/packages/components/toast/index.vue
+++ b/packages/components/toast/index.vue
@@ -13,6 +13,7 @@
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { getToastType, getDefaultToastType } from './toastTypes'
 import iconVue from '../icon'
 
 export interface ToastApi {
@@ -31,37 +32,17 @@ const props = withDefaults(defineProps<ToastApi>(), {
   type: 'normal'
 })
 
-const alert = reactive({
-  color: '#fff',
-  bgColor: 'rgba(0, 0, 0, .5)',
-  icon: ''
-})
+const alert = reactive(getDefaultToastType().options)
 const visible = ref(false)
 
 watch(
   () => props.type,
   val => {
-    switch (val) {
-      case 'success':
-        alert.color = '#67c23a'
-        alert.bgColor = '#f0f9eb'
-        alert.icon = 'success'
-        break
-      case 'info':
-        alert.color = '#909399'
-        alert.bgColor = '#f4f4f5'
-        alert.icon = 'info'
-        break
-      case 'warning':
-        alert.color = '#fdf6ec'
-        alert.bgColor = '#e6a23c'
-        alert.icon = 'warning'
-        break
-      case 'error':
-        alert.color = '#f56c6c'
-        alert.bgColor = '#fef0f0'
-        alert.icon = 'error'
-        break
+    const toastType = getToastType(val)
+    if (toastType) {
+      alert.color = toastType.options.color
+      alert.bgColor = toastType.options.bgColor
+      alert.icon = toastType.options.icon
     }
   },
   { immediate: true }
diff --git a/packages/components/toast/toastTypes.ts b/packages/components/toast/toastTypes.ts
new file mode 100644
index 0000000..400453e
--- /dev/null
+++ b/packages/components/toast/toastTypes.ts
@@ -0,0 +1,46 @@
+interface toastType {
+  type: string
+  options: toastTypeOptions
+}
+
+interface toastTypeOptions {
+  color: string
+  bgColor: string
+  icon: string
+}
+const toastTypes = [
+  {
+    type: 'success',
+    options: { color: '#67c23a', bgColor: '#f0f9eb', icon: 'success' } as toastTypeOptions
+  },
+  {
+    type: 'info',
+    options: { color: '#909399', bgColor: '#f4f4f5', icon: 'info' } as toastTypeOptions
+  },
+  {
+    type: 'warning',
+    options: { color: '#fdf6ec', bgColor: '#e6a23c', icon: 'warning' } as toastTypeOptions
+  },
+  {
+    type: 'error',
+    options: { color: '#f56c6c', bgColor: '#fef0f0', icon: 'error' } as toastTypeOptions
+  }
+] as toastType[]
+
+const defaultToastType = {
+  type: 'normal',
+  options: { color: '#fff', bgColor: 'rgba(0, 0, 0, .5)', icon: '' } as toastTypeOptions
+}
+
+export function getToastType(type: string): toastType {
+  return toastTypes.find(toastType => toastType.type === type) as toastType
+}
+
+export function getDefaultToastType(): toastType {
+  return defaultToastType
+}
+
+export default {
+  getToastType,
+  getDefaultToastType
+}
diff --git a/packages/utils/dom.ts b/packages/utils/dom.ts
new file mode 100644
index 0000000..336172e
--- /dev/null
+++ b/packages/utils/dom.ts
@@ -0,0 +1,29 @@
+import { h, render, DefineComponent } from 'vue'
+
+/**
+ * 创建node节点
+ * @param dom 目标dom
+ * @param options 参数
+ * @returns
+ */
+export function createGlobalNode(dom: DefineComponent<{}, {}, any>, options: object) {
+  // 根据components定义生成虚拟DOM
+  const vnode = h(dom, options)
+  // 需要创建一个容器div来渲染这个虚拟节点
+  const div = document.createElement('div')
+  // 然后将container append 到body上面
+  document.body.append(div)
+  // 这样就成功将虚拟节点渲染到 div
+  render(vnode, div)
+  return { vnode, div }
+}
+
+/**
+ * 移除元素
+ * @param el 需要移除的元素
+ */
+export function removeGlobalNode(el: HTMLElement) {
+  try {
+    el && el.remove()
+  } catch (e) {}
+}
diff --git a/packages/utils/index.ts b/packages/utils/index.ts
index 4ee7ded..838b8bf 100644
--- a/packages/utils/index.ts
+++ b/packages/utils/index.ts
@@ -2,3 +2,4 @@ export * from './isEmpty'
 export * from './deepTree'
 export * from './install'
 export * from './browser'
+export * from './dom'
-- 
Gitee