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


Posted in Javascript onSeptember 22, 2020

效果图:

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

二维码用了 qrcode.vue

npm install qrcode.vue --save  

复制内容用了 vue-clipboard2

npm install vue-clipboard2 --save

1.二维码保存功能:

<div class="qrcode">
    <qrcode-vue
      :size="qrcodeSize"
      :value="shareUrl"
      id="picture"
    ></qrcode-vue>
  </div>
  <div class="btn">
    长按保存至相册
    <img :src="qrcodeImgSrc" class="qrcode-img"/>
  </div>

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

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

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

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

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

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

<div class="copy">
          <span>{{shareUrl}}</span>
          <span @click="doCopy">复制</span>
 </div>
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.页面引入并使用

利用<img src="">标签,实现二维码图片功能。然后长按保存即可。

<template>
  <div class="qrcode">
    <canvas id="canvas" style="display:none"></canvas>   
    <img :src="imgUrl"/>
    <p>长按保存二维码图片</p> 
  </div>
</template>
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(); //生成二维码    
  }
}
</script>

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

Javascript 相关文章推荐
用JavaScript隐藏控件的方法
Sep 21 Javascript
测试你的JS的掌握程度的代码
Dec 09 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
JavaScript动态数量的文件上传控件
Nov 18 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 #Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 #Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 #Javascript
小程序实现录音功能
Sep 22 #Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 #Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 #Javascript
JS实现无限轮播无倒退效果
Sep 21 #Javascript
You might like
收音机的保养
2021/03/01 无线电
PHP类的反射用法实例
2014/11/03 PHP
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
js动态切换图片的方法
2015/01/20 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
python自动化测试实例解析
2014/09/28 Python
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
Django开发中的日志输出的方法
2018/07/02 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
工作收入住址证明
2014/10/28 职场文书
婚庆司仪开场白
2015/05/29 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
Django实现翻页的示例代码
2021/05/24 Python
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers