大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
原文:https://www.jianshu.com/p/496fd1cbee8d
npm install qrcodejs2 –save
页面中引入
dom 结构
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
页面中引入
data 中数据配置
export default {
data(){
downloadButton:false,
config: {
value: 'https://baidu.com',
imagePath: '/static/logo/logo.png',
filter: 'color'
}
},
components: { VueQArt }
}
dom 结构
<vue-q-art :config=”config” :downloadButton=”downloadButton”>
3 实际项目中
3.1 引入文件
qrcodejs2—引入.jpg
3.2 生成二维码函数
生成二维码的函数.jpg
3.3 相应的位置调用函数
转载于:https://www.cnblogs.com/leigepython/p/11315232.html
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/186389.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...