热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

vue二维码长按保存和复制内容操作

这篇文章主要介绍了vue二维码长按保存和复制内容操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

效果图:

二维码用了 qrcode.vue

npm install qrcode.vue --save  

复制内容用了 vue-clipboard2

npm install vue-clipboard2 --save   

1.二维码保存功能:

长按保存至相册

注意,qrcode.vue渲染的是一个canvas,canvas可以通过toDataURL方法转换为png图片。

长按保存功能是在长按上加一张图片,设置这张图片的opacity为0即可。

模拟a标签点击下载的方法在微信上有问题。

let myCanvas = document.getElementById('picture').getElementsByTagName('canvas')[0];

this.qrcodeImgSrc = myCanvas.toDataURL('image/png');   

2.点击按钮,复制粘贴功能:

{{shareUrl}} 复制
doCopy() {
      this.$copyText(this.shareUrl).then(function (e) {
        alert('Copied')
        console.log(e)
      }, function (e) {
        alert('Can not copy')
        console.log(e)
      })
    }
  

补充知识:vue插件qrcode实现手机端二维码保存功能

1.安装

npm install qrcode --save

2.页面引入并使用

利用标签,实现二维码图片功能。然后长按保存即可。


import QRCode from 'qrcode'
export default {
  data() {
    return {
      codes: '',
      imgUrl:''
    }
  },
  components: {
    QRCode: QRCode
  },
  methods: {
    useqrcode() {//生成二维码
      let canvas = document.getElementById('canvas')
      let url="http://www.baidu.com"
      QRCode.toCanvas(canvas, url, function(error) {
        if (error) { console.error(error) } else { console.log('success!'); }
      })
      this.saveImg()//保存图片
    },
    //保存图片
    saveImg(){
      let myCanvas = document.getElementsByTagName('canvas');
      this.imgUrl=myCanvas[0].toDataURL('image/png')             
    },
  },
  mounted() {
    this.useqrcode(); //生成二维码    
  }
}

以上这篇vue 二维码长按保存和复制内容操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


推荐阅读
  • 现在的新手程序猿,动不动就是框架,就连外面培训的也是框架,我就问一句,没了框架是不是就啥也不会了 ... [详细]
  • 本文介绍了在Word文档中添加背景的方法,旨在通过合理的背景设置提升文档的整体视觉效果。 ... [详细]
  • 本文介绍了使用手机号码检查微信账户是否激活的方法。通常情况下,未注册微信的手机号在微信的好友搜索功能中无法找到,除非该号码设置了隐私保护。此外,文章还探讨了当前可利用的第三方平台来高效地进行此类检测。 ... [详细]
  • 随着技术的发展,微知编辑器不断进行功能更新和优化,以更好地满足用户需求。为确保用户能够及时了解最新功能,微知在官方网站设有专门的新功能通知区,方便用户随时查阅。 ... [详细]
  • 本文探讨了在iOS开发中如何利用WKWebView实现H5页面与原生应用的高效融合。通过具体案例分析,展示了一种新颖的方法来解决H5页面内容高度的动态获取问题,旨在为开发者提供实用的技术参考。 ... [详细]
  • 本文介绍如何利用微信提供的JS接口实现关闭当前浏览器页面并自动返回到微信公众号的对话窗口。此功能在实际应用中非常实用,但需要注意在微信开发者工具中可能遇到的兼容性问题。 ... [详细]
  • 本文档详细介绍了如何配置微信登录的相关参数,以及解决用户在房间内无法退出的问题。 ... [详细]
  • 垂直泊车路径设计
    本文探讨了垂直泊车路径的设计原理与实现方法。垂直泊车是指汽车从特定位置出发,经过一系列横向和纵向移动,最终达到与车位垂直停放的状态。路径设计旨在确保泊车过程既高效又安全。 ... [详细]
  • 深入理解Java字节码:方法调用详解
    本文详细介绍了Java字节码中的方法调用机制,通过具体示例解析了字节码如何处理方法调用及其参数传递。文章由Mahmoud Anouti撰写,原文链接:https://dzone.com/articles/introduction-to-java-bytecode ... [详细]
  • 本文通过一系列实验,探讨了Oracle 11g数据库中密码错误验证延迟特性对用户登录速度的影响。实验旨在验证当某个用户因输入错误密码而触发延迟时,是否会影响其他用户的正常登录速度。 ... [详细]
  • 日本7-Eleven新推移动支付系统遭遇重大安全漏洞
    近日,日本7-Eleven推出的移动支付系统因存在严重安全漏洞,导致大量用户账户被盗刷,总额高达5500万日元。 ... [详细]
  • 本文深入探讨了微信小程序直播中点赞动画的实现方法,特别是如何利用三阶贝塞尔曲线使点赞图标沿预设路径移动,以及相关的数学计算与代码实现。 ... [详细]
  • 探索CNN的可视化技术
    神经网络的可视化在理论学习与实践应用中扮演着至关重要的角色。本文深入探讨了三种有效的CNN(卷积神经网络)可视化方法,旨在帮助读者更好地理解和优化模型。 ... [详细]
  • STM32代码编写STM32端不需要写关于连接MQTT服务器的代码,连接的工作交给ESP8266来做,STM32只需要通过串口接收和发送数据,间接的与服务器交互。串口三配置串口一已 ... [详细]
  • 本文将深入探讨两个有趣且引人思考的话题:一是许多程序员缺乏盲打技巧这一基础能力;二是技术管理者与技术专家之间的角色差异及国内现状。 ... [详细]
author-avatar
续2502915941
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有