<div class="poster-qr">
<div class="qrWrapper">
<!-- 放置二维码的容器 -->
<div id="qrcode" ref="qrcode" class="qrcode"/>
</div>
<div class="qrDesc">长按扫描二维码领取</div>
</div>

  

import QRCode from 'qrcodejs2'
export default {
name: 'SharePoster',
components: { QRCode },
data() {
return {}
},
mounted() {
this.$nextTick(() => {
this.qrcode('http://www.baidu.com') // 二维码的内容,由后端返回链接
})
},
methods: {
// 生成二维码
qrcode(url) {
new QRCode(window.document.getElementById('qrcode'), {
width: window.document.getElementById('qrcode').offsetWidth,
height: window.document.getElementById('qrcode').offsetHeight,
text: url,
     colorDark: '#000',
colorLight: '#fff',
correctLevel: QRCode.CorrectLevel.H
})
    }
}

  

H5-生成二维码的更多相关文章

  1. H5生成二维码

    要用H5生成二维码: 1.引入js库,可自行点击链接复制使用 <script type="text/javascript" src="http://static.r ...

  2. h5开发app之在线生成二维码

    h5通过jquery和qrcode在线生成二维码 首先我们需要下载一个qrcode.js文件,然后依次引入jquery和qrcode文件. 1.创建一个输入框以便做演示使用: <input id ...

  3. 在UniApp的H5项目中,生成二维码和扫描二维码的操作处理

    在我们基于UniApp的H5项目中,需要生成一些二维码进行展示,另外也需要让用户可以扫码进行一定的快捷操作,本篇随笔介绍一下二维码的生成处理和基于H5的扫码进行操作.二维码的生成,使用了JS文件wea ...

  4. Python 创建本地服务器环境生成二维码

    一. 需求 公司要做一个H5手机端适配页面,因技术问题所以H5是外包的,每次前端给我们源码,我们把源码传到服务器让其他人访问看是否存在bug,这个不是很麻烦吗?有人说,可以让前端在他们的服务器上先托管 ...

  5. HTML5实现扫描识别二维码/生成二维码

    扫描识别二维码 思路: 1. 操作摄像头,获取图片.HTML5 WEBRTC的navigator.getUserMedia方法去实时获取摄像头资源.  2. 利用canvas使用相关算法分析图片识别图 ...

  6. JavaScript生成二维码图片

    1.引入一个二维码工具的js文件,同时需要引入jquery文件 下面是jquery.qrcode.min.js文件内容: (function(r){r.fn.qrcode=function(h){va ...

  7. jquery生成二维码并实现图片下载

    1.引入jquery的两个js文件 <script src="../scripts/erweima/jquery-1.10.2.min.js"></script& ...

  8. js 生成二维码图片

    1.用纯JavaScript实现的微信二维码图片生成器 QRCode.js是javascript实现二维码(QRCode)制作生成库. QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5 ...

  9. qrCode生成二维码图片

    QRCode.js 是一个用于生成二维码图片的插件. 1.文件脚本 var QRCode;!function(){function a(a){this.mode=c.MODE_8BIT_BYTE,th ...

  10. Javascript生成二维码(QR)

    网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网 ...

随机推荐

  1. ZSTUOJ刷题⑩:Problem B.--零起点学算法103——查找最大元素

    Problem B: 零起点学算法103--查找最大元素 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 9951  Solved: 4793 Descri ...

  2. Treewidget节点的增加

    父节点的创建 // 隐藏QTreewidget标题头 ui->treeWidget->header()->hide(); // 实现Treewidget父节点的挂载 // 创建存放Q ...

  3. 结对作业——考研咨询APP

    结对作业--考研资讯系统   102陈同学105潘同学108苏同学 (排版:Markdown) 一.需求分析(NABCD模型) 1. N(Need 需求): 1)想知道每个专业考研可以考哪个专业2)想 ...

  4. BubbleSort,冒泡排序,C++非递归和递归实现

    1 // g++ bubble_sort.cc -Wall -O3 && ./a.exe 2 3 4 #include <iostream> 5 #include < ...

  5. setter注入--简单类型

    UserDaoImpl中的代码,实现对name和age的注入 private String name; private int age; public void setName(String name ...

  6. Day03_Class01

    用户交互Scanner Scanner对象 基本语法 Scanner sc = new Scanner(System.in); 通过Scanner类的next()与nextLine()方法获取输入的字 ...

  7. Resnet网络--BasicBlock与BottleNeck

    ResNetV2的网络深度有18,34,50,101,152.50层以下的网络基础块是BasicBlock,50层及以上的网络基础块是BottleNeck. BasicBlock 图示如下 代码实现 ...

  8. [Leetcode 111]二叉树的最短深度 BFS/DFS

    题目 给定二叉树,求最短路径包含的节点个数 https://leetcode.com/problems/minimum-depth-of-binary-tree/ Given a binary tre ...

  9. Python机器学习/LogisticRegression(逻辑回归模型)(附源码)

    LogisticRegression(逻辑回归) 逻辑回归虽然名称上带回归,但实际上它属于监督学习中的分类算法. 1.算法基础 LogisticRegression基本架构源自于Adline算法,只是 ...

  10. dosbox debugger

    通过中断看程序运行过程 最终目的是要找到数据保存位置,如何保存到文件的.