最近参与了山东某一公司的呼叫中心系统的开发项目，我负责的模块是在公司已有的前端Vue框架下集成他们的软电话条功能。
从开始到结束所遇到的几个问题如下（备注：ActiveX控件只能在IE下使用；以下问题在html页面上不存在）：
1.如何将ActiveX控件引入Vue，并且在页面上成功渲染；
2.如何调用ActiveX已提供的方法；
3.如何监听ActiveX的动作；
我们先来看下第一个问题：如何将ActiveX控件引入Vue，并且在页面上成功渲染。
如何将ActiveX控件渲染到页面上。通过<object></object>标签渲染Active组件，需要提供ActiveX的classid，ActiveX的相关内容可自行学习，部分代码如下所示：
运行项目，可以看到在IE下是可以正常渲染出来的，其他的浏览器，比如：谷歌、火狐、Edge都无法渲染出来的。大家也可以通过动态渲染的方式：
接下来我们来看第二个问题：如何调用ActiveX已提供的方法。
成功渲染后，ActiveX控件上的一些看得到的功能是可以正常使用的，但是其封装的方法需要通过代码调用，调用方式也很简单，<object>标签内的id.functionName()，例如：
softphonecontrol.MakeCall(paramsItem)。运行起来试试看，提示“找不到成员”。最终找到原因，IE的浏览器需要做下设置
设置-Internet选项-安全/自定义级别-ActiveX控件和插件-对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本，选'启用'或者'提示'。测试有效，成功调用到封装的方法。
最后一个问题：如何监听ActiveX的动作。根据客户给的demo，是这么写的：
<script></script>中间的即为监听到事件后需要做的处理事件。一开始我是直接放在Vue文件里：
运行试试看，结果是监听不到的，并且在源代码里也找不到这段代码，换个思路呢，动态插入到页面的某个节点下试试，上代码：
这里需要注意下，在Vue的mounted里需要将this暴露到全局下：window.phoneListener = this，phoneListener是一个全局自定义变量，ringUp是定义在methods里的一个函数，至此，便解决了最后一个问题。
同样，这个（window.phoneListener = this）也适合于Vue框架下，框架外的js调用框架内的方法。
本文如有不当之处，欢迎评论指正。
参考链接：https://blog.csdn.net/qq_37955711/article/details/85264278
