1.前言

  • 该组件依赖qrcode.js与element-ui
  • 支持二维码大小配置，点击大图预览
  • 该组件以vue文件形式进行封装，需要配置httpVueLoader插件进行引入，其他格式请自行更改源码

2.使用方法

  • 引入依赖
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" rel="stylesheet">


<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

<script src="https://unpkg.com/http-vue-loader"></script>
  • 引入组件(这里使用httpVueLoader进行引入)
<script>

    new Vue({

        el:"#app",

        data: {

            qrcode: "你好"

        },

        components:{

            'ep-qrcode': httpVueLoader('./ep-qrcode.vue'),//二维码组件

        },

    })

</script>
  • 进行渲染
<body>

    <div id="app" v-cloak>

       <ep-qrcode :text="qrcode"></ep-qrcode>

    </div>

</body>

3.配置项列表

参数 默认值 必填 说明
text 请传入二维码的值 是 支持数字和字符串
size 20 否 二维码的大小
preview false 否 是否支持点击大图预览
preview_size 256 否 大图预览时二维码的大小

4.qrcode.js基本使用

  • 创建实例，传入Dom和其他参数进行初次渲染
this.instance = new QRCode(DOM, {

    text: '二维码内容',

    width: 200,

    height: 200,

    colorDark : "#000000",

    colorLight : "#ffffff",

    correctLevel : QRCode.CorrectLevel.H

})
  • 更新二维码
//清空原二维码

this.instance.clear()

//渲染新二维码

this.instance.makeCode(newVal)

5.大图预览的技巧

  • 通常情况下的大图预览，都是点击element-ui的el-image组件自动完成的，但是有些情形下图片没有通过el-image进行渲染，就无法按element-ui的方式进行预览
  • 可以渲染一个el-image，传入要预览的图片URL，再设为隐藏状态，当要预览目标图片时，更新el-image组件的src地址，并且调用特定方法，模拟点击事件
<!-- 图片预览 -->

        <div style="display: none;">

            <el-image

            ref="preview_image"

              style="width: 100px; height: 100px"

              :src="preview_image"

              :preview-src-list="[preview_image]">

            </el-image>

        </div>


//更新要预览的图片地址

this.preview_image = "要预览的图片地址"

//触发预览

this.$refs.preview_image.clickHandler()

6.源码及思路

  • 通过组件形式接收参数，调用qrcode.js进行二维码渲染
  • 大图预览：先调用qrcode.js进行大图渲染获取base64地址，再调用element-ui的图片组件进行预览
  • 源码
<template>

    <div class="ep-qrcode-wrap">

        <!-- 小图 -->

        <div ref="qrcode" :class="{'can-preview': preview}" @click="onClick" class="qrcode-box">

        </div>

        <!-- 预览图 -->

        <div ref="qrcode_preview" style="display: none;">

        </div>

        <!-- 图片预览 -->

        <div style="display: none;">

            <el-image

            ref="preview_image"

              style="width: 100px; height: 100px"

              :src="preview_image"

              :preview-src-list="[preview_image]">

            </el-image>

        </div>

    </div>

</template>

<script>

module.exports = {

    data(){

        return {

            instance: null,//实例

            instance2: null,//实例

            preview_image: "",//预览图地址

        }

    },

    mounted(){

        //渲染二维码（默认图）

        this.instance = new QRCode(this.$refs.qrcode, {

            text: this.text + '',

            width: this.size,

            height: this.size,

            colorDark : "#000000",

            colorLight : "#ffffff",

            correctLevel : QRCode.CorrectLevel.H

        })

        //渲染二维码（预览图）

        if(this.preview){

            this.instance2 = new QRCode(this.$refs.qrcode_preview, {

                text: this.text + '',

                width: this.preview_size,

                height: this.preview_size,

                colorDark : "#000000",

                colorLight : "#ffffff",

                correctLevel : QRCode.CorrectLevel.H

            })

        }

    },

    watch:{

        //监听watch

        text(newVal,oldVal){

            //清空原二维码

            this.instance.clear()

            //渲染新二维码

            this.instance.makeCode(newVal)

            //更新大图

            if(this.preview){

                //清空原二维码

                this.instance2.clear()

                //渲染新二维码

                this.instance2.makeCode(newVal)

            }

        }

    },

    props:{

        //二维码的值

        text:{

            type: [String,Number],

            default: "请传入二维码的值"

        },

        //默认的二维码大小

        size: {

            type: Number,

            default: 20

        },

        //是否支持点击大图预览

        preview: {

            type:Boolean,

            default: false

        },

        //点击大图预览的二维码大小

        preview_size: {

            type: Number,

            default: 256

        },

    },

    methods:{

        onClick(){

            //未开启预览，直接返回

            if(!this.preview) return

            //获取图片地址

            this.preview_image = this.instance2._el.children[1].src

            //触发预览

            this.$refs.preview_image.clickHandler()

        }

    }

}

</script>

<style scoped>

    .ep-qrcode-wrap .qrcode-box > img{

        display: inline-block !important;

    }

    .ep-qrcode-wrap .can-preview{

        cursor: pointer;

    }

