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脚本性能优化注意事项
Nov 18 Javascript
javascript 表单规则集合对象
Jul 21 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
php的正则处理函数总结分析
2008/06/20 PHP
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
浅谈python中的占位符
2017/11/09 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
Django中的静态文件管理过程解析
2019/08/01 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
python实现最速下降法
2020/03/24 Python
python有几个版本
2020/06/17 Python
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
安全生产先进个人材料
2014/02/06 职场文书
装修协议书范本
2014/04/21 职场文书
见习报告怎么写
2014/10/31 职场文书
作息时间调整通知
2015/04/22 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
小学教师教学反思
2016/02/24 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript