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 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
理解JavaScript变量作用域更轻松
Oct 25 Javascript
javascript 模拟点击广告
Jan 02 Javascript
javascript动态加载二
Aug 22 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
微信小程序云开发详细教程
May 16 Javascript
Vue实现菜单切换功能
Nov 08 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
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
3种php生成唯一id的方法
2015/11/23 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
PHP实现递归的三种方法
2020/07/04 PHP
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
js验证密码强度解析
2020/03/18 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
python调用shell的方法
2013/11/20 Python
python中执行shell命令的几个方法小结
2014/09/18 Python
深入理解NumPy简明教程---数组2
2016/12/17 Python
django使用LDAP验证的方法示例
2018/12/10 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
硕士研究生个人求职信
2013/12/04 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
万里长城导游词
2015/01/30 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
太行山上观后感
2015/06/05 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
MySQL快速插入一亿测试数据
2021/06/23 MySQL
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis