在Vue中使用QRCode生成二维码 插件【使用笔记】
文章目录方法一方法二方法一1. 首先安装依赖包npm install --save qrcode2. mian.js引入//Vue使用QRCode插件,生成二维码import QRCode from 'qrcode'Vue.prototype.$QRCode = QRCode3. 使用封装(可以直接拿去用修改一下二维码大小)<template><div><canvas
·
方法一
1. 首先安装依赖包
npm install --save qrcode
2. mian.js引入
//Vue使用QRCode插件,生成二维码
import QRCode from 'qrcode'
Vue.prototype.$QRCode = QRCode
3. 使用封装(可以直接拿去用修改一下二维码大小)
<template>
<div>
<canvas id="canvas"></canvas>
</div>
</template>
<script>
export default {
name: "rechargeBox",
data() {
return {
};
},
methods: {
//生产二维码
useqrcode(url) {
var canvas = document.getElementById("canvas");
// this.$QRCode.toCanvas(canvas, url, function (error) {
// if (error) console.error(error)
// })
this.$QRCode.toCanvas(canvas, url, { width: 158 }); //直接修改二维码尺寸
},
},
mounted() {
let url = "https://www.baidu.com/";
this.useqrcode(url);
},
};
</script>
<style lang="scss" scoped>
</style>
4. 页面中调用(只提供了二维码部分代码)
</template>
</div>
<div class="QR">
<QRcode></QRcode>
<!--二维码-->
</div>
</div>
</template>
<script>
import QRcode from "./QRcode.vue";//修改成自己的路径
export default {
components: {
QRcode,
},
}
</script>
5. 最终页面展示
方法二
1. 首先安装依赖包
npm i qrcodejs2 -S
2. 页面中引入
import QRCode from 'qrcodejs2'
3. 使用封装(可以直接拿去用修改一下二维码大小)
<template>
<!--二维码位置-->
<div id="qrcode"></div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
name: "rechargeBox",
data() {
return {
};
},
methods: {
qrcode () {
let qrcode = new QRCode('qrcode', {
width: 100,// 宽度
height: 100, // 高度
text: '56663159', // 二维码内容
// render: 'canvas', // 设置渲染方式(有两种方式 table和canvas,默认是canvas)
// background: '#f0f',
// foreground: '#ff0',
})
console.log(qrcode)
}
},
mounted () {
this.qrcode()
},
};
</script>
<style lang="scss" scoped>
</style>
4. 页面中调用(只提供了二维码部分代码)
</template>
</div>
<div class="QR">
<QRcode></QRcode>
<!--二维码-->
</div>
</div>
</template>
<script>
import QRcode from "./QRcode.vue";//修改成自己的路径
export default {
components: {
QRcode,
},
}
</script>
样 式 请 自 己 进 行 调 节 !
样 式 请 自 己 进 行 调 节 !
样 式 请 自 己 进 行 调 节 !
更多推荐
已为社区贡献7条内容
所有评论(0)