Vue生成二维码_后端生成二维码还是前端

Vue生成二维码_后端生成二维码还是前端vue生成二维码分享功能生成二维码听起来很难,其实也很简单先看一下效果:效果就是这个样子首先给要分享的dom一个点击触发事件<!–分享–><divclass=”rightimg”@click=”share”><imgsrc=”../assets/img/share.png”/></div>然后在vant-ui框架里找到合适组件(遮罩层)直接复制过去就可以,不要的东西删掉

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

vue生成二维码分享功能

生成二维码听起来很难,其实也很简单

先看一下效果:

在这里插入图片描述

在这里插入图片描述

效果就是这个样子

首先给要分享的dom一个点击触发事件

 <!-- 分享 -->
      <div class="rightimg" @click="share">
        <img src="../assets/img/share.png" />
      </div>

然后在vant-ui框架里找到合适组件 (遮罩层)

在这里插入图片描述

直接复制过去就可以,不要的东西删掉

 <!-- vant引入遮罩层,生成二维码 -->
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper">
        <div class="block">
          <p>分享</p>
          <div>
          //存放二维码的图片
            <img :src="imgUrl" />
          </div>
        </div>
      </div>
    </van-overlay>

在data里面定义状态和图片位置:

data() { 
   
    return { 
   
      // 控制遮罩层显示隐藏
      show:false,
      // 图片路径
      imgUrl:""
    };
  },

这一步操作完成之后,然后下载一个生成二维码的插件

生成二维码插件的地址链接

打开链接

上面说得很清楚 直接下载

npm install –save qrcode

使用方法:

import QRCode from 'qrcode'  //在哪使用就在哪引用
QRCode.toDataURL('I am a pony!')
  .then(url => { 
   
    console.log(url)
  })
  .catch(err => { 
   
    console.error(err)
  })

toDataURL方法是生成二维码的 后面跟你要生成二维码的路径

知道这个以后 开始写我们的分享方法

// 分享
    share() { 
   
    //点击显示遮罩层
      this.show = true;
      //获取当前地址栏的地址
      let url = location.href;
      console.log(url);  
      //把当前地址栏的路径放到toDataURL后面,就会生成二维码
      QRCode.toDataURL(url)
        .then(img => { 
   
          console.log(img);
          //把生成的二维码赋值给上面定义好的imgUrl 
          this.imgUrl = img;
        })
        //错误返回信息
        .catch(err => { 
   
          console.error(err);
        });
    }

可以看我打印出的东西是什么

在这里插入图片描述

这样就没问题了

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/188339.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • java设计模式演示样例

    java设计模式演示样例

    2021年11月30日
  • oracle常用操作_oracle日志文件在哪里

    oracle常用操作_oracle日志文件在哪里如果某个oracle账户经常被锁定,说明有应用程序或有人远程连接数据库多次失败后导致账户被锁定,oracle默认是有次数限制的,可以通过以下方式解决问题:1、用管理员账户登录:connsys/sysassysdba;2、解锁账户:alteruserscottaccountunlock;3、重置账户密码:alteruserscottidentifiedbytiger;4、授权:grantresource,connecttoscott;5、修改oracle默认配置:al

    2022年10月28日
  • 海思Hi3798硬件设计,Hi3798 datasheet(2)参考资料

    海思Hi3798硬件设计,Hi3798 datasheet(2)参考资料本文主要介绍Hi3798CV200芯片的硬件封装、管脚描述、管脚复用寄存器的配置方法、电气特性参数、原理图设计建议、PCB设计建议、热设计建议等内容。本文主要为硬件工程师提供硬件设计的参考。2.1封装Hi3798CV200芯片TFBGA(ThinFineBGApackage)封装,封装尺寸为19mm×19mm,管脚间距为0.8mm,管脚总数为433个,详细封装…

  • zabbix监控apache[通俗易懂]

    zabbix监控apache[通俗易懂]准备两台虚拟机(192.168.135.129192.168.135.142)准备环境:  安装源码包 1 rpm-ivhhttp://repo.zabbix.com/zabbix/4.4/rhel/7/x86_64/zabbix-release-4.4-1.el7.noarch.rpm   安装服务端需要的东西安装可以多试几次,可能由于网络原因导致下载不上 1 yum-yinstallz…

  • 堆和栈的区别

    堆和栈的区别转:https://my.oschina.net/aofe/blog/267882堆和栈的区别:·1>堆空间的内存是动态分配的,一般存放对象,并且需要手动释放内存。需要程序员自

  • Duanxx的STM32学习:STM32F103中等容量的功能和外设

    Duanxx的STM32学习:STM32F103中等容量的功能和外设

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号