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 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
用PHP动态创建Flash动画
2006/10/09 PHP
模拟flock实现文件锁定
2007/02/14 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
js实现字符串的16进制编码不加密
2014/04/25 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
python issubclass 和 isinstance函数
2019/07/25 Python
Python中函数的返回值示例浅析
2019/08/28 Python
python如何获取apk的packagename和activity
2020/01/10 Python
Python实现不规则图形填充的思路
2020/02/02 Python
Python字符串三种格式化输出
2020/09/17 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
企业治理工作自我评价
2013/09/26 职场文书
医德医风演讲稿
2014/05/20 职场文书
体操比赛口号
2014/06/10 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
python 字典和列表嵌套用法详解
2021/06/29 Python