vue 一个动态链接url转成二维码

news/2024/7/19 16:43:19 标签: vue, js

安装相关的依赖包

npm install qrcode2 --save

template中需要展示的容器

<div id="qrcode" ref="qrcode"></div>

不要不忘了引入这个组件

 components: { QRCode },

js代码中写入转换为二维码方法

 //生成二维码
    qrcodeScan() {
      //这里是为了 每次进入方法就删除上一张二维码
      document.getElementById("qrcode").innerHTML = "";
      //获取url
      let data = {
        itemId: this.id
      }
      reqGetItemShortUrl(data).then((res) => {
        this.codeUrl = res.data.data
        // 生成二维码
        new QRCode(document.getElementById("qrcode"), {
          text: res.data.data, // 这里为动态二维码地址
          width: 164,  // 二维码宽度 
          height: 164, // 二维码高度 
          correctLevel: QRCode.CorrectLevel.H  // 二维码容错级别 H M L
        })
      });
    },

调用二维码方法,就实现效果了

mounted() {
    this.qrcodeScan()
  },

http://www.niftyadmin.cn/n/874707.html

相关文章

vb.net源码获取优盘序列号_并发类 AtomicLong 使用入门及源码详解

AtomicLong 介绍AtomicLong可以原子更新的 Long 值。AtomicLong用于诸如原子递增的序列号之类的应用程序中&#xff0c;并且不能用作Long的替代品。但是&#xff0c;此类确实扩展了Number&#xff0c;以允许通过处理基于数字的类的工具和实用程序进行统一访问。API 直接查阅 JD…

vue h5 实现一键复制文案功能

点击按钮&#xff0c;实现一键复制纯文案的功能&#xff0c;代码如下&#xff1a; 方法一 原生的方法 一般在浏览器上使用 copyUrl() {let url this.codeUrllet domInput document.createElement(input);domInput.value url;document.body.appendChild(domInput); // 添…

matlab 画同colorbar的图_利用Matlab处理Lumerical FDTD的三角纳米片电场分布仿真结果...

FDTD计算得到的电场分布&#xff0c;但是FDTD通过另存为jpg或者截屏所得到的图片分辨率很低&#xff0c;得到的图片往往不能直接使用。因此&#xff0c;可以通过脚本输入到Maltab&#xff0c;然后再利用Matlab处理图片并输出。  但是将数据从FDTD输出到Matlab中&#xff0c;并…

启动vue时ESLint报错解决方案

默认情况下&#xff0c;ESLint和vscode格式化工具有冲突 Eslint语法太严格&#xff0c;有好几种方法关闭方法。这里直接用个简单的关闭方法 在vue.config.js中添加如下代码&#xff0c;重新nmp run dev 就能正常运行了 lintOnSave: false,//关闭eslint报错和警告

python发邮件未命名附件_python3发邮件,附件名称为中文时出错

问题描述 我写了一个发邮件的类&#xff0c;一切进行的很顺利&#xff0c;但是附件名改成中文的时候就出问题了 问题出现的环境背景及自己尝试过哪些方法 用的是python3*和email包 是了MIMEText、MIMEApplication、MIMEBase都不行 相关代码 // 请把代码文本粘贴到下方&#xff…

vue项目接口响应之前默认给所有接口加上公共参数的操作

在request.js中的请求拦截器里面添加如下代码 如果是get请求 需要在URL后面拼接的话 用到的是 config.params {appkey:appkey}如果是post请求 不需要在URL后面拼接的话 用到的是 config.data {appkey:appkey}那这时候直接添加会有问题 在请求拿到的参数中只会拿到你添加的…

python保存json文件_Python如何存储数据到json文件

1 前言 很多程序都要求用户输入某种信息&#xff0c;程序一般将信息存储在列表和字典等数据结构中。 用户关闭程序时&#xff0c;就需要将信息进行保存&#xff0c;一种简单的方式是使用模块json来存储数据。 模块json让你能够将简单的Python数据结构转存到文件中&#xff0c;并…

Warning: icon should have ‘type‘ prop or ‘component‘ or ‘children‘解决方法

首先报错翻译 [ant-design/icons]应该有一个component或者children 通过排查发现 当icon为""或者null时 就会报这个错 方法如下 将icon " " 中间加个空格就好了 大体意思就是在给 icon 这个组件传值时不能穿空&#xff0c;就算多一个空格符也好&#xf…