vue 项目集成active控件最近的项目里面有一项功能需要集成扫描仪，在安装了扫描仪驱动后，还需要在项目里面集成其Ac

最近的项目里面有一项功能需要集成扫描仪，在安装了扫描仪驱动后，还需要在项目里面集成其ActiveX控件，主要的问题就在于我需要扫描仪的某些方法加入一些其他操作。由于这个东西是不开源的，在Google上搜索良久，也看到很多人都在寻找办法，最后居然告诉我一个ActiveX控件和vue不能共存的结论，什么鬼？最后不得不请教公司大佬，现在把我的这个实现贴出来分享一下。

解决方案

在需要使用扫描仪的功能对应的组件上引入控件，并将其指定为全局对象，假设为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为你在项目中存放的控件地址。

在整个项目的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})指定对应的组件中的某个方法。

在scan.js中你就可以愉快的使用这个控件啦。示例：

methods: {
    initScan () {
        <!--使用this.$refs.scanObj获取该控件对象-->
        console.log('scanObj', this.$refs.scanObj)
    },
    onScan () {},
    onUpload () {}
}

待改进的地方：如果有多个地方需要用到扫描仪，且是在不同的组件中，处理起来就相对麻烦了。目前正在考虑如何解决这问题。