如何在vue中优雅的使用ocx控件：控件引用

最近刚好在做一个自助机项目，限于个人技术栈，也是为了后期更新维护方便，采用了BS的形式来开发。

自助机需要控制摄像头、身份证读卡器、扫描仪、手写签名等硬件，目前只有IE的ocx控件可以提供比较好的支持，所以客户端浏览器定为IE。之前主要是用vue和element-ui来写管理后端，怎么将vue和ocx结合使用是一个全新的课题。在一通百度之后，发现网上并没有完整的例子，于是自己一番折腾，终于可以比较优雅的在vue中使用ocx了。

问题一：控件如何引用

在传统项目中，ocx控件都是以object标签的形式插入到页面，只能加载一次，但是vue的页面是动态添加和删除的，所以object标签是适合放置在vue的组件中的。最好的做法是直接将object标签添加到 index.html，这样就可以避免控件加载问题。

<!DOCTYPE html>
<html lang="en"><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"><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中优雅的使用ocx控件：控件引用相关推荐

如何在vue中优雅的使用ocx控件：结合iframe
如果感觉ocx控件会破坏vue代码结构,写起来很别扭,我们可以使用iframe来封装ocx控件. 以串口控件为例,文件包括:serial.html和serial.vue <!DOCTYPE ht ...
【vue.js开发】如何在vue里面优雅的解决跨域，路由冲突问题
[vue.js开发]如何在vue里面优雅的解决跨域,路由冲突问题当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: {'/goods/*': {target: 'http://l ...
easyswoole数据库连接池_如何在 Swoole 中优雅的实现 MySQL 连接池
如何在 Swoole 中优雅的实现 MySQL 连接池一.为什么需要连接池 ? 数据库连接池指的是程序和数据库之间保持一定数量的连接不断开, 并且各个请求的连接可以相互复用, 减少重复连接数据库带来 ...
vue 递归创建菜单_如何在Vue中创建类似中等的突出显示菜单
vue 递归创建菜单 by Taha Shashtari 由Taha Shashtari 如何在Vue中创建类似中等的突出显示菜单 (How to Create a Medium-Like Highl ...
如何在MyBatis中优雅的使用枚举
From: https://segmentfault.com/a/1190000010755321 问题在编码过程中,经常会遇到用某个数值来表示某种状态.类型或者阶段的情况,比如有这样一个枚举: p ...
如何在vscode中优雅的编写C语言
如何在vscode中优雅的编写C语言各位好,我认为vscode编辑器在windows环境下除了Pycharm外是最方便的IDE了,但在初学C语言时很少有人的第一个C语言软件使用的是vscode来编译 ...
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
本文首发:<如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表> 使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功 ...
如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
本文首发:<如何在 Vue 中导出数据至 Excel 表格 - 卡拉云> 我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ,方便我们将数据共享给其他同学或在 ...
骨架屏技术讲解以及如何在Vue中实现骨架屏
骨架屏技术讲解以及如何在Vue中实现骨架屏写在前面骨架屏是什么如何实现(原理分析) 一个生动的例子实现方式(具体实现) 方案一.在模版中来实现骨架屏方案二.使用一个Base64的图片来作为骨 ...

如何在vue中优雅的使用ocx控件：控件引用

如何在vue中优雅的使用ocx控件：控件引用相关推荐

最新文章

热门文章