vue.js 有没有办法观察screenX和screenY的位置,并在它们发生变化时运行一个方法?

rsl1atfo  于 2022-12-30  发布在  Vue.js
关注(0)|答案(2)|浏览(196)

我试图在渲染窗口的screenX或screenY位置改变时运行一个方法。我在下面的数据部分为这些位置设置了一个默认值:

data() {
    return {
      initialX: window.screenX,
      initialY: window.screenY
    };
  },

我已经计算了这里的属性:

currentPopupX() {
      return window.screenX;
    },
    currentPopupY() {
      return window.screenY;
    }
  },

最后,我在这里设置了一个手表:

watch: {
    currentPopupX() {
      if (this.currentPopupX !== this.initialX) {
        movePopup(this.popup, this.currentPopupX, this.currentPopupY);
      }
    },
    currentPopupY() {
      if (this.currentPopupY !== this.initialY) {
        movePopup(this.popup, this.currentPopupX, this.currentPopupY);
      }
    },

然而,计算属性似乎只在初始渲染时返回,之后就不更新了。我遗漏了什么吗?
我曾尝试将初始数据与手表中的计算属性进行比较,希望方法在发生更改时执行,但它从未更改。
注:呈现的窗口是一个弹出通知。用户希望将该通知拖到一个新位置(当前它呈现在屏幕中心),并在下次呈现时将该弹出通知呈现在他们将其拖到的位置。对于其他上下文,我正在尝试获取新位置以将其沿着给IPC事件。

c9x0cxw0

c9x0cxw01#

在我看来,您必须使用一个间隔来检测浏览器的位置,因为没有窗口移动事件。
如果browser position.x或browser position.y发生更改,您可以调度一个自定义事件。
当您移动窗口时,此处的事件会将文本的颜色从黑色更改为红色。

const event = new CustomEvent("browserMove",{ detail: "browserPosition" });
window.addEventListener("browserMove", onBrowserMove);
let moveTimer=null;
let content=null;
let oldX = 0;
let oldY = 0;
document.addEventListener("DOMContentLoaded",onReady);
  function onReady(e){
    content = document.getElementById("content");
    oldX = window.screenX;
    oldY = window.screenY;
    moveTimer = setInterval(detectBrowserMove,200);
  }
  function detectBrowserMove(){
    let r = browserPosition();
    if(r.x !== oldX || r.y !== oldY){
        // dispatch an event here
        window.dispatchEvent(event);
        oldX = window.screenX;
        oldY = window.screenY;
    }
    content.innerHTML = ("browser.x = " + r.x + ", browser.y = " + r.y);
  }
  function browserPosition() {
    let position={};
    position = {x:window.screenX, y:window.screenY};
    return(position);
  }
  function onBrowserMove(e){
    // write your code here
    let x = window.screenX;
    let y = window.screenY;
    content.style.color="#ff0000";
  }
<div id="content">
            
</div>
3pmvbmvn

3pmvbmvn2#

如果我没理解错的话,你是说-
默认情况下,通知窗口会在中间打开。用户可以将其拖动到任何位置,下次出现通知窗口时,它应该会在用户上次拖动它的位置弹出。
如果我们换个Angular 来考虑这个问题,你需要把窗口最后一次拖动的位置发送给API,以便下次打开。所以,与其每次都检查窗口的位置,为什么不在关闭之前只检查最后一次/最近一次的位置呢?
我的意思是-
1.打开通知窗口。
1.将一个unload侦听器附加到它。
1.将其多次拖动到所需的任何位置。
1.当窗口即将关闭时,查看侦听器,并获取最新位置。
以下是在Vue中的操作方法-
1.在Vue中创建窗口数据变量,并将新打开的窗口对象分配给它-

data() {
  return {
     // Save notification window object to this data property
     vue_window: null;
  }
}

1.应用一个监视器,当vue_window有某个值时,为它设置一个侦听器-

watch: {
    vue_window(newVal) {
      // Only if vue_window variable has some value
      if (newVal) {
       // this will fire when the window is about to close
        newVal.onunload = () => {
          // Here are the latest screen positions of the window
          console.log(this.vue_window.screenX, this.vue_window.screenY);
        };
      }
    },
  },

就是这样。当窗口将要关闭时,您将拥有窗口的最后和最新位置,您可以将其保存在任何您想要的位置。
下面是此逻辑的演示-CodeSandBox Link

无法创建代码段,因为窗口未在代码段环境中打开。如果找到任何使用窗口对象的解决方案,我将添加代码段。

相关问题