二维码插件（qrcode）的使用

今天写项目的同时，遇到了点击分享的图标，会出现一个二维码，扫描这个二维码会在手机上出现当前分享的页面

代码实现

1、给分享一个点击事件

给分享图标一个点击事件（share）

 <div class="classDetails_box_header_img" @click="share"><imgsrc="data:image/png;base64,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"alt/></div>

2、遮罩层

 <!-- 二维码 --><van-overlay :show="show" @click="show = false"><div class="wrapper"><div class="block"><p>分享</p><div><img :src="imrUrl" /></div></div></div></van-overlay>

3、在data中定义的值

show: false,//判断是否让遮罩层出现
imrUrl: "" // 图片的地址

4、下载插件（qrcode）

插件地址: https://www.npmjs.com/package/qrcode

npm install --save qrcode

5、使用

1）、引入插件

import QRCode from "qrcode";

2）、使用（在这里直接复制官方的内容就行）

注意:分享是分享当前的页面，因此需要拿到当前页面的地址，通过location.href来拿地址。

 // 点击分享share() {this.show = true;let url = location.href;console.log(url);QRCode.toDataURL(url)//在这里拿到地址，把它赋值给data里面定义的值imrUrl.then(tpian => {console.log(tpian);this.imrUrl = tpian;}).catch(err => {console.error(err);});},

效果

手机上的效果

`注意`:在这里我的网络是局域网，手机和电脑必须是连的同一个的网路，才可以看到效果。

二维码插件（qrcode）的使用相关推荐

二维码插件qrcode生成二维码信息
文章目录二维码插件qrcode: JS逻辑实现: html展示与下载调用部分: 图片信息展示如下: 二维码插件qrcode: JS逻辑实现: <!-- 二维码插件,qrcode.min.js下 ...
网页前端知识汇总（三）——网页前端利用二维码插件qrcode生成在线二维码
最近几年二维码的广泛应用,方便了很多行业,如支付宝,微信,小程序扫码之类的,这个在二十年前,想都不敢想这么方便,那时候有书刊编码扫一扫都感觉是高科技了,如今,二维码的广泛应用,生活还是方便了不少!这个 ...
jquery.qrcode.js生成二维码插件转成图片格式
1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式, github源码地址: https://github.com/jeromeetien ...
js 将微信二维码转为url，qrcodeJs解析二维码，qrcode.decode is not a function报错
前言工作中遇到的需求:用户上传相册中选中的图片,判断这个图片里的二维码是不是微信二维码,如果是则上传到服务器:不是,则提示用户重新上传. 百度了下,qrcode.js是一个用于生成二维码的 Java ...
Vue3二维码（QRCode）
可自定义设置以下属性: 扫描后的文本或地址(value),类型:string,默认 '' 二维码大小(size),类型:number,单位px,默认 160 二维码颜色,Value must be i ...
jQuery二维码插件生成网页二维码
在移动端越来越流行的今天,在PC上做好之后经常会放置一个二维码引导用户到移动端上体验移动版的版本. 如果是一个固定的二维码,我们只需要在网上找个地方生成图片,然后放上图片就可以了.但如果是地址不固定需 ...
vue2.0 自定义生成二维码（QRCode）组件
1.自定义生成二维码组件 QRCode.vue  <template><canvasclass="qrcode-canvas ...
解决vue3-print-nb打印二维码定位(qrcode.vue) 问题
解决vue3-print-nb打印二维码定位(qrcode.vue) 问题在使用vu3-print-nb搭配qrcode.vue产生二维码的时候,我的代码是设置了全部元素都居中显示的,效果如下 &l ...
java生成和解析二维码实战——QRCode
直接上代码,以下程序可直接运行: package qrcode;import java.awt.Color; import java.awt.Graphics2D; import java.awt.i ...
Laravel -- 实战篇自制二维码 Simple QrCode
简介:Simple QrCode 是基于强大的Bacon/BaconQrCode库开发的适用于当前最流行的Laravel框架的一个扩展库.便于Laravel用户可以很方便地使用. 一.配置 1.在项目 ...

二维码插件（qrcode）的使用

代码实现

1、给分享一个点击事件

2、遮罩层

3、在data中定义的值

4、下载插件（qrcode）

5、使用

1）、引入插件

2）、使用（在这里直接复制官方的内容就行）

效果

手机上的效果

`注意`:在这里我的网络是局域网，手机和电脑必须是连的同一个的网路，才可以看到效果。

二维码插件（qrcode）的使用相关推荐

最新文章

热门文章

二维码插件（qrcode）的使用

代码实现

1、给分享一个点击事件

2、遮罩层

3、在data中定义的值

4、下载插件（qrcode）

5、使用

1）、引入插件

2）、使用（在这里直接复制官方的内容就行）

效果

手机上的效果

注意:在这里我的网络是局域网，手机和电脑必须是连的同一个的网路，才可以看到效果。

二维码插件（qrcode）的使用相关推荐

最新文章

热门文章

`注意`:在这里我的网络是局域网，手机和电脑必须是连的同一个的网路，才可以看到效果。