vue-qr二维码插件使用简介
官方介绍:https://www.npmjs.com/package/vue-qr
1、安装
npm install vue-qr --save
2、导入vue项目中使用
下面给出一个简单的demo
- <template>
- <vue-qr :text=“downloadData.url” :margin=“0” colorDark=“#f67b29” colorLight=“#fff” :logoSrc=“downloadData.icon + ‘?cache'” :logoScale=“0.3” :size=“200”></vue-qr>
- </template>
- <script>
- import vueQr from ‘vue-qr’
- export default {
- components: {
- vueQr
- },
- data() {
- return {
- downloadData: {
- url: ‘扫码访问的链接地址’,
- icon: ‘随便一张图片的地址也行’
- }
- }
- }
- }
- </script>
注:上方代码中的 logoSrc 对应的图片url地址 我加上了 ?cache 是为了解决资源请求的跨域问题。具体情况展现可自行研究。
3、常用属性介绍
text |
二维码内容 |
---|---|
size |
二维码宽高大小,因为是正方形,所以设一个参数即可 |
margin |
默认边距20px,不喜欢的话自己设为0 |
colorDark |
实点的颜色,注意要和colorLight一起设置才有效 |
colorLight |
空白的颜色,注意要和colorDark一起设置才有效 |
bgSrc |
嵌入背景图地址,没什么卵用,不建议设置 |
logoSrc |
二维码中间的图,这个是好东西,设置一下显得专业点 |
logoScale |
中间图的尺寸,不要设太大,太大会导致扫码失败的 |
dotScale |
那些小点点的大小,这个也没什么好纠结的,不建议设置了 |
注册vue-qr组件 然后绑定url,以及text icon即可,需要刷新验证码可以定义一个方法在刷新url的时候加入随机小数即可
<vue-qr :text=”downloadData.url” :margin=”15″ colorDark=”#000000″ colorLight=”#fff” :logoScale=”0.3″ :size=”200″></vue-qr>
data{
return{
downloadData: {
url: ‘http://192.168.43.115:8080/’,
icon: ‘../../assets/logo.png’
},
keys:null,
img:require(“../../assets/anli.png”)
};
}
}
methods: {
gai(){
this.reload();
var timestamp=new Date().getTime();
this.keys=timestamp
this.downloadData.url=”http://192.168.43.115:8080/?time=”+Math.random() // 这里加入了随机小数,就能够正常的刷新了
console.log(timestamp,Math.random());
this.$nextTick(()=>{
// this.$refs.k.text=timestamp
})
}
},
之前的话我是用的时间戳,发现并不能刷新二维码,后用Mate.random()解决
文章引用https://blog.csdn.net/fifteen718/article/details/85850511
- 洛谷P1317 低洼地
- ZOJ 3594 Sexagenary Cycle
- React第三方组件6(状态管理之Mobx的使用③TodoList中)
- P1554 梦中的统计
- Word2Vec教程-Skip-Gram模型模型“伪”任务关于模型的更多细节隐藏层输出层
- React第三方组件6(状态管理之Mobx的使用②TodoList上)
- The 9th Zhejiang Provincial Collegiate Programming Contest
- P1789 【Mc生存】插火把
- FOJFOJ有奖月赛-2012年4月(校赛热身赛)-解题报告总结
- poj 1316 Self Numbers
- React第三方组件6(状态管理之Mobx的使用①简单使用)
- poj 1088 滑雪
- 八数码难题解法大全
- React第三方组件5(状态管理之Redux的使用⑥Redux DevTools)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法