快捷導(dǎo)航

Vue使用QrcodeVue生成二維碼并下載的示例代碼

更新時(shí)間：2023年08月03日 10:09:05 作者：A_ugust__

這篇文章主要給大家介紹了Vue使用QrcodeVue生成二維碼并下載的示例,文章中有詳細(xì)的代碼示例供大家參考,感興趣的小伙伴可以參考閱讀下

生成二維碼

1、安裝qrcode.vue組件

npm install --save qrcode.vue

<template>
  <div id="app">
   <qrcode-vue :value='value' :size='size'></qrcode-vue><br />
  </div>
</template>
<script>
//導(dǎo)入組件
import QrcodeVue from 'qrcode.vue'
export default {
  name: 'App',
  data() {
    return {
      value: '掃我！', //二維碼內(nèi)容
      size: 300, //二維碼大小
    }
  },
  //導(dǎo)入組件
  components: {
    QrcodeVue,
  },
}
</script>

下載二維碼

使用a標(biāo)簽的download實(shí)現(xiàn)下載功能。

<template>
  <div id="app">
   <qrcode-vue :value='value' :size='size'></qrcode-vue><br />
   <button v-on:click="download()" id="download">下載</button>
  </div>
</template>
<script>
import QrcodeVue from 'qrcode.vue'
export default {
  name: 'App',
  data() {
    return {
      value: '別掃我！',
      size: 300,
    }
  },
  components: {
    QrcodeVue,
  },
  methods: {
    download() {
      //獲取canvas標(biāo)簽
      let canvas = document.getElementById('app').getElementsByTagName('canvas')
      //創(chuàng)建a標(biāo)簽
      let a = document.createElement('a')
      //獲取二維碼的url并賦值為a.href
      a.href = canvas[0].toDataURL('img/png')
      //設(shè)置下載文件的名字
      a.download = '二維碼'
      //點(diǎn)擊事件，相當(dāng)于下載
      a.click()
      //提示信息
      this.$message.warn('下載中，請(qǐng)稍后...')
    },
  },
}
</script>

到此這篇關(guān)于Vue使用QrcodeVue生成二維碼并下載的示例代碼的文章就介紹到這了,更多相關(guān)Vue QrcodeVue生成二維碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue+element-ui JYAdmin后臺(tái)管理系統(tǒng)模板解析
這篇文章主要介紹了vue+element-ui JYAdmin后臺(tái)管理系統(tǒng)模板解析，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
vue時(shí)間格式總結(jié)以及轉(zhuǎn)換方法詳解
項(xiàng)目中后臺(tái)返回的時(shí)間有多種形式,時(shí)間戳、ISO標(biāo)準(zhǔn)時(shí)間格式等，我們需要轉(zhuǎn)化展示成能看的懂得時(shí)間格式,下面這篇文章主要給大家介紹了關(guān)于vue時(shí)間格式總結(jié)以及轉(zhuǎn)換方法的相關(guān)資料,需要的朋友可以參考下
2022-12-12
關(guān)于Vue-cli3煩人的eslint問(wèn)題
這篇文章主要介紹了關(guān)于Vue-cli3煩人的eslint問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue2中seo時(shí)使用vue-meta-info的方法
這篇文章主要介紹了vue2中seo時(shí)使用vue-meta-info,本文通過(guò)實(shí)例代碼給大家詳細(xì)講解，文末給大家補(bǔ)充介紹了vue seo管理 vue-meta-info 動(dòng)態(tài)設(shè)置meta和title的相關(guān)知識(shí)，需要的朋友可以參考下
2022-10-10
Vue3造輪子之Typescript配置highlight過(guò)程
這篇文章主要介紹了Vue3造輪子之Typescript配置highlight過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue單向數(shù)據(jù)流的深入講解
單向數(shù)據(jù)流方式使用一個(gè)上傳數(shù)據(jù)流和一個(gè)下傳數(shù)據(jù)流進(jìn)行雙向數(shù)據(jù)通信,兩個(gè)數(shù)據(jù)流之間相互獨(dú)立,下面這篇文章主要給大家介紹了關(guān)于vue單向數(shù)據(jù)流的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
vue.js配合$.post從后臺(tái)獲取數(shù)據(jù)簡(jiǎn)單demo分享
今天小編就為大家?guī)?lái)一篇vue.js配合$.post從后臺(tái)獲取數(shù)據(jù)簡(jiǎn)單demo分享，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
Vue自定義表單驗(yàn)證(rule，value，callback)使用詳解
這篇文章主要介紹了Vue自定義表單驗(yàn)證(rule，value，callback)使用詳解,今天我們講一講自定義驗(yàn)證規(guī)則具體使用場(chǎng)景和它的三個(gè)參數(shù)意思和使用，需要的朋友可以參考下
2023-07-07
vue中watch監(jiān)聽(tīng)器的觸發(fā)時(shí)機(jī)(watch的坑及解決)
這篇文章主要介紹了vue中watch監(jiān)聽(tīng)器的觸發(fā)時(shí)機(jī)(watch的坑及解決)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue實(shí)現(xiàn)多級(jí)菜單效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多級(jí)菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10