fix: auto remove script dom in useScript

修复useScript未能自动移除script节点的问题
vbenjs · Jul 28, 2021 · a544dd3 · a544dd3
1 parent 0065ab0
commit a544dd3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
@@ -5,10 +5,10 @@
 ### 🐛 Bug Fixes
 
 - **ApiTreeSelect** 修复未能正确监听`params`变化的问题
-- **BasicTable** 修复可编辑单元格不支持`ellipsis`配置的问题
 - **ImgRotateDragVerify** 修复组件`resume`方法无法调用的问题
 - **TableAction** 修复 stopButtonPropagation 属性某些情况下不起作用的问题
 - **BasicTable**
+  - 修复可编辑单元格不支持`ellipsis`配置的问题
   - 修复全屏模式下看不到子组件弹出层（popconfirm 以及 select、treeSelect 等编辑组件）的问题
   - 修复启用`expandRowByClick`时，点击不可展开的行可能会导致样式错误的问题
   - 修复`pagination`属性动态改变不生效的问题
@@ -17,6 +17,7 @@
   - 修复`Alert`组件的颜色配置
   - 修复禁用状态下的`link`类型的按钮颜色问题
   - 修复`Tree`已勾选的复选框的样式问题
+- **其它** 修复 useScript 未能自动移除 script 节点的问题
 
 ## 2.6.1(2021-07-19)
 

diff --git a/src/hooks/web/useScript.ts b/src/hooks/web/useScript.ts
@@ -1,4 +1,4 @@
-import { onMounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 
 interface ScriptOptions {
   src: string;
@@ -8,10 +8,11 @@ export function useScript(opts: ScriptOptions) {
   const isLoading = ref(false);
   const error = ref(false);
   const success = ref(false);
+  let script: HTMLScriptElement;
 
   const promise = new Promise((resolve, reject) => {
     onMounted(() => {
-      const script = document.createElement('script');
+      script = document.createElement('script');
       script.type = 'text/javascript';
       script.onload = function () {
         isLoading.value = false;
@@ -32,6 +33,10 @@ export function useScript(opts: ScriptOptions) {
     });
   });
 
+  onUnmounted(() => {
+    script && script.remove();
+  });
+
   return {
     isLoading,
     error,