如何在Vue中引入ActiveX控件

　　介绍

本篇文章为大家展示了如何在Vue中引入ActiveX控件,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

Vue的优点

Vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。

1。如何将ActiveX控件引入Vue,并且在页面上成功渲染;

2。如何调用ActiveX已提供的方法;

3。如何监听ActiveX的动作,

(注:以上问题在html的文件里不存在)

我们先来看下第一个问题:如何将ActiveX控件引入Vue,并且在页面上成功渲染。如何将ActiveX控件渲染到页面上。根据客户开发人员提供的演示,“& lt;对象id=?“classid=啊白４? lt;/object>拷贝到vue文件中,如图所示

如何在vue中引入ActiveX控件

纱线运行dev,运行成功,但是页面空出很大一块空白区域,很显然,没有渲染成功。经过查询,ActiveX控件只支持在IE浏览器下使用(有点坑)

这算是解决了第一个问题,同样,小伙伴可以通过动态生成的方式渲染到页面上,代码如下:

let  obj =, document.createElement(& # 39;对象# 39;) 　　obj.setAttribute (& # 39; id # 39;,, & # 39; activex # 39;) 　　obj.setAttribute (& # 39; classid& # 39;,, & # 39; clsid:{控件id} & # 39;) 　　obj.setAttribute(& # 39;宽度# 39;,,1500) 　　obj.setAttribute(& # 39;高度# 39;,,100) 　　var  _obj =, . getelementbyid(“要渲染的节点“); 　　_obj.appendChild (obj)

接下来我们来看第二个问题:如何调用ActiveX已提供的方法。

渲染是可以了,但是却无法调用控件提供的方法,根据演示:“softphonecontrol.MakeCall (paramsItem),无法执行,后来又采取嵌入iframe方式(还记得刚刚说的吗,这个控件在单纯的html页面没有任何问题,当然前提是IE浏览器)。最终找到原因,IE的浏览器需要做下设置设置:设置互联网选项,安全/自定义级别主动控件和插件——对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本,选择“启用“或者“提示“)

最后一个问题啦:如何监听ActiveX的动作。

根据演示:

& lt; script ,,=,“softphonecontrol",,=事件,“OnLogRingUp (param1 param2)“,,语言=,“javascript"祝辞, 　　,警报(“param1:“+ param1 +“,“+“param2:“+ param2),, 　　& lt;/script>

再次提醒一下,这种写法也只有IE支持,谷歌支持一些简单的window.reload, onclick之类的方法,& lt; script> & lt;/script>中间的警报就是监听后续需要做的事情。我将这段代码直接拷贝到vue文件里:

如何在vue中引入ActiveX控件

哈哈,成功编译,但是无法监听到。换个思路,动态渲染到根节点呢,像上面提到的:

, initRingUpSript:函数(){ 　　,,,var  ring =, document.createElement (“script"); 　　,,,ring.setAttribute (“for",“softphonecontrol"); 　　,,,ring.event=癘nLogRingUp (Call_ID CORP_CODE),,, 　　,,,ring.appendChild (document.createTextNode (“phoneListener.ringUp (Call_ID CORP_CODE)“)) 　　,,,document.body.appendChild(环) 　　,,},

值得注意的是:此方法会将& lt; script> function渲染到页面上,但是想执行Vue的方法的方法的话,还需要在安装里加上一句代码:<代码>窗口。phoneListener=,

上述内容就是如何在Vue中引入ActiveX控件,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注行业资讯频道。

如何在Vue中引入ActiveX控件