hookehuyr

fix: 添加组件卸载时的资源清理逻辑

在TEditor、MarqueeField、VideoField组件和主视图页面中添加onUnmounted钩子
清理tinymce实例、定时器和视频播放器资源,防止内存泄漏
<!--
* @Date: 2022-08-29 14:31:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-11-23 10:49:41
* @LastEditTime: 2025-09-30 22:13:39
* @FilePath: /data-table/src/components/MarqueeField/index.vue
* @Description: 跑马灯控件
-->
......@@ -32,6 +32,14 @@ onMounted(() => {
ScrollUp();
});
onUnmounted(() => {
// 清理定时器
if (intNum.value) {
clearInterval(intNum.value);
intNum.value = null;
}
});
const top = computed(() => {
return -activeIndex.value * 30 + "px";
});
......
......@@ -346,6 +346,13 @@ onMounted(() => {
// tinymce.init({});
});
onUnmounted(() => {
// 清理tinymce实例
if (tinymce.activeEditor) {
tinymce.activeEditor.destroy();
}
});
// 设置值
const handleSetContent = (content) => {
tinymce.activeEditor.setContent(content);
......
......@@ -21,7 +21,7 @@
*/
import "mui-player/dist/mui-player.min.css";
import MuiPlayer from "mui-player";
import { onMounted } from "vue";
import { onMounted, onUnmounted } from "vue";
import { useEventListener } from "@/composables";
// 视频基础属性
......@@ -31,8 +31,18 @@ const props = defineProps({
// 视频播放事件回调
const emit = defineEmits(["active"]);
let video = null;
let muiPlayerInstance = null;
/**
* 视频播放事件处理函数
*/
const handleVideoPlay = () => {
props.item.value = { key: "video", value: "play" };
emit("active", props.item.value);
};
onMounted(() => {
const mp = new MuiPlayer({
muiPlayerInstance = new MuiPlayer({
container: "#mui-player",
// title: props.item.component_props.title,
src: props.item.component_props.src,
......@@ -45,12 +55,9 @@ onMounted(() => {
{ attrKey: "x5-video-player-type", attrValue: "h5-page" },
],
});
video = mp.video();
video = muiPlayerInstance.video();
//视频播放事件监听
video.addEventListener("play", function () {
props.item.value = { key: "video", value: "play" };
emit("active", props.item.value);
});
video.addEventListener("play", handleVideoPlay);
// 配置16:9高度比
const width = document.getElementById("mui-player").clientWidth;
const height = (width * 9) / 16;
......@@ -58,7 +65,16 @@ onMounted(() => {
});
onUnmounted(() => {
video.removeEventListener("play", function () {});
// 移除事件监听器
if (video) {
video.removeEventListener("play", handleVideoPlay);
}
// 销毁MuiPlayer实例
if (muiPlayerInstance) {
muiPlayerInstance.destroy();
muiPlayerInstance = null;
}
video = null;
});
</script>
......
......@@ -387,6 +387,9 @@ const collapseRef = ref(null);
const show_loading = ref(false);
// 定时器ID,用于清理轮询
let subscribeCheckInterval = null;
onMounted(async () => {
// 显示加载动画
show_loading.value = true;
......@@ -615,6 +618,14 @@ onMounted(async () => {
}, false);
});
onUnmounted(() => {
// 清理定时器
if (subscribeCheckInterval) {
clearInterval(subscribeCheckInterval);
subscribeCheckInterval = null;
}
});
// 自定义失焦操作
// const onBlur = async (item) => {
// console.warn(item);
......@@ -637,7 +648,11 @@ onMounted(async () => {
// 打开轮询用户是否关注
const onTap = () => {
if (localStorage.getItem('weixin_subscribe') === '0') {
setInterval(() => {
// 清理之前的定时器(如果存在)
if (subscribeCheckInterval) {
clearInterval(subscribeCheckInterval);
}
subscribeCheckInterval = setInterval(() => {
checkUserSubscribe()
}, 1000);
}
......@@ -650,6 +665,11 @@ const checkUserSubscribe = () => {
// 标记用户已关注
localStorage.setItem('weixin_subscribe', 1);
show_qrcode.value = false;
// 清理定时器
if (subscribeCheckInterval) {
clearInterval(subscribeCheckInterval);
subscribeCheckInterval = null;
}
}
// 凭密码填写设置
if (formSetting.value.mmtx_enable) {
......