vue中生成二维码

系统管理员 2023-02-17 03:48 18阅读 0赞

先安装插件：

**npm install --s qrcode**

**引入插件：**

import QRCode from "qrcode"; //引入生成二维码插件

页面中canvas用来显示二维码

<canvas id="QRCode"></canvas>

触发按钮

<el-button size="mini" @click="share(scope.$index, scope.row)">分享文章</el-button>

data中加入生成二维码的url变量

shareUrl:'',//文章的分享url

因为页面列表中每列都有二维码生成按钮，每个生成二维码的url都不同，所以要在watch中监听该变量的变化

watch: \{

// 通过监听分享地址变动来修改canvas的数据

shareUrl(val) \{

// 获取页面的canvas

var msg = document.getElementById("QRCode");

// 将获取到的数据（val）画到msg（canvas）上

QRCode.toCanvas(msg, val, function(error) \{

console.log(error);

\});

\}

\},

methods: \{

//点击分享文章按钮出现二维码弹窗

share:function(index, row)\{

console.info("index",index,"row",row);

let shareUrl = 'https://www.baidu.com/'+(new Date()).valueOf();//模拟row中的url地址

this.shareUrl = shareUrl;//生成的二维码为URL地址

\},

\}

可参考：[https://www.jianshu.com/p/43a867d364be][https_www.jianshu.com_p_43a867d364be]

[https_www.jianshu.com_p_43a867d364be]: https://www.jianshu.com/p/43a867d364be

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue生成二维码

前言本次将教大家如何只通过vue前端快速的生成二维码步骤安装依赖通过命令 npm install qrcodejs2 安装二维码生成的依

╰半夏微凉°/ 2024年04月01日 09:12/ 0 赞/ 95 阅读

相关 vue：生成二维码 qrcode、vue-qr（二维码中间可带logo）

一、方法一 qrcode [qrcode - npm][] 1.1、安装 > yarn add qrcode 1.2、页面引入 import QRCode f

水深无声/ 2024年03月24日 12:25/ 0 赞/ 76 阅读

相关 VUE生成二维码或条形码

二维码生成 \`qrcode\` 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

超、凢脫俗/ 2023年10月03日 20:38/ 0 赞/ 72 阅读

相关 vue中生成二维码

先安装插件： npm install --s qrcode 引入插件： import QRCode from "qrcode"; //引入生成二维码插件页面中canv

系统管理员/ 2023年02月17日 03:48/ 0 赞/ 19 阅读

相关 vue生成二维码并下载二维码

首先安装一下面这个插件 cnpm install vue-qr -S 接下来在需要生产并下载二维码的页面引入 import VueQr from 'v

迈不过友情╰/ 2023年02月14日 15:33/ 0 赞/ 211 阅读

相关 Vue 生成二维码

[https://www.cnblogs.com/TreeCTJ/p/12736833.html][https_www.cnblogs.com_TreeCTJ_p_127368

灰太狼/ 2022年11月27日 03:22/ 0 赞/ 237 阅读

相关生成二维码

相关博客：[统一返回结果][Link 1] 创建SpringBoot项目  <dependency> <gr

傷城~/ 2022年10月20日 13:55/ 0 赞/ 356 阅读

相关 vue生成二维码并下载

vue生成二维码图片，这里使用的是qrcode.js 这个插件 1、下载插件 npm install --save qrcodejs2 2、组件内使用 <tem

素颜马尾好姑娘i/ 2022年09月06日 00:12/ 0 赞/ 233 阅读

相关 vue中动态生成二维码

二维码的url是url+动态参数，完美兼容，亲试可用！ [vue项目中动态生成二维码][vue] 有问题关注公众号：wander\_yun。原则：只分享经过实践，测

偏执的太偏执、/ 2022年04月22日 02:08/ 0 赞/ 347 阅读

相关 Vue中使用二维码插件qrcodejs2生成二维码

1.安装 qrcodejs2 npm install qrcodejs2 --save 2.在需要使用的组件内引入 <script>

深藏阁楼爱情的钟/ 2022年01月15日 02:03/ 0 赞/ 691 阅读