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)


相关推荐

  • php源码审计_代码审计入门cms

    php源码审计_代码审计入门cms目录一:代码审计的定义二:为什么选择PHP学习代码审计三:入门准备四:PHP常见的套路4.1 代码结构4.2 目录结构4.3参考项目五:如何调试代码六:代码审计的本质一:代码审计的定义通过阅读一些程序的源码去发现潜在的漏洞,比如代码不规范,算法性能不够,代码重用性不强以及其他的缺陷等等从安全人员的角度来看是:查找代码中是否存在安全问题,推断用户在操…

  • sendip linux发包工具

    sendip linux发包工具第一步:安装sendip工具sudoapt-getupdatesudoapt-getinstallsendipmansendip//可以查看sendip的使用方法第二步:使用开启两台虚拟机,在其中一台执行sendip命令,在另一台抓包分析sendip命令格式:sendip网络层传输层数据domainsendip-v-p***-is***-id***-p***-f/-d***

  • 解决WinSCP连接kali linux被拒绝的问题

    解决WinSCP连接kali linux被拒绝的问题在kali终端里输入:servicesshrestart,然后再使用WinSCP连接即可。

  • jq的 on 事件委托 导致多次执行问题

    jq的 on 事件委托 导致多次执行问题

  • Android原生系统真的那么好用吗?安卓原生系统吊打其他系统,因为有Google-Play

    Android原生系统真的那么好用吗?安卓原生系统吊打其他系统,因为有Google-PlayAndroid原生系统真的那么好用吗?这种问题当然是否定的。原生Android(指的是直接基于AOSP构建的而非手机厂商出厂固件修改的第三方ROM,但包括Nexus/Pixel或其它被Google直接支持的手机的可能是闭源的出厂固件)对于适合的人而言是无可替代的,当前几乎无任何定制ROM就与之相比。但是对于更多的中国用户而言,他们从一开始就使用的是定制系统,已经习惯了那一套逻辑和对系统的认知,所以定制系统是更好的选择(但您们最好祈祷一下手机厂商的ROM不要越来越不要脸)。当然.

  • redhat6配置yum源_centos7yum源的配置

    redhat6配置yum源_centos7yum源的配置一、配置本地yum源首先将已连接和启动时连接勾选上将操作系统镜像上传到虚拟机(/root)上创建一个挂载目录mkdir-p/dvd/iso将iso镜像文件挂载到/dvd/isomount/root/rhel-server-7.0-x86_64-dvd.iso/dvd/iso查看状态df-Th然后进入/etc/yum.repo/创建一个文件并编辑(文件名可以随便,但后缀必须为.repo)vimdvd.repo[dvd]name=dvd..

发表回复

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

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