• 当前标签:qrcode

程序开发 vue qrcode 生成二维码并下载png图片

基于 qrcode 二维码生成插件, 先下载npm i --save qrcode 引用页: <rqcode :dialog="dialog" :uuid="uuid" :imei="imei" @dialogChange="dialog = false"/> import rqcode from "./componenrts/RQcode"; export default { components: { rqcode }, data() { return { dialog: false, imei: "", uuid: "", }; }, methods:{ // 生成二维码事件 getRQcode(){ this.uuid = id; this.imei = imei; // 以上为参数 ,可以自定义添加或者组合 this.dialog = true; }, } }; 生成二维码组件: <template> <el-dialog title="设备二维码" :visible="dialogVisible" width="30%" close-on-press-escape close-on-click-modal show-close > <div style="text-align: center;"> <canvas ref="myCanvas" id="msg"></canvas> <p>uuid: {{ uuid }}</p> </div> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false; $emit('dialogChange', false)">关 闭</el-button> <el-button type="primary" @click="downRQcode">下 载</el-button> </span> </el-dialog> </template> <script> import QRCode from "qrcode"; export default { props: { uuid: { default: "" }, imei: { default: "" }, dialog: { default: false } }, data() { return { dialogVisible: false }; }, watch: { dialog(e) { this.dialogVisible = e; this.useqrcode(this.uuid) } }, methods: { // 生成二维码 useqrcode(val) { const that = this; setTimeout(() => { var canvas = document.getElementById("msg"); QRCode.toCanvas(canvas, val, function(error) {

2019-04-02 16:51:51 136 0 0
阅读详情
  • 1
前往