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. C# HttpClient 基本使用方式（一）

    .NetCore主要提供了HttpWebRequest,WebClient,HttpClient这三种访问web的方式,其中HttpWebRequest,WebClient都在官方被标注为已过时,如果 ...

  2. 安全 – CSP (Content Security Policy)

    前言 之前讲过 CSRF.防 Cookie hacking 的. 也介绍过防 XSS 的 HtmlSanitizer. 今天再介绍 CSP. 参考 Content Security Policy 介绍 ...

  3. Asp.net core 学习笔记之 Microsoft Graph API

    早年如果我们要读写用户得 outlook 内容是比较麻烦的, 要用许多 smtp 之类的方式. 现在终于是有了 http 级的 API 可以 call 了. 不仅仅是 outlook, calenda ...

  4. QT数据可视化框架编程实战之三维柱状图从入门到精通_补天云QT技术培训专家

    QT数据可视化框架编程实战之三维柱状图从入门到精通_补天云QT技术培训专家 简介 本文将介绍QT数据可视化框架(QT DataVisualization 模块)编程实战之三维柱状图(Q3DBars)的 ...

  5. 【赵渝强老师】Kubernetes平台中日志收集方案

    一.K8s整体日志收集方案 整体的日志收集方案,如下图所示: Filebeat是本地文件的日志数据采集器,可监控日志目录或特定日志文件(tail file),并将它们转发给Elasticsearch或 ...

  6. 采集数据产品描述有超链接///设置免运费后，达到免送标准，其他运费不显示///给产品详情页面的图片点击放大是个模态窗///在shop页面有重复的产品展示，去重

    //产品描述有超链接,去掉 function remove_product_hyperlinks($content) { if (is_product()) { // 确保只在产品页面上应用 $con ...

  7. SURF (Speeded Up Robust Features,加速稳健特征）

    本篇文章来自wikipedia,如果需要阅读英文,可以去看一下. SURF (Speeded Up Robust Features, 加速稳健特征) 是一个稳健的图像识别和描述算法,首先于2006年发 ...

  8. 墨天轮访谈 | IvorySQL王志斌—IvorySQL，一个基于PostgreSQL的兼容Oracle的开源数据库

    分享嘉宾:王志斌 瀚高IvorySQL产品经理 整理:墨天轮社区 导读 大家好,我是瀚高IvorySQL产品经理王志斌,IvorySQL是基于PostgreSQL的衍生开源项目. 我今天分享的内容主要 ...

  9. es6有哪些新特性？

    1. let 和 ocnst ,可以定义块级作用域 2. 新增了箭头函数,箭头函数简化了函数定义的定义 3.新增了promise解决回调地狱问题 ps:回调地狱是我们异步请求服务器数据时,通过then ...

  10. SaaS架构：开放平台架构设计

    大家好,我是汤师爷~ 今天聊聊开放平台架构设计. 为什么需要搭建开放平台 增强产品能力 开放平台能够让三方开发者和合作伙伴开发新的应用或服务,增加原有SaaS产品能力.这样就可以满足更多用户需求,从而 ...