如何在vue中优雅的使用ocx控件：结合iframe

如果感觉ocx控件会破坏vue代码结构，写起来很别扭，我们可以使用iframe来封装ocx控件。

以串口控件为例，文件包括：serial.html和serial.vue

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>串口</title><script>var mscomm_scan_value = '';function MSComm1_OnComm() {if (MSComm1.CommEvent == 2) {mscomm_scan_value += MSComm1.Input;if (mscomm_scan_value.length === 13) {window.parent.postMessage({ type: 'ywlsh', msg: mscomm_scan_value }, '*');mscomm_scan_value = '';}}}//打开端口和关闭端口function OperatePort() {if (MSComm1.PortOpen == true) { //如果打开就关闭try {MSComm1.PortOpen = false;} catch (ex) {alert(ex.message);}} else { //打开串口try {MSComm1.PortOpen = true;} catch (ex) {alert(ex.message);}}}</script><script LANGUAGE=javascript FOR=MSComm1 EVENT=OnComm>MSComm1_OnComm();//串口事件</script>
</head><body onload="OperatePort()" onunload="OperatePort()"><OBJECT id="MSComm1" CLASSID="clsid:648A5600-2C6E-101B-82B6-000000000014" type="application/x-oleobject" width=0height=0><PARAM NAME="CommPort" VALUE="10" /><PARAM NAME="DataBits" VALUE="8" /><PARAM NAME="StopBits" VALUE="1" /><PARAM NAME="BaudRate" VALUE="9600" /><PARAM NAME="Settings" VALUE="9600,N,8,1" /><PARAM NAME="RTSEnable" VALUE="1" /><PARAM NAME="DTREnable" VALUE="1" /><PARAM NAME="Handshaking" VALUE="0" /><PARAM NAME="NullDiscard" VALUE="0" /><PARAM NAME="ParityReplace" VALUE="?" /><PARAM NAME="EOFEnable" VALUE="0" /><PARAM NAME="InputMode" VALUE="0" /><PARAM NAME="InBufferSize" VALUE="1024" /><PARAM NAME="InputLen" VALUE="0" /><PARAM NAME="OutBufferSize" VALUE="512" /><PARAM NAME="SThreshold" VALUE="0" /><PARAM NAME="RThreshold" VALUE="1" /></OBJECT>
</body></html>

<template><div><iframe frameBorder="no" src="serial.html"></iframe></div>
</template><script>
export default {mounted () {//绑定iframe事件消息window.addEventListener('message', this.iframeEvent)},destroyed () {//解绑iframe事件消息window.removeEventListener('message', this.iframeEvent)},methods: {iframeEvent (event) {if (event.data.type === 'ywlsh') {console.log(event.data.msg)window.removeEventListener('message', this.iframeEvent)}}}
}
</script>

iframe封装ocx控件就是通过addEventListener来和vue进行通信，这样也可以正常使用控件的事件。

下篇文章将介绍如何直接在vue中绑定ocx控件的事件。

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

如何在vue中优雅的使用ocx控件：控件引用
最近刚好在做一个自助机项目,限于个人技术栈,也是为了后期更新维护方便,采用了BS的形式来开发. 自助机需要控制摄像头.身份证读卡器.扫描仪.手写签名等硬件,目前只有IE的ocx控件可以提供比较好的支持 ...
如何在PB中调用 Microsoft WEB 浏览器控件？
PB中使用Microsoft Web Browser控件步骤: 在pb的某窗口中加入OLE对象,选择Insert control(插入控件),然后选中"Microsoft WEB 浏览器&q ...
如何在XAF中显示自定义窗体和控件
https://www.devexpress.com/Support/Center/Example/Details/E911
VS2010下ocx开发：（2）在C#程序中调用ocx控件
在本文中,给出一个C#示例程序,调用上一篇博文中创建的MultiplyDemo.ocx控件.注意需要保证该控件已经注册过. 启动Visual Studio 2010,使用C#创建一个Windows窗体 ...
[转]C#开发ActiveX控件,.NET开发OCX控件案例
引自:百度 http://hi.baidu.com/yanzuoguang/blog/item/fe11974edf52873aaec3ab42.html 讲下什么是ActiveX控件,到底有什么 ...
Visual Studio开发MFC项目OCX控件添加使用控件方法
1.在Windows系统中注册OCX控件在OCX控件目录,右键新建一个文本文档,将文件名和扩展名改为"双击注册.bat",添加如下注册脚本: cd /d %~dp0 RegSvr ...
【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 ...

如何在vue中优雅的使用ocx控件：结合iframe

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

最新文章

热门文章