安装qrcodejs模块

npm i qrcodejs2 -S

样式文件 style.css

.qrcode {padding-top: 0.21333333rem;padding-bottom: 0.21333333rem;
}.qrcode .qrcode_content {display: flex;justify-content: center;
}

封装成组件 qrcode.vue

<template><div class="qrcode"><div class="qrcode_content" :id="name"></div></div>
</template>
<script>
import QRcode from "qrcodejs2";
let qrcode = "";
export default {name: "qrcode",data() {return {};},computed: {name: {get() {let sid = "qrcode";if (this.sid) {sid = this.sid;}return sid;},set(value) {this.name = value;},},value: {get() {let value ="https：//xxxxxxxx/xxxxxxxxx"; //要生成二维码的链接if (this.text) {value = this.text;}return value;},set(value) {this.value = value;},},qrwidth() {let width = 0;if (this.swidth) {width = this.swidth; //370*320/(window.innerWidth)/20} else {width = 5.33; //250*320/(window.innerWidth)/20}return width;},},props: {sid: {type: String,},text: {type: String,},swidth: {type: Number,},},methods: {qrcode() {if (qrcode) {qrcode = null;} else {qrcode = new QRcode(this.name, {width: (this.qrwidth * 20 * window.innerWidth) / 320,height: (this.qrwidth * 20 * window.innerWidth) / 320, // 高度  ,250*320/(window.innerWidth)/20text: this.value, // 二维码内容image: "",correctLevel: QRcode.CorrectLevel.L,//容错级别，可设置为：(低到高)// QRCode.CorrectLevel.L// QRCode.CorrectLevel.M// QRCode.CorrectLevel.Q// QRCode.CorrectLevel.H// render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）// background: '#f0f'// foreground: '#ff0'});}console.log(qrcode);},},destroyed() {qrcode = null;},mounted() {this.qrcode();},
};
</script>
<style lang="scss" scoped>
// 注意修改文件路径
@import "../assets/style.css";
</style>

创建容器、使用组件

<template><div><Qrcode sid="url" :text="codeText" :swidth="swidth"></Qrcode></div>
</template>
<script>
// 注意修改文件路径
import Qrcode from "./qrcode.vue";
export default {data() {return {url: "",codeText: "",};},components: {Qrcode,},computed: {swidth() {return (window.innerWidth * 0.9 * 0.4 * 100) / window.innerWidth / 20; //370*320/(window.innerWidth)/20},},mounted() {this.url = this.QrcodeUrl;this.codeText = this.QrcodeText;},
};
</script>

vue2 qrcodejs2链接生成二维码相关推荐

链接生成二维码( QRCode )
Vue中链接生成二维码安装插件 sudo npm install qrcodejs2 --save 页面中引入 import QRCode from "qrcodejs2"; c ...
js实现将链接生成二维码，并对生成的二维码转换为图片，右击可保存至本地
在vue项目中,实现将链接生成二维码:可识别跳转,将生成的二维码可转换成图片,并可保存至本地.具体操作步骤如下: 1.安装及引用首先,实现这个功能需要使用QRCode和html2canvas,所以在 ...
dom 生成图片和链接生成二维码
1. dom 生成图片此处使用的是 html2canvas 插件和canvas2image插件 html2canvas 方法的第二个入参还有很多选项可以配置,详情请看这里这里 html 1 < ...
java 根据指定链接生成二维码
需求: 就是需要把一个报告网址链接生成二维码,然后渲染在报告中,扫描二维码的时候能访问到这个报告,效果就达到了 1.首先提前需要添加的maven依赖 <!-- https://mvnreposi ...
iOS常用功能 - 根据链接生成二维码图片
根据链接生成二维码 1 -(void)generatingTwoDimensionalCode { 2 3 // 创建过滤器 4 CIFilter *filter = [CIFilter filter ...
百万前端之js通过链接生成二维码可以保存下载复制
在前端工作中,会遇到很多邀请好友的需求,这个时候就需要前端对需求进行实现了. 最终效果: 这个是做好以后的成品,根据链接生成二维码,提供保存二维码和复制链接功能,纯前端实现.话不多说直接上代码 htm ...
js前端根据链接生成二维码并转成图片下载
js前端根据链接生成二维码并转成图片下载依赖于jquery.jquery.qrcode.min.js 1.html <div class="qrcode"></ ...
Python 二维码的读取与生成：使用链接生成二维码、读取二维码里的链接
Python 二维码的读取与生成演示 ① 使用链接生成二维码 ② 读取二维码里的链接 [ 文章推荐 ] Python 绘制中国地图:使用 pyecharts 最新版本绘制中国地图实例详解,个性化地图定 ...
Vue+Element-Ui项目中使用qrcodejs2将链接生成二维码
1. 下载安装包 npm i qrcodejs2 -S 2. 在要生成二维码的页面或组件内导入qrcodejs2 import QRCode from "qrcodejs2"; 3 ...

vue2 qrcodejs2链接生成二维码

安装qrcodejs模块

样式文件 style.css

封装成组件 qrcode.vue

创建容器、使用组件

vue2 qrcodejs2链接生成二维码相关推荐

最新文章

热门文章