</style>

Vue 二维码组件的更多相关文章

  1. Vue 二维码生成插件

    1. 安装 qrcode.vue 仓库地址 // vue2 安装1.x版本.vue3 安装3.x版本 npm install --save qrcode.vue // 或 yarn add qrcod ...

  2. .Net Core上也可以使用的二维码组件

    我Fork了QRCoder,并且兼容了.Net Core,图形库用的是ZKWeb.System.Drawing Github: https://github.com/zkweb-framework/Q ...

  3. vue2.0 自定义 生成二维码（QRCode）组件

    1.自定义 生成二维码组件 QRCode.vue <!-- 生成二维码 组件 --> <template> <canvas class="qrcode-canv ...

  4. 基于Metronic的Bootstrap开发框架经验总结（14）--条码和二维码的生成及打印处理

    在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理 ...

  5. js动态生成二维码

    一.使用jquery.qrcode生成二维码 1.首先在页面中加入jquery库文件和qrcode插件 <script type="text/javascript" src= ...

  6. Atitit.二维码功能的设计实践 attilax 总结

    Atitit.二维码功能的设计实践 attilax 总结 1.1. 二维码要实现的功能1 1.2. 现有二维码功能设计不足的地方(待改进)1 1.3. 二维码组件1 1.4. Java版  zxing ...

  7. vue.js 二维码生成组件

    安装 通过NPM安装 npm install vue-qart --save 插件应用 将vue-qart引入你的应用 import VueQArt from 'vue-qart' new Vue({ ...

  8. 基于QRcode的带有文字+图片的二维码的Vue组件

    1 <template> 2 <!-- 生成二维码开放接口: 3 二维码内容[通常为url] 4 二维码大小[限制为正方形] 二维码下方显示:文字 5 二维码中间显示:图片--> ...

  9. vue 中生成二维码之爬坑之路

    最近在做vue中项目,有个需求是在你提交信息后把后台返给你的链接生成二维码. 一共使用了两种生成二维码的方法 1.vue-qr 这个是在一进入页面直接生成二维码,具体介绍见文档:https://www ...

  10. 在ts+vue中实现前端批量下载打包二维码

    ---恢复内容开始--- 一.插件安装 首先是插件的安装与引入,这里我们用的是qrcode的这个插件,直接使用npm install qrcodejs2安装即可,但是这里要注意,如果你用的是ts进行开 ...

随机推荐

  1. 如何使用Java在Word中插入表格

    序言 各位好啊,我是会编程的蜗牛,作为java开发者,有时候需要操作word或者excel.这里面比较常用的框架是POI,我之前用过POI来读写excel,也有用过alibaba easy excel ...

  2. 1 月 25 日见｜Flutter Forward 活动日程表正式发布！

    2023 年 1 月 25 日 (正月初四),我们将在肯尼亚首都内罗毕举办 Flutter Forward 大会,并同时开启线上直播.本次活动将展示最新的 Flutter 技术更新,包括一个主题演讲以 ...

  3. 利用 Page Visibility API 优化网页性能与用户体验

    在现代 Web 开发中,用户可能会频繁切换标签页,或让网页处于后台运行.为了避免不必要的资源浪费并提升用户体验,合理利用 Page Visibility API 可以在页面不可见时暂停或减少资源的消耗 ...

  4. 如何增加kasan 出现问题 重启

    要通过启动参数启用或配置 Kernel Address Sanitizer (KASAN) 并设置相关的行为,你可以在启动 Linux 内核时添加以下参数: 启用 KASAN:使用 kasan=1 来 ...

  5. ubuntu16.04安装SSH服务

    第一步:查看SSH服务是不是安装 sudo ps -e |grep ssh 如果啥都没看到,恭喜你,你没装ssh.那就开始下面的步骤. 第二步:安装SSH sudo apt-get install o ...

  6. iOS程序内语言切换使用小结

    随着时代的发展,应用程序相继出现了不同语言的版本方案,中文,英文,法文,韩文等等:想在应用程序中实现语言的自由切换,需要配置多个语言的文件,根据用户的动态选择获取不同语言文件下的语言文件,从而显示到界 ...

  7. iOS之动画(transform和UIView动画)学习

    1.transform 形变 这个是UIView的属性,继承UIView的控件都具有这个属性 UIImageView *imageview=[[UIImageView alloc]init]; ima ...

  8. iOS关于七牛云项目分发遇到的问题小结

    在新公司做iOS开发,目前主要是用企业开发证书通过七牛云分发的形式实现app下载.在工作过程中遇到了几个相关的问题,在这里整理一下. 1.分发的ipa包在七牛云无法正常分发安装的问题 解决方案:在七牛 ...

  9. MYSQL存储过程-练习5 游标

    MYSQL存储过程-练习5 游标 1 DELIMITER $ 2 CREATE PROCEDURE sp_cur() 3 BEGIN 4 DECLARE bkname VARCHAR(200); 5 ...

  10. python-requests模拟上传文件-带参数

    方法1: 1.安装requests_toolbelt依赖库 #代码实现def upload(self): login_token = self.token.loadTokenList() for to ...