华视身份证读卡器获取uid号vue单文件组件版本
<template>
<div id="app" ref="app">
<object ref="CertCtl" classid="clsid:F48AE9BC-809E-423c-81E8-FE27F1C1A981"
id="CertCtl" name="CVR_IDCard" width="0" height="0" >
</object>
<h1>身份证阅读器usb接入测试页面</h1>
<button @click="connect">打开设备</button>
<button @click="readCert">采集身份证UID号</button>
<button @click="disconnect">关闭设备</button>
<div id="box">
<p>串口波特率</p>
<select id="SelectBaudrate" ref="SelectBaudrate">
<!-- <option value ="115200">115200</option> -->
<option value ="9600">9600</option>
</select>
</div>
<div id="box">
<p>证件</p>
<form id="formId" method="post" >
<input type="text" id="certUID" size="49" style="width:400px;" ref="certUID">
<button type="button" id="sendMessage" @click="sendMessage">保存身份证UID号</button>
</form>
</div>
<div id="box" style="display:none;">
<p>结果</p>
<textarea id="result" ref="result" rows="8" cols="47" style="width:400px;" readonly="readonly"></textarea>
</div>
</div>
</template>
<script>
export default{
name: 'UidCard',
// el: '#app',
// data() {
// return {}
// },
methods: {
// 方法函数
toJson(str) {
var obj = JSON.parse(str)
return obj
},
// 清空身份证uid框框
clearForm() {
// console.log()
this.$refs.certUID.value = ''
},
connect() { // 连接设备
console.log('我连接了')
this.clearForm()// 清空uid框
var CertCtl = this.$refs.CertCtl // 获取CertCtl控件
try {
var nBaudrate = this.$refs.SelectBaudrate.value
var result = CertCtl.connectDevice(nBaudrate)
this.$refs.result.value = result // textarea框的值
} catch (e) {
alert(e)
}
},
readCert() {
console.log('读身份证uid号')
var CertCtl = this.$refs.CertCtl // 获取CertCtl控件
var result = CertCtl.GetCardUid()// 获取控件方法
this.$refs.result.value = result // textarea框的值
var resultObj = this.toJson(result)
// Console.log('.............resultObj',resultObj)
if (resultObj.resultFlag == 0) {
this.$refs.certUID.value = resultObj.cardUid
}
try {
} catch (e) {
alert(e)
}
},
disconnect() {
console.log('断开连接')
this.clearForm()// 断开清空
var CertCtl = this.$refs.CertCtl // 获取CertCtl控件
try {
var result = CertCtl.disconnect()
this.$refs.result.value = result
} catch (e) {
alert(e)
}
},
sendMessage() {
console.log('保存身份证uid号')
if (this.$refs.certUID.value !== '') {
this.$emit('closeModule', this.$refs.certUID.value)
}
}
// sendMessage() {
// // var certUidValue=this.$refs.certUID.value//身份证uid号
// console.log('....this.$refs.certUID.value', this.$refs.certUID.value)
// }
},
mounted() {
this.$nextTick(
function() {
console.log('............uid', this.$refs.certUID.value)
console.log('获取CertCtl', this.$refs.CertCtl.classid)
}
)
}
}
</script>
使用的时候,把单文件组件当做子组件在父组件引用,通过子组件将获取的值传给父组件
华视身份证读卡器获取uid号vue单文件组件版本的更多相关文章
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- Vue单文件组件
前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...
- vue 单文件组件
在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- ts-loader如何与vue单文件组件衔接
.ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...
- 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生
第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...
- vue 单文件组件最佳实践
vue 单文件组件最佳实践 生命周期 template <template> <section> <h1>vue single file components te ...
- vue单文件组件的构建
在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...
- Vue单文件组件基础模板
背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...
随机推荐
- python socket的长连接和短连接
前言 socket中意为插座,属于进程间通信的一种方式.socket库隐藏了底层,让我们更好的专注于逻辑.如果短连接和长连接两概率没搞明白,会被坑的爬不起来. 短连接 一次完整的传输过程,发送方输出流 ...
- Bootstrap 网页2
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <me ...
- shell脚本编写nginx部署脚本
下面为shell脚本编写的nginx的安装及修改nginx.conf的脚本,脚本比较简单: #!/bin/bash function yum_install(){ yum install epel-r ...
- rabbitMQ初始化配置
用户管理添加用户# rabbitmqctl add_user username password删除用户# rabbitmqctl delete_user username修改密码# rabbitmq ...
- stat函数学习
stat函数组 前面介绍的通过ls命令查看到的文件信息,都可以使用stat函数组提取出来• stat函数组– 使用命令man stat查看相关文档• 函数int stat(const char *pa ...
- Docker Machine 管理-安装docker-machine(15)
前面我们的实验环境中只有一个 docker host,所有的容器都是运行在这一个 host 上的.但在真正的环境中会有多个 host,容器在这些 host 中启动.运行.停止和销毁,相关容器会通过网络 ...
- QTP学习笔记--define new test object
目前在测的系统里,有图片控件,图片源都是一样的,链接地址不同(链接地址是动态变化的,不适合作为属性). QTP的识别机制是根据Index来的,复制对象之后更改Index的属性方法无效,采用define ...
- 27. Unittest单元测试框架的介绍与使用
unittest单元测试框架 先贴一下unittest官网地址.unittest文档开头介绍了四个重要的概念:test fixture,test case, test suite, test runn ...
- C++构造函数异常(二)
继续上一篇文章提到的构造异常话题,下面继续谈另外两个场景,即多继承构造异常,以及智能指针构造异常 第3:对多继承当中,某个基类构造异常,而其他基类已构造成功,则构造成功的基类不会析构,由编译器负责回收 ...
- python学习笔记:操作数据库
1.下载安装模块 第一种:cmd下:执行命令下载安装:pip3 install pymysql 第二种:IDE下pycharm python环境路径下添加模块 2.连接数据库 import pymys ...