首页 > 其他分享 >vue扫码功能

vue扫码功能

时间:2023-10-20 15:58:05浏览次数:38  
标签:控件 扫码 vue return scan 功能 plus result type

直接写到组件里面,使用组件传值返回数据   <template>  <div class="scan">     <div id="bcid">       <div style="height:40%"></div>       <p class="tip">...载入中...</p>     </div>     <footer>       <button @click="startRecognize">1.创建控件</button>       <button @click="startScan">2.开始扫描</button>       <button @click="cancelScan">3.结束扫描</button>
      <button @click="closeScan">4.关闭控件</button>     </footer>   </div> </template>
<script type='text/ecmascript-6'>   let scan = null
  export default {     data () {       return {         codeUrl: '',       }     },     methods: {       // 创建扫描控件       startRecognize () {         let that = this         if (!window.plus) return         scan = new plus.barcode.Barcode('bcid')         scan.onmarked = onmarked
        function onmarked (type, result, file) {           switch (type) {             case plus.barcode.QR:               type = 'QR'               break             case plus.barcode.EAN13:               type = 'EAN13'               break             case plus.barcode.EAN8:               type = 'EAN8'               break             default:               type = '其它' + type               break           }           result = result.replace(/\n/g, '')           that.codeUrl = result           that.$message.warning("开发中",result);           alert(result)           that.closeScan()
        }       },       // 开始扫描       startScan () {         if (!window.plus) return         scan.start()         console.log('1')       },       // 关闭扫描       cancelScan () {         if (!window.plus) return         scan.cancel()       },       // 关闭条码识别控件       closeScan () {         if (!window.plus) return         scan.close()       },     }   } </script> <style lang="less">   .scan {     height: 100%;
    #bcid {       width: 100%;       position: absolute;       left: 0;       right: 0;       top: 0;       bottom: 3rem;       text-align: center;       color: #fff;       background: #ccc;     }
    footer {       position: absolute;       left: 0;       bottom: 1rem;       height: 2rem;       line-height: 2rem;       z-index: 2;     }   } </style>

标签:控件,扫码,vue,return,scan,功能,plus,result,type
From: https://www.cnblogs.com/shuhan-hou/p/17777268.html

相关文章

  • ASP.net百度主动推送功能实现
    百度站长提供了curl、post、php、ruby的实现示例,并没有C#的官方示例。既然提供了post的方式,那么就可以用C#实现,下面是实现代码:ASP.net百度主动推送代码范例publicstaticstringPostUrl(string[]urls){try{stringformUrl="http://......
  • vue3 hooks使用watch监听注意事项
    当我们再vue3写了一个通用hooks的里面使用watch来执行某些操作要注意!!!一个页面只能再根路由去创建实例,也就是调用对呀hooks,如果子路由也需要使用则由根路由provide()子路由inject,如果子路由都创建实例,会造成多次执行监听例如我们由一个useSearch,来写通用搜索逻辑,在该hooks......
  • android 友盟SNS_SDK为Android应用加入SNS分享、同步功能
    使用友盟SNS_SDK为Android应用加入SNS分享、同步功能很多朋友在开发Android应用的过程中,都想加入社会化的分享功能,如将自己的应用使用状态或心得同步到新浪微博、人人网或腾讯微博等。这些社交网络或微博都已经发布了针对开发者的开放平台(关于开放平台的相关信息,请参考《说说微......
  • 如何在Vuex中处理异步操作?
    在Vuex中处理异步操作,可以使用actions来执行异步操作并更新状态。一个处理异步操作的示例:在Vuex的store中定义一个actions对象,其中包含处理异步操作的方法。conststore=newVuex.Store({state:{//状态数据},mutations:{//同步更新状态的方法},acti......
  • RIS/PACS系统源码 智能化的影像报告系统,三维影像处理功能
    影像科室信息管理系统源码 RIS/PACS系统源码 PACS三维影像处理系统源码影像科室信息管理系统,它包括RIS系统、PACS工作站和PACS服务器系统。提供强大的结构和智能化的影像报告系统、支持各种图象操作,以及实现图像的路由、预取、多级多层次存储。系统特点适用于各类体检中心,门诊部......
  • 公司oa是什么?一般公司oa有什么样功能?
    公司OA(OfficeAutomation)是指通过计算机和信息技术来实现办公自动化的系统。它提供了一系列的功能和工具,用于协调、管理和处理公司内部的日常事务和流程。OA系统旨在提高工作效率、加强信息交流与共享、简化业务流程,并提供便捷的办公环境。以下是对公司OA的详细介绍,包括一般功能和......
  • 疾病诱导的植物微生物组装与功能适应的变化
    Disease-inducedchangesinplantmicrobiomeassemblyandfunctionaladaptationGaoetal.Microbiome(2021)9:187https://doi.org/10.1186/s40168-021-01138-2MinGao1,2,ChaoXiong3,ChengGao1,2,ClementK.M.Tsui4,5,6,Meng-MengWang1,2,XinZhou1,2,Ai-Mi......
  • vue引入图片
    (1).data()中引入:icon:require('@/assets/images/modules-a5.png')icon:require('../../assets/images/modules-picture.png')(2).style中引入:background:url(../../assets/images/entry-icon.png)00no-repeat;(3).html中引入:<imgsrc="@/as......
  • Mesa 23.2 带来了 Asahi 平台上的 OpenGL 3.1 和 OpenGL ES 3.0 支持,新增 RADV 功能
    导读这个版本还为RADV驱动器引入了新的Vulkan扩展以及为许多游戏进行了改进。Mesa23.2开源图形堆栈是Mesa23系列的第二个主要版本,为AMDGPU的RADVVulkan驱动器、改进的 Linux 游戏以及新的Asahi功能带来了新功能。Mesa23.2的亮点包括Asahi平台上......
  • vue 基础学习 一
    1.vue使用快速入门三步走(1) 新建HTML页面,引入Vue.js文件<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Vue.js入门示例</title><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><......