javascript - 将 onselectionchange 添加到 vue

Question

我正在尝试实现一个文本选择监听器来显示一些自定义选项的工具栏

<script>

export default {
  name: "home",
  created() {
    document.onselectionchange = function() {
      this.showMenu();
    };
  },
  data() {
    return {
      ...
    };
  },
  methods: {
    showMenu() {
      console.log("show menu");
      }
    }

</script>

<style scoped>
</style>

但是还是显示无法调用undefined的showMenu，所以我尝试了这样的方法:

  created() {
    vm = this;
    document.onselectionchange = function() {
      vm.showMenu();
    };
  },

所以，什么都没有改变=(

我需要使用此选择更改，因为它是我可以添加的唯一监听器，可以一起处理桌面和移动设备，我应该实现触摸、触摸的其他方法，并且它不适用于设备

Answer 1

以经典方式声明的函数确实有自己的 this。您可以通过使用 Function.prototype.bind() 显式绑定(bind) this 或使用 ES6 箭头函数(没有自己的 this，保留外部)。

第二个问题是，如果您有多个已显示的组件，则每个组件都会重新分配(因此，覆盖)监听器，如果您可以使用分配 document.onselectionchange = 附加它。这将导致只有最后一个选择元素按您的预期工作，因为它是最后一个分配的元素。

要解决这个问题，我建议您使用 addEventListener() 来代替:

document.addEventListener('selectionchange', function() {
  this.showMenu();
}.bind(this));

或

document.addEventListener('selectionchange', () => {
  this.showMenu();
});

第三种解决方案存储对 this 的引用并在闭包中使用它:

const self = this;
document.addEventListener('selectionchange', function() {
  self.showMenu();
});