组件的形式创建

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生成二维码的更多相关文章

  1. vue项目使用qrcodejs2生成二维码

    最近写项目遇到一个需求,根据后台给的地址生成二维码,在网上找了下,qrcodejs2使用还是比较多,试了下也能实现需求,就整理下使用方法,方便以后使用   1. 安装包 cnpm i qrcodejs ...

  2. MVC中使用QrCodeNet 生成二维码

    QrCodeNet下载地址:http://qrcodenet.codeplex.com/ using System.Drawing; using System.Drawing.Imaging; usi ...

  3. vue中使用vue-qrcode生成二维码

    要使用二维码,引入一个包就可以了,使用非常简单,话不多说,看代码吧 //1,引入, import VueQrcode from '@xkeshi/vue-qrcode'; Vue.component( ...

  4. 使用jquery生成二维码

    二维码已经渗透到生活中的方方面面,不管到哪,我们都可以用扫一扫解决大多数问题.二狗为了准备应对以后项目中会出现的二维码任务,就上网了解了如何使用jquery.qrcode生成二维码.方法简单粗暴,[] ...

  5. C#利用QrCode.Net生成二维码(Qr码)

    在网上很多应用都是用二维码来分享网址或者其它的信息.尤其在移动领域,二维码更是有很大的应用场景.因为项目的需要,需要在网站中增加一个生成二维码分析网址的功能,在谷歌大幅度抽筋的情况下无奈使用百度.百度 ...

  6. ThinkPHP框架整合phpqrcode生成二维码DEMO

    ThinkPHP框架发展到今天功能已经变得是非常强大了,但是ThinkPHP框架中没有二维码相关的库,因此我们可以通过整合phpqrcode来完成生成二维码的功能.想使用phpqrcode首先就要把p ...

  7. C#利用QrCode.Net生成二维码(Qr码

    http://www.cnblogs.com/Soar1991/archive/2012/03/30/2426115.html 现在网上很多应用都是用二维码来分享网址或者其它的信息.尤其在移动领域,二 ...

  8. QRCoder生成二维码

    现在二维码支付越来越流行,二维码使用的地方越来越多,项目中也需要一个二维码生成工具,QRCoder是一个简单的生成二维码的库,用C#.NET编写,他是开源的MIT-license. 二维码简介 二维条 ...

  9. 利用Spring Boot+zxing,生成二维码还能这么简单

    在网站开发中,经常会遇到要生成二维码的情况,比如要使用微信支付.网页登录等,本文分享一个Spring Boot生成二维码的例子,这里用到了google的zxing工具类. 本文目录 一.二维码简介二. ...

随机推荐

  1. jdk8中java.util.concurrent包分析

    并发框架分类 1. Executor相关类 Interfaces. Executor is a simple standardized interface for defining custom th ...

  2. spring面试题(2)

    f-sp-1. Spring的aop你怎样实现? 用动态代理和cglib实现,有接口的用动态代理,无接口的用cglib f-sp-2. Spring在SSH起什么作用 整合作用 f-sp-3. Spr ...

  3. JQ first-child与:first的区别以及nth-child(index)与eq(index)的区别

    1.first-child和:first区别 first-child  是指选取每个父元素的第一个子元素 如$("div:first-child")指每个父级里的第一个div孩子 ...

  4. java 中文转化为拼音

    依赖架包:pinyin4j.jar package net.jeeshop.core.util; import net.sourceforge.pinyin4j.PinyinHelper; impor ...

  5. linux命令执行返回值(附错误对照表)

    转自:http://blog.sina.com.cn/s/blog_6739945f0100zt4b.html 在 Linux 下,不管你是启动一个桌面程序也好,还是在控制台下运行命令,所有的程序在结 ...

  6. Ubuntu下Git的使用之创建版本库

    创建版本库 什么是版本库呢?版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能跟踪,以便任何时刻都可以 ...

  7. 文件去除git版本控制

    git的版本控制是由其文件中的 .git文件来进行控制,但是这个文件一般情况是隐藏的. 想去除git的版本控制,有两种方式. 1.可以直接将其中的.git文件找出并删除 2.还可以通过命令的方式来操作 ...

  8. 如何优雅的使用 Angular 表单验证

    随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...

  9. Python Django 前后端数据交互 之 HttpRequest、HttpResponse、render、redirect

    在使用三神装的时候,首先当然是得要导入它们: from django.shortcuts import HttpResponse, render, redirect   一.HttpRequest捕获 ...

  10. WCF 和 ASP.NET Web API

    地址:https://docs.microsoft.com/zh-cn/dotnet/framework/wcf/wcf-and-aspnet-web-api WCF 是 Microsoft 为生成面 ...