Vue框架下引入ActiveX控件的问题

最近参与了山东某一公司的呼叫中心系统的开发项目，我负责的模块是在公司已有的前端Vue框架下集成他们的软电话条功能。
从开始到结束所遇到的几个问题以下：
1.如何将ActiveX控件引入Vue，而且在页面上成功渲染；
2.如何调用ActiveX已提供的方法；
3.如何监听ActiveX的动做；
  （注：以上问题在html的文件里不存在）
咱们先来看下第一个问题：如何将ActiveX控件引入Vue，而且在页面上成功渲染。
如何将ActiveX控件渲染到页面上。根据客户开发人员提供的demo，`<object id="" classid="" width="100%"></object>`拷贝到vue文件中，如图所示

。

yarn run dev，运行成功，可是页面空出很大一块空白区域，很显然，没有渲染成功。通过查询，ActiveX控件只支持在IE浏览器下使用（有点坑）


这算是解决了第一个问题，一样，小伙伴能够经过动态生成的方式渲染到页面上，代码以下：

let obj = document.createElement('object')
obj.setAttribute('id', 'activex')
obj.setAttribute('classid', 'clsid:{控件id}')
obj.setAttribute('width', 1500)
obj.setAttribute('height', 100)
var _obj = document.getElementById("要渲染的节点");
_obj.appendChild(obj)

接下来咱们来看第二个问题：如何调用ActiveX已提供的方法。
渲染是能够了，可是却没法调用控件提供的方法。根据demo：`softphonecontrol.MakeCall(paramsItem)`，没法执行，后来又采起嵌入iframe方式（还记得
刚刚说的吗，这个控件在单纯的html页面没有任何问题，固然前提是IE浏览器）。最终找到缘由，IE的浏览器须要作下设置
设置：设置-Internet选项-安全/自定义级别-Active控件和插件-对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本，选择"启用"或者"提示"）


最后一个问题啦：如何监听ActiveX的动做。
根据demo：

<script   for= "softphonecontrol"   event= "OnLogRingUp(param1，param2)"   language= "javascript"> 
 alert("param1:"+param1+" "+"param2:"+param2); 
</script>

再次提醒一下，这种写法也只有IE支持，谷歌支持一些简单的window.reload、onclick之类的方法，<script></script>中间的alert就是监听后续须要作的事情。
我将这段代码直接拷贝到vue文件里：

哈哈，成功编译，可是没法监听到。换个思路，动态渲染到根节点呢，像上面提到的：

initRingUpSript:function(){
       var ring = document.createElement("script");
       ring.setAttribute("for","softphonecontrol");
       ring.event="OnLogRingUp(Call_ID,CORP_CODE)";  
       ring.appendChild(document.createTextNode("phoneListener.ringUp(Call_ID,CORP_CODE)"))
       document.body.appendChild(ring)
     },

值得注意的是：此方法会将<script>function</script>渲染到页面上，可是想执行Vue的methods的方法的话，还须要在mounted里加上一句代码： window.phoneListener = this;
这段代码的做用是将Vue的this所指向赋值给全局的变量phoneListener，这个变量，可随意。
大功告成！
参考连接以下：vue 接入activex控件