vue中使用qrcode.js，封装一个生成二维码的组件(支持下载和copy二维码里面的链接)

这是一个自己封装的组件

市面上还有其他组件：

vue-qr ：这个可以给二维码中间加图片

本次封装组件的实例图如下：

下载qrcodde

npm i qrcode -S

下载复制的插件

npm i vue-clipboard2 -S

QRcode.vue组件

<comment># 组件注释这是一个公用组件v-clipboard：下载的一个插件
</comment>
<template><div id="QRCode" :style="{'width':width, 'height':height}"><canvas :id="canvasId" :style="{'width':width, 'height':height}"></canvas><div class="flex jc-center"><el-buttontype="text"v-if="copy"v-clipboard:copy="content"v-clipboard:success="onCopy"v-clipboard:error="onError">复制链接</el-button><el-button class="configBtn" type="text" size="" @click="download" v-if="download">下载二维码</el-button></div></div>
</template>
<script>
import QRCode from "qrcode";
import VueClipboard from "vue-clipboard2";
export default {name: "QRCode",props: {canvasId: {type: String,default: "canvasId"},content: {// 二维码中存储的信息type: String,default: "测试二维码"},width: {type: String,default: "200"},height: {type: String,default: "200"},download: {type: Boolean,default: false},copy: {type: Boolean,default: false},downloadParam: { // 下载的参数type: Object,default() {return {width: 200,height: 200,name: "二维码" // 下载之后的文件名};}},view: {type: Boolean,default: true}},data() {return {};},computed: {},created() {this.$nextTick(() => {this.init();});},mounted() {},methods: {init() {let width = this.width,height = this.height;QRCode.toCanvas(document.getElementById(this.canvasId),this.content,{ width, height, toSJISFunc: QRCode.toSJIS },error => {});},onCopy: function(e) {this.$message({message: `复制成功！`,type: "success"});},onError: function(e) {alert("复制失败");},// 下载二维码download() {const ele = document.createElement("canvas");ele.style.width = this.downloadParam.width || "200" + "px";ele.style.height = this.downloadParam.height || "200" + "px";QRCode.toCanvas(ele,this.content,{width: this.downloadParam.width || "200",height: this.downloadParam.height || "200",toSJISFunc: QRCode.toSJIS},error => {});let [F, S, a] = [navigator.userAgent.indexOf("Firefox") > -1,ele.toDataURL("image/png"),document.createElement("a")];[a.href, a.download] = [S, this.downloadParam.name];if (F) {let evt = document.createEvent("MouseEvents");evt.initEvent("click", true, true);a.dispatchEvent(evt);} else {a.click();}}},watch: {content(val) {this.init();}}
};
</script>
<style lang="scss" scoped>
#QRCode {display: inline-block;position: relative;overflow: hidden;
}</style>

使用上面的组件生成二维码

<template><div id="QRcode_gr"><QRcodewidth="200"height="200":content="content":load="true":copy="false":downloadParam="{width: 200,height: 200,name: '二维码'}"></QRcode></div>
</template>
<script>
import QRcode from "@/components/common/QRcode";
export default {name: '',components: {QRcode },props: {},data() {return {content: 'www.baidu.com',name: ''}},watch: {},computed: {},created() { },mounted() { },methods: {},destroyed() { }
}
</script>
<style lang='scss'></style>

vue中使用qrcode.js，封装一个生成二维码的组件(支持下载和copy二维码里面的链接)相关推荐

在VUE中使用QRCode.js
转自:https://www.cnblogs.com/cuixiaozhen/p/9872307.html 微信不能识别IP地址的二维码,只能识别域名的二维码. 什么是QRCode.js QRCode ...
vue 中使用 QRCode.js 链接转二维码带中间图片
前言项目中需要一个链接转二维码的功能,找了一下决定使用QRCode.js(很久以前的插件了) 下载引入1. <div id="qrcode" ref="qrco ...
在vue中使用three.js创建一个简单的立体图形
安装 npm install three --save 使用页面直接引入import * as THREE from 'three' <template><div><d ...
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
本文首发:<如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表> 使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功 ...
js 或者vue中for循环去掉最后一个逗号
js 或者vue中for循环去掉最后一个逗号一个感觉很简单的问题,刚开始我没有思路,现在也没有更好的思路问题描述: 后端返回的一个数组,前端这边需要循环把名字展示,要求在展示时,每个名字后用** ...
vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...
Vue回炉重造之封装一个实用的人脸识别组件
你好,我是Vam的金豆之路,可以叫我豆哥.2019年年度博客之星.技术领域博客专家.主要领域:前端开发.我的微信是 maomin9761,有什么疑问可以加我哦,自己创建了一个微信技术交流群,可以加我邀 ...
vue中使用raphael.js实现地图绘制
一.效果图二.在vue中引入raphael.js npm i raphael -S 三.封装一个名为StreetMap的组件,代码如下 1 <template> 2 <div> ...
纯js封装一个无缝轮播
下面的代码用纯js封装一个轮播组件.功能如下: 可上滑.下滑.左滑.右滑.无缝轮播. 移动端支持手势滑动. 可指定第一个显示的轮播图. 支持放置文字.图片和视频.带导航器. 导航器可自定义样式.若不想 ...

vue中使用qrcode.js，封装一个生成二维码的组件(支持下载和copy二维码里面的链接)

vue中使用qrcode.js，封装一个生成二维码的组件(支持下载和copy二维码里面的链接)相关推荐

最新文章

热门文章