<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. python socket的长连接和短连接

    前言 socket中意为插座,属于进程间通信的一种方式.socket库隐藏了底层,让我们更好的专注于逻辑.如果短连接和长连接两概率没搞明白,会被坑的爬不起来. 短连接 一次完整的传输过程,发送方输出流 ...

  2. Bootstrap 网页2

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <me ...

  3. shell脚本编写nginx部署脚本

    下面为shell脚本编写的nginx的安装及修改nginx.conf的脚本,脚本比较简单: #!/bin/bash function yum_install(){ yum install epel-r ...

  4. rabbitMQ初始化配置

    用户管理添加用户# rabbitmqctl add_user username password删除用户# rabbitmqctl delete_user username修改密码# rabbitmq ...

  5. stat函数学习

    stat函数组 前面介绍的通过ls命令查看到的文件信息,都可以使用stat函数组提取出来• stat函数组– 使用命令man stat查看相关文档• 函数int stat(const char *pa ...

  6. Docker Machine 管理-安装docker-machine(15)

    前面我们的实验环境中只有一个 docker host,所有的容器都是运行在这一个 host 上的.但在真正的环境中会有多个 host,容器在这些 host 中启动.运行.停止和销毁,相关容器会通过网络 ...

  7. QTP学习笔记--define new test object

    目前在测的系统里,有图片控件,图片源都是一样的,链接地址不同(链接地址是动态变化的,不适合作为属性). QTP的识别机制是根据Index来的,复制对象之后更改Index的属性方法无效,采用define ...

  8. 27. Unittest单元测试框架的介绍与使用

    unittest单元测试框架 先贴一下unittest官网地址.unittest文档开头介绍了四个重要的概念:test fixture,test case, test suite, test runn ...

  9. C++构造函数异常(二)

    继续上一篇文章提到的构造异常话题,下面继续谈另外两个场景,即多继承构造异常,以及智能指针构造异常 第3:对多继承当中,某个基类构造异常,而其他基类已构造成功,则构造成功的基类不会析构,由编译器负责回收 ...

  10. python学习笔记:操作数据库

    1.下载安装模块 第一种:cmd下:执行命令下载安装:pip3 install pymysql 第二种:IDE下pycharm python环境路径下添加模块 2.连接数据库 import pymys ...