vue 專案整合active控制元件

Miss木不發表於2019-01-11
Vue控制元件

最近的專案裡面有一項功能需要整合掃描器，在安裝了掃描器驅動後，還需要在專案裡面整合其ActiveX控制元件，主要的問題就在於我需要掃描器的某些方法加入一些其他操作。由於這個東西是不開源的，在Google上搜尋良久，也看到很多人都在尋找辦法，最後居然告訴我一個ActiveX控制元件和vue不能共存的結論，什麼鬼？最後不得不請教公司大佬，現在把我的這個實現貼出來分享一下。

解決方案

  1. 在需要使用掃描器的功能對應的元件上引入控制元件，並將其指定為全域性物件，假設為scan.js：
let modelue = {
    name: 'scan',
    template: `...
    <div style="display: none">
        <object id="ScanObj" classid="clsid:xxxx" codebase="xxx" width="0" height="0" ref="ScanObj">
        </object>
    </div>
    ...
    `
    data () {},
    methods: {},
    created() {
        <!--在created中將該例項指定為全域性物件。-->
        window.scan = this
    }
}
export default module
    
複製程式碼

其中，classid為控制元件對應的clsid，codebase為你在專案中存放的控制元件地址。

  1. 在整個專案的index.html中引入控制元件，對應的寫法為：
<script language='javascript' for="ScanObj" event="OnScan(id, name)">
  window.scan.onScan({id: id, name: name});
</script>
<script language='javascript' for="ScanObj" event="OnUploadOver()">
  window.scan.onUpload();
</script>
複製程式碼

其中， for="ScanObj"的內容必須與1中定義的object的id一致，event為掃描器控制元件自帶的方法，window.scan.onScan({id: id, name: name})指定對應的元件中的某個方法。

  1. 在scan.js中你就可以愉快的使用這個控制元件啦。 示例：
methods: {
    initScan () {
        <!--使用this.$refs.scanObj獲取該控制元件物件-->
        console.log('scanObj', this.$refs.scanObj)
    },
    onScan () {},
    onUpload () {}
}
複製程式碼

待改進的地方： 如果有多個地方需要用到掃描器，且是在不同的元件中，處理起來就相對麻煩了。目前正在考慮如何解決這問題。

相關文章