最近剛好在做一個自助機項目，限于個人技術棧，也是為了後期更新維護友善，采用了BS的形式來開發。
自助機需要控制攝像頭、身份證讀卡器、掃描器、手寫簽名等硬體，目前隻有IE的ocx控件可以提供比較好的支援，是以用戶端浏覽器定為IE。之前主要是用vue和element-ui來寫管理後端，怎麼将vue和ocx結合使用是一個全新的課題。在一通百度之後，發現網上并沒有完整的例子，于是自己一番折騰，終于可以比較優雅的在vue中使用ocx了。
問題一：控件如何引用
在傳統項目中，ocx控件都是以object标簽的形式插入到頁面，隻能加載一次，但是vue的頁面是動态添加和删除的，是以object标簽是适合放置在vue的元件中的。最好的做法是直接将object标簽添加到 index.html，這樣就可以避免控件加載問題。
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=10">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico" target="_blank" rel="external nofollow" >
<title>xx系統</title>
</head>
<body>
<div id="app"></div>
<object id="CVR_IDCard" classid="clsid:10946843-7507-44FE-ACE8-2B3483D179B7" width="0" height="0"></object>
</body>
</html>
問題二：vue中怎麼使用ocx對象
這個問題相對簡單，直接使用 window.obj，或者直接通過id擷取 document.getElementById('CVR_IDCard')，這兩種方式都不會提示文法錯誤。個人更傾向于方式2，除了可以使用控件的方法，還能友善的改變控件樣式。
// 方式 1
window.CVR_IDCard
//方式 2
document.getElementById('CVR_IDCard')
後面還有如何使用結合iframe使用ocx、怎麼在vue中綁定控件事件。
![vue時間段選擇器實作的功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)