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_06_理解对象的创建过程
Oct 15 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
微信小程序url传参写变量的方法
Aug 09 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
微信小程序点击滚动到指定位置的实现
May 22 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 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
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
PHP 面向对象 final类与final方法
2010/05/05 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
理解AngularJs指令
2015/12/10 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
centos6.4下python3.6.1安装教程
2017/07/21 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
flask框架路由常用定义方式总结
2019/07/23 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
聊聊python中的循环遍历
2020/09/07 Python
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
中专毕业生自荐信范文
2013/11/28 职场文书
服务宗旨标语
2014/07/01 职场文书
推广活动策划方案
2014/08/23 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
学生退学证明
2015/06/23 职场文书
公司周年庆典致辞
2015/07/30 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
Python 如何实现文件自动去重
2021/06/02 Python
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android