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 相关文章推荐
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
JavaScript代码简化技巧实例解析
Sep 09 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
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
Python基础语法(Python基础知识点)
2016/02/28 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
详解Python time库的使用
2019/10/10 Python
python实现简单银行管理系统
2019/10/25 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
医学生实习自我鉴定
2013/09/27 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
实习科室评语
2015/01/04 职场文书
毕业论文致谢词
2015/05/14 职场文书
婚宴来宾致辞
2015/07/28 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
Nginx的基本概念和原理
2022/03/21 Servers
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js