vue cli3项目中使用qrcodejs2生成二维码
组件的形式创建
1.下载依赖
npm install qrcodejs2
2.创建一个.vue的组件放置代码(我创建的是qrcodejs2.vue)
//template中的代码
<template>
<div class="boxshow">
<div class="qrcode" ref="qrcodeContainer"></div>
</div>
</template>
<script>
import QRCode from 'qrcodejs2' // 引入qrcode
export default {
name: 'test',
props: {
QRCodetext: {
type: String,//类型限定
default: '' //默认
}
},
mounted() {
this.$nextTick(() => {
this.qrcode()
})
},
methods: {
qrcode() {
let qrcode = new QRCode(this.$refs.qrcodeContainer, {
width: 100,// 二维码的宽
height: 100,// 二维码的高
text: this.QRCodetext ? this.QRCodetext : '', // 二维码的内容
colorDark: '#000',// 二维码的颜色
colorLight: '#fff',
correctLevel: QRCode.CorrectLevel.H
})
}
}
}
</script>
通过qrcodejs2生成的二维码本身是没有白边的
如果想像这样生成一个有边框的的二维码,更好看一点 我这边用了box-shadow属性修改后 看起来是不是高大上一点 哈哈哈哈哈哈哈
上代码 这是需要安装less的插件 也可以不用
npm install less
<style lang='less'>
.boxShadow {
padding: 20px 0 0 40px;
.qrcode {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
display: inline-block;
img {
width: 132px;
height: 132px;
background-color: #fff; //设置白色背景色也可以设置别的看业务需求
padding: 6px; // 利用padding
}
}
}
</style> //不用less的 注意要更有针对性 避免污染
<style>
.boxShadow {
padding: 20px 0 0 40px;
}
.qrcode {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
display: inline-block;
}
img {
width: 132px;
height: 132px;
background-color: #fff;/* 设置白色背景色*/
padding: 6px;
}
</style>
3.使用的的话直接引入 祖册即可
<template>
<QRCode ref="qrcode" :QRCodetext="QRCodetext"></QRCode>
</template>
<script>
import QRCode from '../compon/qrcodejs2'
export default {
name: '',
data() {
return {
QRCodetext: '',
}
},
created() {
this.QRCodetext = 'www.baidu.com'//想要的内容
},
mounted() {},
methods: {},
components: { QRCode }
}
</script>
ok!去玩耍吧
vue cli3项目中使用qrcodejs2生成二维码的更多相关文章
- vue项目使用qrcodejs2生成二维码
最近写项目遇到一个需求,根据后台给的地址生成二维码,在网上找了下,qrcodejs2使用还是比较多,试了下也能实现需求,就整理下使用方法,方便以后使用 1. 安装包 cnpm i qrcodejs ...
- MVC中使用QrCodeNet 生成二维码
QrCodeNet下载地址:http://qrcodenet.codeplex.com/ using System.Drawing; using System.Drawing.Imaging; usi ...
- vue中使用vue-qrcode生成二维码
要使用二维码,引入一个包就可以了,使用非常简单,话不多说,看代码吧 //1,引入, import VueQrcode from '@xkeshi/vue-qrcode'; Vue.component( ...
- 使用jquery生成二维码
二维码已经渗透到生活中的方方面面,不管到哪,我们都可以用扫一扫解决大多数问题.二狗为了准备应对以后项目中会出现的二维码任务,就上网了解了如何使用jquery.qrcode生成二维码.方法简单粗暴,[] ...
- C#利用QrCode.Net生成二维码(Qr码)
在网上很多应用都是用二维码来分享网址或者其它的信息.尤其在移动领域,二维码更是有很大的应用场景.因为项目的需要,需要在网站中增加一个生成二维码分析网址的功能,在谷歌大幅度抽筋的情况下无奈使用百度.百度 ...
- ThinkPHP框架整合phpqrcode生成二维码DEMO
ThinkPHP框架发展到今天功能已经变得是非常强大了,但是ThinkPHP框架中没有二维码相关的库,因此我们可以通过整合phpqrcode来完成生成二维码的功能.想使用phpqrcode首先就要把p ...
- C#利用QrCode.Net生成二维码(Qr码
http://www.cnblogs.com/Soar1991/archive/2012/03/30/2426115.html 现在网上很多应用都是用二维码来分享网址或者其它的信息.尤其在移动领域,二 ...
- QRCoder生成二维码
现在二维码支付越来越流行,二维码使用的地方越来越多,项目中也需要一个二维码生成工具,QRCoder是一个简单的生成二维码的库,用C#.NET编写,他是开源的MIT-license. 二维码简介 二维条 ...
- 利用Spring Boot+zxing,生成二维码还能这么简单
在网站开发中,经常会遇到要生成二维码的情况,比如要使用微信支付.网页登录等,本文分享一个Spring Boot生成二维码的例子,这里用到了google的zxing工具类. 本文目录 一.二维码简介二. ...
随机推荐
- 使用docker方式构建prometheus监控的学习
一.背景:近期学习部署prometheus监控系统,经研究发现prometheus提供docker运行模式.根据我的经验,能够使用docker模式构建系统一定多快好省. 二.环境: 1.centos7 ...
- Java实现蓝桥杯 算法训练 Professor Monotonic's Network
试题 算法训练 Professor Monotonic's Network 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 无聊的教授最近在做一项关于比较网络的实验.一个比较网络由若 ...
- Java实现 蓝桥杯VIP 算法提高 任意年月日历输出
算法提高 任意年月日历输出 时间限制:1.0s 内存限制:512.0MB 已知2007年1月1日为星期一. 设计一函数按照下述格式打印2007年以后(含)某年某月的日历,2007年以前的拒绝打印. 为 ...
- 数据结构:用实例分析ArrayList与LinkedList的读写性能
目录 背景 ArrayList LinkedList 实例分析 1.增加数据 2.插入数据 3.遍历数据 3.1.LinkedList遍历改进 总结 背景 ArrayList与LinkedList是J ...
- Linux 自动挂载与fstab文件修复
/etc/fstab文件 自动挂载就是写入/etc/fstab文件 vi /etc/fstab 其中,第九行是/分区的自动挂载信息,有6个字段 第一字段表示分区的UUID(硬盘通用唯一识别码,使用du ...
- Spring zuul 快速入门实践 --看zuul如何进行服务转发
zuul 作为springCloud 的全家桶组件之一,有着不可或缺的分量.它作为一个普通java API网关,自有网关的好处: 避免将内部信息暴露给外部: 统一服务端应用入口: 为微服务添加额外的安 ...
- GIT 仓库的搭建
1.安装并配置必要的依赖关系 在CentOS 7(和RedHat / Oracle / Scientific Linux 7)上,以下命令还将在系统防火墙中打开HTTP和SSH访问. yum inst ...
- c#撸的控制台版2048小游戏
1.分析 最近心血来潮,突然想写一个2048小游戏.于是搜索了一个在线2048玩玩,熟悉熟悉规则. 只谈核心规则:(以左移为例) 1.1合并 以行为单位,忽略0位,每列依次向左进行合并,且每列只能合并 ...
- Docker——基于Docker安装Drupal博客系统
Docker--基于Docker安装Drupal博客系统 向脚本文件追加内容 cat << EOF > build.sh #设置主机名 hostnamectl set-hostnam ...
- 一文入门Kafka,必知必会的概念通通搞定
Kakfa在大数据消息引擎领域,绝对是没有争议的国民老公. 这是kafka系列的第一篇文章.预计共出20篇系列文章,全部原创,从0到1,跟你一起死磕kafka. 本文盘点了 Kafka 的各种术语并且 ...