qrcodejs2-ag凯发k8国际

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>

效果如图：

总结

以上是ag凯发k8国际为你收集整理的qrcodejs2--vue生成二维码组件封装的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错，欢迎将ag凯发k8国际推荐给好友。