Vue框架下引入ActiveX控件的問題

最近參與了山東某一公司的呼叫中心繫統的開發項目，我負責的模塊是在公司已有的前端Vue框架下集成他們的軟電話條功能。
從開始到結束所遇到的幾個問題以下：
1.如何將ActiveX控件引入Vue，而且在頁面上成功渲染；
2.如何調用ActiveX已提供的方法；
3.如何監聽ActiveX的動做；
  （注：以上問題在html的文件裏不存在）
咱們先來看下第一個問題：如何將ActiveX控件引入Vue，而且在頁面上成功渲染。
如何將ActiveX控件渲染到頁面上。根據客戶開發人員提供的demo，`<object id="" classid="" width="100%"></object>`拷貝到vue文件中，如圖所示

。

yarn run dev，運行成功，可是頁面空出很大一塊空白區域，很顯然，沒有渲染成功。通過查詢，ActiveX控件只支持在IE瀏覽器下使用（有點坑）


這算是解決了第一個問題，一樣，小夥伴能夠經過動態生成的方式渲染到頁面上，代碼以下：

let obj = document.createElement('object')
obj.setAttribute('id', 'activex')
obj.setAttribute('classid', 'clsid:{控件id}')
obj.setAttribute('width', 1500)
obj.setAttribute('height', 100)
var _obj = document.getElementById("要渲染的節點");
_obj.appendChild(obj)

接下來咱們來看第二個問題：如何調用ActiveX已提供的方法。
渲染是能夠了，可是卻沒法調用控件提供的方法。根據demo：`softphonecontrol.MakeCall(paramsItem)`，沒法執行，後來又採起嵌入iframe方式（還記得
剛剛說的嗎，這個控件在單純的html頁面沒有任何問題，固然前提是IE瀏覽器）。最終找到緣由，IE的瀏覽器須要作下設置
設置：設置-Internet選項-安全/自定義級別-Active控件和插件-對未標記爲可安全執行腳本的ActiveX控件初始化並執行腳本，選擇"啓用"或者"提示"）


最後一個問題啦：如何監聽ActiveX的動做。
根據demo：

<script   for= "softphonecontrol"   event= "OnLogRingUp(param1，param2)"   language= "javascript"> 
 alert("param1:"+param1+" "+"param2:"+param2); 
</script>

再次提醒一下，這種寫法也只有IE支持，谷歌支持一些簡單的window.reload、onclick之類的方法，<script></script>中間的alert就是監聽後續須要作的事情。
我將這段代碼直接拷貝到vue文件裏：

哈哈，成功編譯，可是沒法監聽到。換個思路，動態渲染到根節點呢，像上面提到的：

initRingUpSript:function(){
       var ring = document.createElement("script");
       ring.setAttribute("for","softphonecontrol");
       ring.event="OnLogRingUp(Call_ID,CORP_CODE)";  
       ring.appendChild(document.createTextNode("phoneListener.ringUp(Call_ID,CORP_CODE)"))
       document.body.appendChild(ring)
     },

值得注意的是：此方法會將<script>function</script>渲染到頁面上，可是想執行Vue的methods的方法的話，還須要在mounted里加上一句代碼： window.phoneListener = this;
這段代碼的做用是將Vue的this所指向賦值給全局的變量phoneListener，這個變量，可隨意。
大功告成！
參考連接以下：vue 接入activex控件