Vue丨将组件 methods 内的方法绑定到 window 来调用

methods:{
  // 创建电话组件
  createCallComponent(phoneNum) {
    if (window.callComp && !window.callComp.isDestroyed) {
      return;
    };
    window.callComp = new UdeskCallcenterComponent({
       container: document.body,
       token: this.agentToken,
       subDomain: this.subDomain,
       showManualScreenPop: false,
       onHangup: function(conversation) { // 电话挂断时执行
         getCallId(conversation.call_id);  // 这里调用绑定后的方法,并传入callid
         window.callComp.destroy(); // 销毁电话组件
         window.callComp = null; // 销毁电话组件
       }
    });
  },

  // 每次呼叫挂断时获取当前callid,后续把获取值保存到后台接口中
  callIdFun(val) {
    this.call_id = val;
    console.log(this.call_id);
    ...
  },   
}

mounted() {
  // 把vue组件的methods方法绑定到window
  window['getCallId'] = val => {
    this.callIdFun(val)
  }
}

在 vue 项目中调用并创建第三方的组件构建,结果因为涉及到作用域以及组件内属性函数的异步执行问题,导致 vue 的方法在第三方组件内无法执行以及在其外部执行时存在执行顺序的问题(本意是想在第三方组件函数执行完毕后再执行我的函数),后发现第三方组件内可以执行 window 下的函数方法,最终采用了上述方法解决了此问题!如有不同处理方法,望大家留言互相交流学习。

猜你喜欢

转载自blog.csdn.net/AndyFCC/article/details/81773959