页面适配

pages/index/components/AIMatch.vue

@@ -30,11 +30,9 @@ export default {
 import * as PIXI from "pixi.js";
 
 // PIXI 变量
-let app = null;
 let tagsContainer = null;
 let activeTagInstances = [];
 
-
 // 配置数据
 const mockTags = [
   { name: "医生", bgColor: 0x0069fe, fontColor: 0xffffff, size: 17, opacity: 1.0, angle: 0, radius: 0 },
@@ -149,12 +147,13 @@ const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
 export default {
   data() {
     return {
+      app:null
     }
   },
   beforeDestroy() {
-    if (app) {
-        app.destroy(true, { children: true, texture: true, baseTexture: true });
-        app = null;
+    if (this.app) {
+        this.app.destroy(true, { children: true, texture: true, baseTexture: true });
+        this.app = null;
     }
     window.removeEventListener("resize", this.handleResize());
   },
@@ -168,9 +167,9 @@ export default {
       const height = container.clientHeight || 300;
       console.log(width,height);
 
-      if (app) return;
+      if (this.app) return;
 
-      app = new PIXI.Application({
+      this.app = new PIXI.Application({
         width: width,
         height: height,
         backgroundAlpha: 0,
@@ -179,12 +178,12 @@ export default {
         resolution: window?.devicePixelRatio ?? 1,
         autoDensity: true,
       });
-      app.view.style.touchAction = "auto";
+      this.app.view.style.touchAction = "auto";
 
-      container.appendChild(app.view);
+      container.appendChild(this.app.view);
 
       tagsContainer = new PIXI.Container();
-      app.stage.addChild(tagsContainer);
+      this.app.stage.addChild(tagsContainer);
 
       this.renderScene(width, height);
       window.addEventListener("resize", this.handleResize());
@@ -238,8 +237,8 @@ export default {
   });
 
   // 动画循环
-  app.ticker.add(() => {
-    const screenH = app.screen.height;
+  this.app.ticker.add(() => {
+    const screenH = this.app.screen.height;
 
     activeTagInstances.forEach((tag) => {
       const meta = tag.userData;
@@ -348,11 +347,11 @@ export default {
 
  handleResize () {
   const container =  document.querySelector('#pixi-box');
-  if (!app || !container) return;
+  if (!this.app || !container) return;
   const w = container.clientWidth || 300;
   const h = container.clientHeight || 300;
 
-  app.renderer.resize(w, h);
+  this.app.renderer.resize(w, h);
 
   activeTagInstances.forEach((tag) => {
     const meta = tag.userData;