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 相关文章推荐
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
详解async/await 异步应用的常用场景
May 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实现返回JSON和XML的类分享
2015/01/28 PHP
php连接mysql数据库
2017/03/21 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
jquery animate 动画效果使用说明
2009/11/04 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
Python扩展内置类型详解
2018/03/26 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
python做反被爬保护的方法
2019/07/01 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
麦当劳辞职信范文
2014/01/18 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
投资意向书范本
2014/04/01 职场文书
经理任命书模板
2014/06/06 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
考试没考好检讨书
2015/05/06 职场文书
2015年财政局工作总结
2015/05/21 职场文书