<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单文件组件版本的更多相关文章

  1. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  2. Vue单文件组件

    前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...

  3. vue 单文件组件

    在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...

  4. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  5. ts-loader如何与vue单文件组件衔接

    .ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...

  6. 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生

    第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...

  7. vue 单文件组件最佳实践

    vue 单文件组件最佳实践 生命周期 template <template> <section> <h1>vue single file components te ...

  8. vue单文件组件的构建

    在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...

  9. Vue单文件组件基础模板

    背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...

随机推荐

  1. linux c 链接详解4-共享库

    4. 共享库 4.1. 编译.链接.运行 组成共享库的目标文件和一般的目标文件有所不同,在编译时要加-fPIC选项,例如: $ gcc -c -fPIC stack/stack.c stack/pus ...

  2. ubuntu服务器端使用无界面selenium+ chrome + headless

    本来想直接用Ubuntu系统里面的firefox来实现selenium自动操作签到的,但是总是出各种问题.没办法,改为Chrome.参考:Ubuntu 线上无界面服务器 使用selenium chro ...

  3. Rectangle类详解

    一,概括: 乍一看,可能感觉是一个矩形类,矩形类就是画一个长方形吗??这是我一开始见到这个类的感觉. 其实不是的Rectangle是一个“区域”类,它的最大作用就是定义一个矩形的区域,如果问为什么是矩 ...

  4. SQL Join连接

    SQL 连接(Joins) SQL join 用于把来自两个或多个表的行结合起来. SQL JOIN SQL JOIN 子句用于把来自两个或多个表的行结合起来,基于这些表之间的共同字段. 最常见的 J ...

  5. 【CSS】position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  6. c#如何写服务,打包和卸载服务

    Service.cs  每隔一分钟进行一次数据操作 public Service1()        {            InitializeComponent();            Sy ...

  7. Spring Boot 报错记录

    Spring Boot 报错记录 由于新建的项目没有配置数据库连接启动报错,可以通过取消自动数据源自动配置来解决 解决方案1: @SpringBootApplication(exclude = Dat ...

  8. Linux的文件访问权限及修改权限命令chmod

    http://www.linuxso.com/command/chmod.html Linux的文件访问权限及修改权限命令chmod Mxx000 Mxx000 人赞同了该文章 Linux的文件访问权 ...

  9. Hexo next 添加复制粘贴代码的功能

    文章目录 广告: 自己的方式 感谢 广告: 本人博客地址:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io ...

  10. Java封装JDBC数据库增、删、改、查操作成JAR文件,以供Web工程调用,适用于多种数据库

    废话不多说,直接上源代码,最后有使用方法,当然,也可以作为普通公用类使用,只是封装成JAR更方便使用. package db.util; import java.io.BufferedReader; ...