现在有个需求,弹窗打开时,监听窗口大小变化,并动态调整弹窗大小,避免弹窗比窗口还大,导致弹窗无法操作。弹窗关闭后,移除监听 resize。因为执行时需要有参数,所以 removeEventListener 并不是很适用。

最初想法是使用 addEventListenerremoveEventListener 来完成需求。

layer.open({
  type: 2,
  title: '详情',
  area: ['85%', '85%'],
  maxmin: true,
  content: "/detail.html?id=123",
  // 弹窗关闭
  end: function () {
    window.removeEventListener("resize", (e) => layer.full(index));
  },
  // 弹窗打开
  success: function (layero, index) {
    layer.full(index);
    window.addEventListener("resize", (e) => layer.full(index));
  }
});

但发现能正常添加监听器,但是不能正常移除。

于是仔细查看了 removeEventListener文档,发现了 AbortSignal

改改,使用 AbortSignal 完美实现了需求。

layer.open({
  type: 2,
  title: '详情',
  area: ['85%', '85%'],
  maxmin: true,
  content: "/detail.html?id=123",
  // 弹窗关闭
  end: function () {
    // 发出信号,可以移除监听器了
    controller.abort();
  },
  // 弹窗打开
  success: function (layero, index) {
    layer.full(index);
    window.addEventListener("resize", (e) => layer.full(index), {signal: controller.signal});
  }
});

标签: none

添加新评论