VUE 生成二维码插件
2018-07-25 本文已影响24人
苦咖啡Li
1、qrcodejs2
- 安装 qrcodejs2 （注意：安装的是qrcodejs2，不要安装qrcode ---> 会报错）
npm install qrcodejs2 --save
- 页面中引入
<script>
import QRCode from "qrcodejs2"
export default {
data(){
link: 'https://baidu.com'
},
components: { QRCode }
}
</script>
- dom 结构
<div id="qrcode" ></div>
- JS 方法编写
export default {
data(){
link: 'https://baidu.com'
},
methods: {
// 生成二维码
qrcode () {
let that = this;
let qrcode = new QRCode('qrcode', {
width: 124,
height: 124, // 高度
text: this.link, // 二维码内容
// render: 'canvas' , // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
// background: '#f0f', // 背景色
// foreground: '#ff0' // 前景色
})
}
},
components: { QRCode }
}
5）页面调用
// 注意： 在需要调用的地方 这样必须这样调用 否则会出现 appendChild null 就是id为qrcode的dom获取不到 返回结果为null
this.$nextTick (function () {
this.qrcode();
})
2、vue-qart
1） 安装 vue-qart
npm install vue-qart --save
- 页面中引入
<script>
import VueQArt from 'vue-qart'
export default {
data(){
link: 'https://baidu.com'
},
components: { VueQArt }
}
</script>
- data 中数据配置
export default {
data(){
downloadButton:false,
config: {
value: 'https://baidu.com',
imagePath: '/static/logo/logo.png',
filter: 'color'
}
},
components: { VueQArt }
}
- dom 结构
<html>
<!--在这里插入内容-->
<vue-q-art :config="config" :downloadButton="downloadButton"></vue-q-art>
</html>
3 实际项目中
3.1 引入文件
qrcodejs2---引入.jpg
3.2 生成二维码函数
生成二维码的函数.jpg
3.3 相应的位置调用函数
相应的位置调用生成二维码函数.jpg
3.4 生成的二维码（案例：百度）
生成的二维码.jpg
