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. 海光 FTPM 运行报错：Fapi_Provision_Finish() ErrorCode (0x00060025) No EK certificate found.

    使用的是海光 CPU 提供的基于固件的 FTPM,错误原因是海光没有给 TPM 提供相应的 EK 证书.从而导致Fapi_Provision()接口无法通过证书的校验.关于Fapi_Provision ...

  2. CSS & JS Effect – 用 wheel 模拟 scroll

    前言 在 用 JavaScript 实现 position sticky 文章中,我提到了用 wheel 来模拟 scroll 效果. 这篇来说说具体怎么实现,挺简单的哦. Preparation t ...

  3. HTML & CSS – Practice Projects

    前言 学完了 w3school 就要练练手了. 这篇是记入我学习的过程, 和知识点. update: 2022-02-27 用文章来表达太难了, 用视频比较合理. 所以我就没有继续写了. 这里记入几篇 ...

  4. 为什么我觉得需要熟悉vim使用，难道仅仅是为了耍酷？

    实例说话: 使用vscode保存,有报提示信息,可以以超级用户身份重试,于是我授权root给vscode软件,却还提示失败! 而实际上,我使用cat命令发现已经写入成功了 终端内使用cat这条shel ...

  5. 当git仓库里面已经有上传好的框架时,二次上传到仓库需要的指令

    初始化仓库 1 git init git add . "提交信息"里面换成自己的需要 如"first commit" git commit -m "提 ...

  6. gadget驱动框架（二）

    usb_composite_driver的创建于注册 源码:drivers/usb/legacy/serial.c //创建usb_composite_driver static struct usb ...

  7. Cache和DMA一致性

    DMA应该多多少少知道点吧.DMA(Direct Memory Access)是指在外接可以不用CPU干预,直接把数据传输到内存的技术.这个过程中可以把CPU解放出来,可以很好的提升系统性能.那么DM ...

  8. iOS多态使用小结

    多态是面试程序设计(OOP)一个重要特征,但在iOS中,可能比较少的人会留意这个特征,实际上在开发中我们可能已经不经意的使用了多态.比如说: 有一个tableView,它有多种cell,cell的UI ...

  9. ⼯作中有做过数据处理吗？ tree 组件 根据 pid 寻找父节点

    主要是在组件和后端返回的数据之间,或者组件产⽣的数据和需要提交给后端的数据之间,有可能会出 现结构对不上,这个时候可能会处理⼀下,举个例⼦,⽐如说我们常⽤的tree型组件要求必须是嵌套的 tree型数 ...

  10. 谈一谈 vuex 里边，actions，mutations ，state 之间的运转方式

    首先,调用 actions 中的方法,一般我们在 actions 做登录和登出的请求 : 然后调用 mutations 的方法修改数据 ,因为 mutations 方法是修改state的数据的唯一方法 ...