首页 > 其他分享 >关于H5扫描二维码方式(plus)

关于H5扫描二维码方式(plus)

时间:2023-06-30 17:36:21浏览次数:39  
标签:扫码 self barcode H5 二维码 plus 关闭

本文使用了HTML5+API Reference (参考地址:https://www.html5plus.org/doc/zh_cn/barcode.html#plus.barcode.getBarcodeById)

代码示例

new Vue({
        el: "#list",
        data: { 
            text: '', 
            barcode: null,
    },
methods: {
        //关闭扫码
        closeBarcode() {
        this.barcode.close();
        this.barcode = null;
        },
        //扫码识别错误事件
        one rror(error) {
        var self = this;
        mui.alert("识别二维码异常,请确认后重试", "温馨提示", function () {
        self.closeBarcode();
        });
        },
        //扫码成功事件 type 当前扫描条码类型数值,二维码为0 code 扫描结果
        onmarked(type, code) {
        var self = this; 
        self.text= code;
        self.closeBarcode();
        },
        // 创建Barcode扫码控件
        createBarcode() {
        var self = this;
        if (!self.barcode) {
        self.barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
        top: '80px',//本来是0px  占用整个页面,但是没有关闭按钮,所以往下调整80像素,在html页面写了一个关闭按钮,调用关闭扫码事件
        left: '0px',
        width: '100%',
        height: '100%',//默认100%
        position: 'static',
        frameColor: '#33d5ac',//扫码框颜色
        scanbarColor: '#33d5ac',//扫码动画颜色
        });
        plus.webview.currentWebview().append(self.barcode);
        }
        self.barcode.start();
        //回调函数
        self.barcode.onmarked = self.onmarked;
        self.barcode.onerror = self.onerror;
        }, 

    },

    }
})

该方法没有关闭或者返回按钮

我在页面写了一层遮罩 ,加了一个关闭按钮

<div v-if="barcode!=null" class="mui-backdrop" style="z-index: 9999; background-color: #000;">
  <span class="close-scan mui-icon mui-icon-closeempty" v-on:click="closeBarcode"></span>
</div>

 

标签:扫码,self,barcode,H5,二维码,plus,关闭
From: https://www.cnblogs.com/myWBlogs/p/17517397.html

相关文章

  • DataSecurity Plus金融行业案例
    摘要:DataSecurityPlus是一款强大的数据安全解决方案,为金融机构提供全面的数据保护和合规性监控。本文将介绍DataSecurityPlus在金融行业的使用案例,包括文件审计、数据分类和合规性报告等功能的应用。DataSecurityPlus文件审计:金融机构处理大量的客户数据和财务信息,因此对文件的......
  • 校园APP小程序H5,免费源码,允许二开。
    点击查看免费完整源码,允许二开50% { transform: scale(0.3); -webkit-transform: scale(0.3); opacity: 0.3; } 75% { transform: scale(0.5); -webkit-transform: scale(0.5); opacity: 0.5; } 100% { transform: scale(0.8); -webkit-transform: scale(0.8); ......
  • Element-plus的徽章组件el-badge
    Element-plus的徽章组件el-badgeElementPlus是一个基于Vue.js的UI组件库,它提供了一系列的常用UI组件供开发者使用。其中,徽章组件(el-badge)是其中之一。徽章组件(el-badge)可以在其他元素上展示一个小圆点或者一个数字,用于标记某种状态或者数量。徽章可以用于通知用户有......
  • mybatis-plus框架配合数据库表时间字段自动更新问题
    背景在项目开发前的设计阶段,我们会根据需求分析、业务梳理的结果进行领域建模。通常有2种方式:实体设计优先数据库设计优先无论哪种方式,最终会创建数据库、数据表。通常在每一张表,会设计2个时间自动,创建时间和修改时间,这样在查询数据时能够清晰的看到数据行是什么时候创建......
  • HTML5(三)H5新增标签
    H5之前,使用div容器元素进行页面定义布局```<divid="header"></div><divid="nav"></div><divid="article"><divid="section"></div></div><divid="aside"></div><d......
  • Vue3+Element-Plus安装及模拟增删改查
    软件安装:nodejs16https://nodejs.org/download/release/v16.20.0/将npm设置为淘宝镜像:npmconfigsetregistryhttps://registry.npm.taobao.org 创建vue3项目:npminitvue@latestEleement-Plushttps://element-plus.gitee.io/zh-CN/安装:npminstallelement-......
  • 记录pc网站微信登录(内嵌二维码方式)
    官方文档地址:https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html第一步:引入官方js  http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js或者把js下载下来放到自己项目里引用 好处是可以自己修改一些东西!(functio......
  • mybatisplus跨库操作和@Transactional一起使用的问题
    1、当方法使用了@Transactional注解,mybatisplus切换库之前已经有对当前库进行操作的话,切库将不成功;2、当方法使用了@Transactional注解,mybatisplus切换库之前没有对当前库进行操作的话,切库成功,但是@Transactional注解好像没有生效,操作报异常之后上一个操作没有回退;......
  • 使用element-plus的el-pagination分页组件的时候怎么换中文?
    element里面的分页是英文版的,但是项目需求是要中文的,可以用el-config-provider(切换系统语言)全局的配置选项,有locale属性,用来切换语言包做法如下:在main.js引入对应的包,代码如下:1import'normalize.css/normalize.css'2importElementPlusfrom'element-plus'3import'......
  • 2023-06-28 小程序、h5、App各端的条件编译
    //表示代码仅在H5平台上面执行,其他平台不执行<!--#ifdefH5-->需条件编译的代码<!--#endif-->//表示代码在H5平台上面不执行,其他平台上面执行<!--#ifndefH5-->需条件编译的代码<!--#endif-->//表示代码在H5平台和App......