目录

 

一、前言

二、控件在项目中使用

1.控件在传统项目中html页面中使用

2.控件在vue中的使用方式


一、前言

在项目中可能会遇到加载ocx控件的需求,而加载控件是有局限性的,即只有IE内核的浏览器才支持,像谷歌都不支持,这个是个注意的点,所以页面加载该模块肯定要做判断。首先要在浏览器设置允许加载activex控件:

步骤:设置按钮——Internet选项——安全——受信任站点——自定义级别——Activex控件启用

Android 嵌套Vue项目调用evaluateJavascript不生效_加载

Android 嵌套Vue项目调用evaluateJavascript不生效_动态加载_02

                 

Android 嵌套Vue项目调用evaluateJavascript不生效_vue_03

二、控件在项目中使用

1.控件在传统项目中html页面中使用

加载控件

Android 嵌套Vue项目调用evaluateJavascript不生效_ocx控件_04

主动事件:

这是控件提供的接口,控件自带

Android 嵌套Vue项目调用evaluateJavascript不生效_ocx控件_05

回调事件:

回调的事件在script标签定义就好了,是控件自动触发的事件,比如设备报警,可在该函数中获取到上报的状态,当然也是根据控件提供的事件注册

Android 嵌套Vue项目调用evaluateJavascript不生效_ocx控件_06

如果以上写法用在vue中,直接搬到vue中是无法用的,写法也不一样,但是可以用iframe把该html内嵌到vue页面中,但是使用iframe内嵌,在滑动滚动条控件会出现闪烁的情况(也有可能是其他原因导致,还没找到解决办法),所以采用了下面第二种方式

Android 嵌套Vue项目调用evaluateJavascript不生效_vue_07

2.控件在vue中的使用方式

引入控件:

方式一:直接在template模板中写入,虽然能引入,但是可能会出现一些意想不到的问题

Android 嵌套Vue项目调用evaluateJavascript不生效_vue_08

方式二:动态引入,在mounted中动态加载控件

Android 嵌套Vue项目调用evaluateJavascript不生效_ocx控件_09

主动事件调用:这个地方和html页面调用是一样的,没什么区别

Android 嵌套Vue项目调用evaluateJavascript不生效_ocx控件_10

回调事件:

回调事件的注册有两种方式:一种是监听方式,一种是动态加载

监听方式:

在mounted生命周期中使用attachEvent注册回调事件,然后回调事件在methods中书写接行了,但是addEventListener不行,监听不到回调事件,且该方式只适用于IE8-IE10

Android 嵌套Vue项目调用evaluateJavascript不生效_动态加载_11

动态加载:

和动态加载控件的方式一样的,在mounted生命周期中实现:

注意的方式是:要把this保存起来,才能调用到该方法

Android 嵌套Vue项目调用evaluateJavascript不生效_加载_12

Android 嵌套Vue项目调用evaluateJavascript不生效_控件_13

methods中接收回调状态的函数:

Android 嵌套Vue项目调用evaluateJavascript不生效_ocx控件_14