qrcodejs2--Vue生成二维码组件封装

1.安装qrcodejs2：

npm install  qrcodejs2 --save

yarn add  qrcodejs2

2.初步封装组件：

/*** @file 生成二维码的组件* @author Walker* @date 2020-03-16*/
<template><div class="emqrcode"><button @click="showQRcode">点击分享二维码</button><div id="qrcode" ref="qrcode"></div></div>
</template><script>
import QRCode from "qrcodejs2";
export default {components: { QRCode },data() {return {link: "https://www.baidu.com/"};},methods: {/*** @description 生成二维码* @param  {number} qWidth  宽度* @param  {number} qHeight  高度* @param  {string} qText  二维码内容（跳转连接）* @param  {string} qRender 渲染方式（有两种方式 table和canvas，默认是canvas）*/qrcode(qWidth, qHeight, qText, qRender) {let qrcode = new QRCode("qrcode", {width: qWidth,height: qHeight,text: qText,render: qRender});},/*** @description 点击显示二维码*/showQRcode() {//二维码初始化 点击一次添加一个二维码this.$refs.qrcode.innerHTML = "";this.$nextTick(function() {this.qrcode(124, 124, this.link, "canvas");});}}
};
</script><style lang="less">
.emqrcode {width: 100%;background-color: #f00;
}
</style>

最后的样式：

3.结合ElementUI：

/*** @file 生成二维码的组件* @author Walker* @date 2020-03-16*/
<template><div class="emqrcode"><el-button type="primary" class="left_transition" @click="showShare = !showShare"><i class="el-icon-caret-left"></i></el-button><div class="share_box"><transition name="el-zoom-in-center"><div v-show="showShare" class="transition-box"><el-button type="text" class="share_QRcode" @click="showQRcode">点击分享二维码</el-button></div></transition></div><el-dialogtitle="分享二维码"custom-class="dialog_style":visible.sync="centerDialogVisible"width="40%"center@open="showQRcode"><div :append-to-body="false" id="qrcode" ref="qrcode"></div><span slot="footer" class="dialog-footer"><a class="linl_style">复制链接:{{link}}</a><!-- <el-button @click="centerDialogVisible = false">取 消</el-button> --><!-- <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button> --></span></el-dialog></div>
</template><script>
import QRCode from "qrcodejs2";
export default {components: { QRCode },data() {return {link:"https://www.baidu.com/",centerDialogVisible: false,showShare: false};},methods: {/*** @description 生成二维码* @param  {number} qWidth  宽度px* @param  {number} qHeight  高度px* @param  {string} qText  二维码内容（跳转连接）* @param  {string} qRender 渲染方式（有两种方式 table和canvas，默认是canvas）*/qrcode(qWidth, qHeight, qText, qRender) {let qrcode = new QRCode("qrcode", {width: qWidth,height: qHeight,text: qText,render: qRender});},/*** @description 遮罩打开的回调 点击显示二维码*/showQRcode() {//收回抽屉this.showShare = false;//调用函数生成二维码this.$nextTick(function() {//二维码初始化 点击一次添加一个二维码this.$refs.qrcode.innerHTML = "";this.qrcode(124, 124, this.link, "canvas");});//打开遮罩this.centerDialogVisible = true;}}
};
</script><style lang="less" scoped>
.left_transition {border-radius: 0;border: none;border-right: 1px solid #ccc;background-color: #4157ff;height: 36px;padding: 0 4px 0 3px;
}
.share_box {display: inline-block;height: 36px;border: none;vertical-align: top;
}
.emqrcode {position: fixed;right: 17px;top: 20px;width: auto;// background-color: #4157ff;z-index: 3000;color: #ffffff;
}
.share_QRcode {height: 36px;color: #ffffff;font-size: 10px !important;
}
.share_QRcode :hover {color: #eef;
}
.emqrcode :hover {// background-color: rgb(167, 206, 255);
}
.transition-box {background-color: #4157ff;text-align: center;color: #fff;padding: 0 2px;box-sizing: border-box;border: none;
}
.linl_style {color: #4157ff;font-size: 12px;
}
</style>
<style lang="less">
#qrcode {img {margin: 0 auto;}
}
</style>

效果如图：

qrcodejs2--Vue生成二维码组件封装相关推荐

Vue生成二维码组件封装
1.使用方法 1.1.载入 JavaScript 文件 <script src="qrcode.js"></script> 1.2.调用 // 简单方式 n ...
【工具】Vue中生成二维码组件——vue-qr
[工具]Vue中生成二维码组件--vue-qr npm地址--https://www.npmjs.com/package/vue-qr 注:不支持IE浏览器效果 1.安包 npm install v ...
vue使用qrcodejs2生成带log的二维码图片，vue生成二维码图片中间带log，自定义log
安装插件 npm install qrcodejs2 --save 在页面中引入 import QRcode from 'qrcodejs2' 普通的二维码此处的id就是页面中要展示二维码容器的id ...
利用VUE生成二维码（两种方式）
利用Vue生成二维码 Author:kak vue有两种生成二维码的方式,qrcode.vue-qr(有icon): 1.qrcode npm ``install` `--save qrcodejs2 ...
vue生成二维码并下载二维码
首先安装一下面这个插件 cnpm install vue-qr -S 接下来在需要生产并下载二维码的页面引入 import VueQr from 'vue-qr' 并在components中注册为组件 ...
vue生成二维码并下载
vue生成二维码图片,这里使用的是qrcode.js 这个插件 1.下载插件 npm install --save qrcodejs2 2.组件内使用 <template> <B ...
Vue生成二维码，自定义插入图片生成logo
Vue生成二维码,自定义插入图片生成logo vue-qr是一个很棒的制作二维码开源库,github地址:https://github.com/Binaryify/vue-qr 1.安装vue-qr ...
vue+qrcodejs2 动态生成二维码并下载
安装依赖 npm install --save qrcodejs2 vue页面引用 <script>import QRCode from 'qrcodejs2'import axios f ...
Vue项目中是使用qrcodejs2插件生成二维码
1.安装qrcodejs2插件,在控制台输入: npm install qrcodejs2 --save 2.在需要使用的页面中引入: <div id="qrcode" re ...

qrcodejs2--Vue生成二维码组件封装

1.安装qrcodejs2：

2.初步封装组件：

最后的样式：

3.结合ElementUI：

效果如图：

qrcodejs2--Vue生成二维码组件封装相关推荐

最新文章

热门文章