华视身份证读卡器获取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文件拷贝到新项目中 我暂时就想到这两点, ...
随机推荐
- js 判断表单是否为空和是否是有效数字
判断是否为空和是否是有效数字 <s:form name='form' onsubmit="return myCheck()" method="post" ...
- C++ 字符串截取转换及字符流控制
文章由来 ------------------工作需要缓冲区里的字符串控制,还是混合编译的那种,根据协议来定义截取各种字符流,控制大小长度,截取返回的内容然后转换成特定的类型, 可能表述不是那么正确, ...
- jsp 锚定位的方式
//js定位方式1 document.getElementById('id').scrollIntoView(); //jquery定位方式 var t = $('#id').offset().top ...
- 如何在Mac上将视频刻录到DVD / ISO文件
如果您希望将喜爱的视频转换为DVD / Blu-ray光盘以进行物理备份或播放,则Mac版Wondershare UniConverter可以专业地完成任务.今天的教程就是如何在Mac上轻松刻录DVD ...
- 78 Ranking SVM
0 引言 Ranking-SVM是SVM的一个变种,通过将排序问题转化为二分类问题,并利用标签数据训练特征权重收敛得到特征模型,完成排序任务,是比较经典的机器学习排序算法. 1 中文版介绍 https ...
- [CSP-S模拟测试]:卡常题/b(基环树+DP)
题目描述 $ρ$有一个二分连通无向图,$X$方点.$Y$方点均为$n$个(编号为$1\sim n$).这个二分图比较特殊,每一个$Y$方点的度为$2$,一条黑色边,一条白色边.所有黑色边权值均为$a$ ...
- angular-cli项目报Error encountered resolving symbol values statically. Function calls are not supported.错误的处理。
安装同事打包的一个模块,报了这么个错,不过在其他地方使用是正常的. Error encountered resolving symbol values statically. Function cal ...
- tcp和udp得区别
TCP(Transmission Control Protocol 传输控制协议)是一种面向连接的.可靠的.基于字节流的传输层通信协议 UDP 是User Datagram Protocol,即 用户 ...
- GIL - global interpreter lock
python是一个解释型语言,但是可以使用多个解释器.比如C++,但是可以用不同的编译器来编译成可执行代码.有名的编译器例如GCC,INTEL C++,Visual C++等.Python也一样,同样 ...
- 解决ubuntu 18更换wifi vnc 连接不了的问题
解决ubuntu 18更换wifi vnc 连接不了的问题 问题: ubuntu18上更换了wifi热点,windows上的vnc连接不上. 解决方法: 1.ubuntu18系统上执行“共享”——“屏 ...