天天看點

vue項目加載OCX控件以及控件的主動事件和回調事件的處理一、前言二、控件在項目中使用

目錄

一、前言

二、控件在項目中使用

1.控件在傳統項目中html頁面中使用

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

一、前言

在項目中可能會遇到加載ocx控件的需求,而加載控件是有局限性的,即隻有IE核心的浏覽器才支援,像谷歌都不支援,這個是個注意的點,是以頁面加載該子產品肯定要做判斷。首先要在浏覽器設定允許加載activex控件:

步驟:設定按鈕——Internet選項——安全——受信任站點——自定義級别——Activex控件啟用

vue項目加載OCX控件以及控件的主動事件和回調事件的處理一、前言二、控件在項目中使用
vue項目加載OCX控件以及控件的主動事件和回調事件的處理一、前言二、控件在項目中使用
vue項目加載OCX控件以及控件的主動事件和回調事件的處理一、前言二、控件在項目中使用

二、控件在項目中使用

1.控件在傳統項目中html頁面中使用

加載控件

vue項目加載OCX控件以及控件的主動事件和回調事件的處理一、前言二、控件在項目中使用

主動事件:

這是控件提供的接口,控件自帶

vue項目加載OCX控件以及控件的主動事件和回調事件的處理一、前言二、控件在項目中使用

回調事件:

回調的事件在script标簽定義就好了,是控件自動觸發的事件,比如裝置報警,可在該函數中擷取到上報的狀态,當然也是根據控件提供的事件注冊

vue項目加載OCX控件以及控件的主動事件和回調事件的處理一、前言二、控件在項目中使用

如果以上寫法用在vue中,直接搬到vue中是無法用的,寫法也不一樣,但是可以用iframe把該html内嵌到vue頁面中,但是使用iframe内嵌,在滑動滾動條控件會出現閃爍的情況(也有可能是其他原因導緻,還沒找到解決辦法),是以采用了下面第二種方式

vue項目加載OCX控件以及控件的主動事件和回調事件的處理一、前言二、控件在項目中使用

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

引入控件:

方式一:直接在template模闆中寫入,雖然能引入,但是可能會出現一些意想不到的問題

vue項目加載OCX控件以及控件的主動事件和回調事件的處理一、前言二、控件在項目中使用

方式二:動态引入,在mounted中動态加載控件

vue項目加載OCX控件以及控件的主動事件和回調事件的處理一、前言二、控件在項目中使用

主動事件調用:這個地方和html頁面調用是一樣的,沒什麼差別

vue項目加載OCX控件以及控件的主動事件和回調事件的處理一、前言二、控件在項目中使用

回調事件:

回調事件的注冊有兩種方式:一種是監聽方式,一種是動态加載

監聽方式:

在mounted生命周期中使用attachEvent注冊回調事件,然後回調事件在methods中書寫接行了,但是addEventListener不行,監聽不到回調事件,且該方式隻适用于IE8-IE10

vue項目加載OCX控件以及控件的主動事件和回調事件的處理一、前言二、控件在項目中使用

動态加載:

和動态加載控件的方式一樣的,在mounted生命周期中實作:

注意的方式是:要把this儲存起來,才能調用到該方法

vue項目加載OCX控件以及控件的主動事件和回調事件的處理一、前言二、控件在項目中使用
vue項目加載OCX控件以及控件的主動事件和回調事件的處理一、前言二、控件在項目中使用

methods中接收回調狀态的函數:

vue項目加載OCX控件以及控件的主動事件和回調事件的處理一、前言二、控件在項目中使用