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. 戴尔笔记本游匣DELL G16 7620更换固态硬盘从选购固态硬盘到系统和应用程序迁移(克隆)全过程(教程)

    又到了捣鼓电脑的时候了.去年(2022年)8月14日买的电脑,当时7月份刚出戴尔游匣G16,搜了一下,2022年7月22日,戴尔首发游匣G16国行版本. 到现在也就用了差不多半年的时间,我的内存满了, ...

  2. Angular 18+ 高级教程 – Component 组件 の Query Elements

    前言 Angular 是 MVVM 框架. MVVM 的宗旨是 "不要直接操作 DOM". 在 Component 组件 の Template Binding Syntax 文章中 ...

  3. Facebook – Pixel

    介绍 Facebook 的 Pixel 类似于 Google 的 Analytics. 作用是 tracking 流量进入网站后是否转化. 这样就可以持续优化广告效果. 参考 Facebook Doc ...

  4. 使用Minio Clinet将老版本Minio的数据迁移到新版本的Minio

    1. 关于Minio Client: MinIO Client是一个命令行工具,用于与Minio或云存储服务进行交互.它支持文件系统和Amazon S3兼容的云存储服务(AWS Signature v ...

  5. C++ STL set/multiset容器

    set/multiset容器 简介 Set的特性是,所有元素都会根据元素的值自动被排序.Set不允许两个元素有相同的值. Set的迭代器iterator是一种const_iterator,不能通过迭代 ...

  6. Python 潮流周刊#70：微软 Excel 中的 Python 正式发布！（摘要）

    本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...

  7. 【问题解决】remote: parse error: Invalid numeric literal at line 1, column 20，解决思路

    问题现象 某同事出现过同样的推送到git仓库报错的问题,报错信息详情如下: Delta compresion using up to 20 threads Compressing objects: 1 ...

  8. duxui：基于Taro，兼容React Native、小程序、H5的多端UI库

    duxui是duxapp官方开发的一款兼容多端的UI组件库,兼容小程序.H5.React Native,库中提供了60+的组件,覆盖大部分使用场景 它能帮助你通过统一的组件样式,快速完成多端应用的开发 ...

  9. USB总线-Linux内核USB3.0设备控制器中断处理程序分析（九）

    1.概述 USB设备枚举.请求处理.数据交互都涉及USB设备控制器中断.当有事件发生时,USB设备控制器首先将事件信息通过DMA写入到事件缓冲区中,然后向CPU发出中断,随后CPU调用中断处理函数开始 ...

  10. kdump

    Kdump简单介绍 什么是Kdump? Kdump是在系统崩溃.死锁或死机时用来转储内存运行参数的一个工具和服务,是一种新的crash dump捕获机制,用来捕获kernel crash(内核崩溃)的 ...