Vue 二维码组件

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 二维码组件的更多相关文章

Vue 二维码生成插件
1. 安装 qrcode.vue 仓库地址 // vue2 安装1.x版本.vue3 安装3.x版本 npm install --save qrcode.vue // 或 yarn add qrcod ...
.Net Core上也可以使用的二维码组件
我Fork了QRCoder,并且兼容了.Net Core,图形库用的是ZKWeb.System.Drawing Github: https://github.com/zkweb-framework/Q ...
vue2.0 自定义生成二维码（QRCode）组件
1.自定义生成二维码组件 QRCode.vue  <template> <canvas class="qrcode-canv ...
基于Metronic的Bootstrap开发框架经验总结（14）--条码和二维码的生成及打印处理
在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理 ...
js动态生成二维码
一.使用jquery.qrcode生成二维码 1.首先在页面中加入jquery库文件和qrcode插件 <script type="text/javascript" src= ...
Atitit.二维码功能的设计实践 attilax 总结
Atitit.二维码功能的设计实践 attilax 总结 1.1. 二维码要实现的功能1 1.2. 现有二维码功能设计不足的地方(待改进)1 1.3. 二维码组件1 1.4. Java版 zxing ...
vue.js 二维码生成组件
安装通过NPM安装 npm install vue-qart --save 插件应用将vue-qart引入你的应用 import VueQArt from 'vue-qart' new Vue({ ...
基于QRcode的带有文字+图片的二维码的Vue组件
1 <template> 2  ...
vue 中生成二维码之爬坑之路
最近在做vue中项目,有个需求是在你提交信息后把后台返给你的链接生成二维码. 一共使用了两种生成二维码的方法 1.vue-qr 这个是在一进入页面直接生成二维码,具体介绍见文档:https://www ...
在ts+vue中实现前端批量下载打包二维码
---恢复内容开始--- 一.插件安装首先是插件的安装与引入,这里我们用的是qrcode的这个插件,直接使用npm install qrcodejs2安装即可,但是这里要注意,如果你用的是ts进行开 ...

随机推荐

闲的蛋疼整理了一下Dockerfile的命令和参数备查
Dockerfile 主要指令及参数: 指令主要参数作用用法示例 FROM <image>[:<tag>] [AS <name>] 指定基础镜像 FROM u ...
Figma 学习笔记 – Component
参考 Guide to Components in Figma Figma Tutorial: Components - The Basics (Youtube) 定义与用途 Figma 的 Comp ...
.NET 开源的功能强大的人脸识别 API
前言人工智能时代,人脸识别技术已成为安全验证.身份识别和用户交互的关键工具. 给大家推荐一款.NET 开源提供了强大的人脸识别 API,工具不仅易于集成,还具备高效处理能力. 本文将介绍一款如何利用 ...
八皇后dfs全排列——洛谷1219
[USACO1.5] 八皇后 Checker Challenge 题目描述一个如下的 $6 \times 6$ 的跳棋棋盘,有六个棋子被放置在棋盘上,使得每行.每列有且只有一个,每条对角线(包括 ...
第44天：WEB攻防-PHP应用&SQL盲注&布尔回显&延时判断&报错处理&增删改查方式
#PHP-MYSQL-SQL操作-增删改查 1.功能:数据查询查询:SELECT * FROM news where id=$id 2.功能:新增用户,添加新闻等增加:INSERT INTO ne ...
KPTI——可以缓解“熔断” (Meltdown) 漏洞的内核新特性
Linux 内核修复办法:内核页表隔离KPTl(kernel page table isolation) 每个进程一张页表变成两张:运行在内核态和运行在用户态时分别使用各自分离的页表 Kernel页表 ...
Linux：/proc/meminfo参数详细解释
Linux:/proc/meminfo参数详细解释一.Linux内存总览图二.meminfo参数的详细介绍 /proc/meminfo是了解Linux系统内存使用状况的主要接口,我们最常用的&qu ...
利用3D标签，生成RLE标签编码，并保存到csv文件
# coding:utf-8from glob import globimport osimport SimpleITK as sitkfrom pathlib import Pathimport n ...
Linux 系统常见的命令
uname -a 查看linux 的版本信息 : pwd :打印当前的工作目录 ,print work directory: cd 改变目录 ,change directory : cd . 当前目 ...
MongoDB安装及配置Navicat MongoDB Tools
一.下载MongoDB 1.下载网址:https://www.mongodb.com/try/download/community 注:本文档以Windows和msi安装为例二.安装MongoDB ...

Vue 二维码组件

1.前言

2.使用方法

3.配置项列表

4.qrcode.js基本使用

5.大图预览的技巧

6.源码及思路

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

随机推荐

热门专题