vue 二維碼長(zhǎng)按保存和復(fù)制內(nèi)容操作

更新時(shí)間：2020年09月22日 09:32:47 作者：小蟲1

這篇文章主要介紹了vue 二維碼長(zhǎng)按保存和復(fù)制內(nèi)容操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

效果圖：

二維碼用了 qrcode.vue

npm install qrcode.vue --save 　

復(fù)制內(nèi)容用了 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">
    長(zhǎng)按保存至相冊(cè)
    <img :src="qrcodeImgSrc" class="qrcode-img"/>
  </div>

注意，qrcode.vue渲染的是一個(gè)canvas,canvas可以通過(guò)toDataURL方法轉(zhuǎn)換為png圖片。

長(zhǎng)按保存功能是在長(zhǎng)按上加一張圖片，設(shè)置這張圖片的opacity為0即可。

模擬a標(biāo)簽點(diǎn)擊下載的方法在微信上有問(wèn)題。

let myCanvas = document.getElementById('picture').getElementsByTagName('canvas')[0];

this.qrcodeImgSrc = myCanvas.toDataURL('image/png'); 　　

2.點(diǎn)擊按鈕，復(fù)制粘貼功能：

<div class="copy">
          <span>{{shareUrl}}</span>
          <span @click="doCopy">復(fù)制</span>
 </div>

doCopy() {
      this.$copyText(this.shareUrl).then(function (e) {
        alert('Copied')
        console.log(e)
      }, function (e) {
        alert('Can not copy')
        console.log(e)
      })
    }

補(bǔ)充知識(shí)：vue插件qrcode實(shí)現(xiàn)手機(jī)端二維碼保存功能

1.安裝

npm install qrcode --save

2.頁(yè)面引入并使用

利用<img src="">標(biāo)簽，實(shí)現(xiàn)二維碼圖片功能。然后長(zhǎng)按保存即可。

<template>
  <div class="qrcode">
    <canvas id="canvas" style="display:none"></canvas>   
    <img :src="imgUrl"/>
    <p>長(zhǎng)按保存二維碼圖片</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 二維碼長(zhǎng)按保存和復(fù)制內(nèi)容操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)按鈕的長(zhǎng)按功能
這篇文章主要介紹了vue實(shí)現(xiàn)按鈕的長(zhǎng)按功能,點(diǎn)擊按鈕實(shí)現(xiàn)長(zhǎng)按，用戶需要按下按鈕幾秒鐘，然后觸發(fā)相應(yīng)的事件，本文通過(guò)實(shí)例代碼給大家分享實(shí)現(xiàn)思路，感興趣的朋友一起看看吧
2022-01-01
詳解如何更好的使用module vuex
這篇文章主要介紹了詳解如何更好的使用module vuex，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-03-03
vue2過(guò)濾器模糊查詢方法
今天小編就為大家分享一篇vue2過(guò)濾器模糊查詢方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue實(shí)現(xiàn)上拉加載下一頁(yè)效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)上拉加載下一頁(yè)效果，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下
2022-08-08
Vue中錯(cuò)誤圖片的處理的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue中錯(cuò)誤圖片的處理的實(shí)現(xiàn)代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
使用Vue3和Echarts?5繪制帶有立體感流線中國(guó)地圖(推薦收藏!)
最近接到一個(gè)需求是做一個(gè)中國(guó)地圖,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3和Echarts?5繪制帶有立體感流線中國(guó)地圖的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
Vue循環(huán)中多個(gè)input綁定指定v-model實(shí)例
這篇文章主要介紹了Vue循環(huán)中多個(gè)input綁定指定v-model實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
Vue讀取本地靜態(tài).md并側(cè)邊欄導(dǎo)航跳轉(zhuǎn)、展示.md文件的操作方法
這篇文章主要介紹了Vue讀取本地靜態(tài).md并側(cè)邊欄導(dǎo)航跳轉(zhuǎn)、展示.md文件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-08-08
在線使用iconfont字體圖標(biāo)的簡(jiǎn)單實(shí)現(xiàn)
這篇文章主要介紹了在線使用iconfont字體圖標(biāo)的簡(jiǎn)單實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
前端實(shí)現(xiàn)不同角色登入展示不同頁(yè)面效果實(shí)例
要實(shí)現(xiàn)不同角色登錄跳轉(zhuǎn)不同的前端頁(yè)面,可以在登錄成功后,根據(jù)用戶的角色信息,使用路由跳轉(zhuǎn)到不同的頁(yè)面,這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)不同角色登入展示不同頁(yè)面效果的相關(guān)資料,需要的朋友可以參考下
2024-08-08