目录
一、前言
二、控件在项目中使用
1.控件在传统项目中html页面中使用
2.控件在vue中的使用方式
一、前言
在项目中可能会遇到加载ocx控件的需求,而加载控件是有局限性的,即只有IE内核的浏览器才支持,像谷歌都不支持,这个是个注意的点,所以页面加载该模块肯定要做判断。首先要在浏览器设置允许加载activex控件:
步骤:设置按钮——Internet选项——安全——受信任站点——自定义级别——Activex控件启用
二、控件在项目中使用
1.控件在传统项目中html页面中使用
加载控件
主动事件:
这是控件提供的接口,控件自带
回调事件:
回调的事件在script标签定义就好了,是控件自动触发的事件,比如设备报警,可在该函数中获取到上报的状态,当然也是根据控件提供的事件注册
如果以上写法用在vue中,直接搬到vue中是无法用的,写法也不一样,但是可以用iframe把该html内嵌到vue页面中,但是使用iframe内嵌,在滑动滚动条控件会出现闪烁的情况(也有可能是其他原因导致,还没找到解决办法),所以采用了下面第二种方式
2.控件在vue中的使用方式
引入控件:
方式一:直接在template模板中写入,虽然能引入,但是可能会出现一些意想不到的问题
方式二:动态引入,在mounted中动态加载控件
主动事件调用:这个地方和html页面调用是一样的,没什么区别
回调事件:
回调事件的注册有两种方式:一种是监听方式,一种是动态加载
监听方式:
在mounted生命周期中使用attachEvent注册回调事件,然后回调事件在methods中书写接行了,但是addEventListener不行,监听不到回调事件,且该方式只适用于IE8-IE10
动态加载:
和动态加载控件的方式一样的,在mounted生命周期中实现:
注意的方式是:要把this保存起来,才能调用到该方法
methods中接收回调状态的函数: