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 相关文章推荐
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
js实现两点之间画线的方法
May 12 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 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程序中防止盗链
2008/04/09 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
元旦联欢会策划方案
2014/06/11 职场文书
2014年度党员自我评议
2014/09/13 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
村干部任职承诺书
2015/01/21 职场文书
2016年会开场白台词
2015/06/01 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
中秋节祝酒词
2015/08/12 职场文书
公司会议开幕词
2016/03/03 职场文书
SQL中的三种去重方法小结
2021/11/01 SQL Server
JavaScript实现优先级队列
2021/12/06 Javascript
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL