Commit a544dd3e589329339177dad3d5c1f75dd6e6f0ca
1 parent
0065ab0b
fix: auto remove script dom in `useScript`
修复useScript未能自动移除script节点的问题
Showing
2 changed files
with
9 additions
and
3 deletions
CHANGELOG.zh_CN.md
@@ -5,10 +5,10 @@ | @@ -5,10 +5,10 @@ | ||
5 | ### 🐛 Bug Fixes | 5 | ### 🐛 Bug Fixes |
6 | 6 | ||
7 | - **ApiTreeSelect** 修复未能正确监听`params`变化的问题 | 7 | - **ApiTreeSelect** 修复未能正确监听`params`变化的问题 |
8 | -- **BasicTable** 修复可编辑单元格不支持`ellipsis`配置的问题 | ||
9 | - **ImgRotateDragVerify** 修复组件`resume`方法无法调用的问题 | 8 | - **ImgRotateDragVerify** 修复组件`resume`方法无法调用的问题 |
10 | - **TableAction** 修复 stopButtonPropagation 属性某些情况下不起作用的问题 | 9 | - **TableAction** 修复 stopButtonPropagation 属性某些情况下不起作用的问题 |
11 | - **BasicTable** | 10 | - **BasicTable** |
11 | + - 修复可编辑单元格不支持`ellipsis`配置的问题 | ||
12 | - 修复全屏模式下看不到子组件弹出层(popconfirm 以及 select、treeSelect 等编辑组件)的问题 | 12 | - 修复全屏模式下看不到子组件弹出层(popconfirm 以及 select、treeSelect 等编辑组件)的问题 |
13 | - 修复启用`expandRowByClick`时,点击不可展开的行可能会导致样式错误的问题 | 13 | - 修复启用`expandRowByClick`时,点击不可展开的行可能会导致样式错误的问题 |
14 | - 修复`pagination`属性动态改变不生效的问题 | 14 | - 修复`pagination`属性动态改变不生效的问题 |
@@ -17,6 +17,7 @@ | @@ -17,6 +17,7 @@ | ||
17 | - 修复`Alert`组件的颜色配置 | 17 | - 修复`Alert`组件的颜色配置 |
18 | - 修复禁用状态下的`link`类型的按钮颜色问题 | 18 | - 修复禁用状态下的`link`类型的按钮颜色问题 |
19 | - 修复`Tree`已勾选的复选框的样式问题 | 19 | - 修复`Tree`已勾选的复选框的样式问题 |
20 | +- **其它** 修复 useScript 未能自动移除 script 节点的问题 | ||
20 | 21 | ||
21 | ## 2.6.1(2021-07-19) | 22 | ## 2.6.1(2021-07-19) |
22 | 23 |
src/hooks/web/useScript.ts
1 | -import { onMounted, ref } from 'vue'; | 1 | +import { onMounted, onUnmounted, ref } from 'vue'; |
2 | 2 | ||
3 | interface ScriptOptions { | 3 | interface ScriptOptions { |
4 | src: string; | 4 | src: string; |
@@ -8,10 +8,11 @@ export function useScript(opts: ScriptOptions) { | @@ -8,10 +8,11 @@ export function useScript(opts: ScriptOptions) { | ||
8 | const isLoading = ref(false); | 8 | const isLoading = ref(false); |
9 | const error = ref(false); | 9 | const error = ref(false); |
10 | const success = ref(false); | 10 | const success = ref(false); |
11 | + let script: HTMLScriptElement; | ||
11 | 12 | ||
12 | const promise = new Promise((resolve, reject) => { | 13 | const promise = new Promise((resolve, reject) => { |
13 | onMounted(() => { | 14 | onMounted(() => { |
14 | - const script = document.createElement('script'); | 15 | + script = document.createElement('script'); |
15 | script.type = 'text/javascript'; | 16 | script.type = 'text/javascript'; |
16 | script.onload = function () { | 17 | script.onload = function () { |
17 | isLoading.value = false; | 18 | isLoading.value = false; |
@@ -32,6 +33,10 @@ export function useScript(opts: ScriptOptions) { | @@ -32,6 +33,10 @@ export function useScript(opts: ScriptOptions) { | ||
32 | }); | 33 | }); |
33 | }); | 34 | }); |
34 | 35 | ||
36 | + onUnmounted(() => { | ||
37 | + script && script.remove(); | ||
38 | + }); | ||
39 | + | ||
35 | return { | 40 | return { |
36 | isLoading, | 41 | isLoading, |
37 | error, | 42 | error, |