华视身份证读卡器获取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文件拷贝到新项目中 我暂时就想到这两点, ...
随机推荐
- linux c 链接详解4-共享库
4. 共享库 4.1. 编译.链接.运行 组成共享库的目标文件和一般的目标文件有所不同,在编译时要加-fPIC选项,例如: $ gcc -c -fPIC stack/stack.c stack/pus ...
- ubuntu服务器端使用无界面selenium+ chrome + headless
本来想直接用Ubuntu系统里面的firefox来实现selenium自动操作签到的,但是总是出各种问题.没办法,改为Chrome.参考:Ubuntu 线上无界面服务器 使用selenium chro ...
- Rectangle类详解
一,概括: 乍一看,可能感觉是一个矩形类,矩形类就是画一个长方形吗??这是我一开始见到这个类的感觉. 其实不是的Rectangle是一个“区域”类,它的最大作用就是定义一个矩形的区域,如果问为什么是矩 ...
- SQL Join连接
SQL 连接(Joins) SQL join 用于把来自两个或多个表的行结合起来. SQL JOIN SQL JOIN 子句用于把来自两个或多个表的行结合起来,基于这些表之间的共同字段. 最常见的 J ...
- 【CSS】position(定位)属性
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...
- c#如何写服务,打包和卸载服务
Service.cs 每隔一分钟进行一次数据操作 public Service1() { InitializeComponent(); Sy ...
- Spring Boot 报错记录
Spring Boot 报错记录 由于新建的项目没有配置数据库连接启动报错,可以通过取消自动数据源自动配置来解决 解决方案1: @SpringBootApplication(exclude = Dat ...
- Linux的文件访问权限及修改权限命令chmod
http://www.linuxso.com/command/chmod.html Linux的文件访问权限及修改权限命令chmod Mxx000 Mxx000 人赞同了该文章 Linux的文件访问权 ...
- Hexo next 添加复制粘贴代码的功能
文章目录 广告: 自己的方式 感谢 广告: 本人博客地址:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io ...
- Java封装JDBC数据库增、删、改、查操作成JAR文件,以供Web工程调用,适用于多种数据库
废话不多说,直接上源代码,最后有使用方法,当然,也可以作为普通公用类使用,只是封装成JAR更方便使用. package db.util; import java.io.BufferedReader; ...