<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. 关闭Google自动更新

    一.禁用任务计划 二.禁用更新服务 三.重命名更新程序 首先找到谷歌浏览器的安装位置

  2. HashMap长度为什么是2的幂

    虽然hash值很多,范围很大,但是内存存不了那么大的数组,所以取hash的散列值的时候,需要用hash值,除以数组长度取余数.又由于取余数(%)的性能不如与运算(&),所以想用与运算来代替取余 ...

  3. function | ECOS

    用于优化线性或二阶锥的自对偶齐次嵌入内点方法. 不支持 SDP 锥体! [x,y,info,s,z] = ecos(c,G,h,dims,A,b) 求解一对原始和双锥程序 最小化 c'x 服从 Gx ...

  4. 2020ccpc威海C.Rencontre题解(树形dp)

    题目大意:给定一棵带边权树,给三份点的集合U1,U2,U3,求0.5*(E(dis(u1,u2))+E(dis(u1,u3))+E(dis(u2,u3))). 即,我们需要维护两份点的所有距离和.显然 ...

  5. go tour 笔记 day1

    go get 访问github太慢需要配置代理,设置环境变量 http_proxy=http://127.0.0.1:xxxx 算是比较方便的一种 ref: https://blog.csdn.net ...

  6. Java 数据库表关联更新

    SqlServer 关联更新语句: update a set a.pname = b.name from 表a a inner join 表b b on a.pid = b.id MySQL 关联更新 ...

  7. PS将多个图片合并成长图

    1.将所有图片拖到ps里面排好序.这里图层需要倒序,合成长图上面的图片要在图层的下面.图层倒序的方法:图层→排列→反向. 2.设置画布大小.假设18张图片,每个图片的高度是1448像素,则设置画布的高 ...

  8. vite+vue3使用unplugin-auto-import 无需手动引入api!

    近期了解到unplugin-auto-import这个插件 用途是无需每个组件内重复的引入vue vue-router等内置方法 下面举个例子 <script setup> import ...

  9. 【基础知识】C++算法基础(快速排序)

    快速排序: 1.执行流程(一趟快排): 2.一趟快排的结果:获得一个枢纽,在此左边皆小于此数,在此右边皆大于此数,因此可以继续使用递归获得最终的序列.

  10. 翻下旧资料,发现96年考过foxbase二级

    翻下旧资料,找到 96年通过二级考试的证书,那时考的是Foxbase,一路走来,从最早用netware+dos无盘站+foxbase做订单系统,库存管理系统,再到使用记事本码asp网站,PB+orac ...