Vue使用QrcodeVue生成二維碼并下載的示例代碼
更新時間：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實現(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 = '二維碼'
//點擊事件，相當(dāng)于下載
a.click()
//提示信息
this.$message.warn('下載中，請稍后...')
},
},
}
</script>到此這篇關(guān)于Vue使用QrcodeVue生成二維碼并下載的示例代碼的文章就介紹到這了,更多相關(guān)Vue QrcodeVue生成二維碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3實現(xiàn)鼠標(biāo)右鍵顯示菜單,點擊其他地方消失問題
這篇文章主要介紹了vue3實現(xiàn)鼠標(biāo)右鍵顯示菜單,點擊其他地方消失問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
如何利用vue進(jìn)行AJAX,其它vue本身不支持發(fā)送AJAX請求,需要使用vue-resource（vue1.0版本）或axios（vue2.0版本）第三方插件的支持才行2018-10-10
v-if和v-show可能是日常開發(fā)中最常用的兩個指令，雖然看上去兩者功能是類似的，但是兩者還是存在很大區(qū)別的。接下來通過本文給大家分享vue渲染時閃爍{{}}的問題及解決方法，感興趣的朋友一起看看吧2018-03-03
本文主要介紹了vue 面包屑導(dǎo)航組件封裝，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Volar 與vetur相同,volar是一個針對vue的vscode插件,下面這篇文章主要給大家介紹了關(guān)于Vue3格式化Volar報錯的原因分析與解決方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
vue.js如何在網(wǎng)頁中實現(xiàn)一個金屬拋光質(zhì)感的按鈕
這篇文章主要給大家介紹了關(guān)于vue.js如何在網(wǎng)頁中實現(xiàn)一個金屬拋光質(zhì)感的按鈕的相關(guān)資料,文中給出了詳細(xì)的實例代碼以及圖文將實現(xiàn)的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
Vue3之getCurrentInstance與ts結(jié)合使用的方式
這篇文章主要介紹了Vue3之getCurrentInstance與ts結(jié)合使用的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
本篇文章主要介紹了vue父子組件的嵌套的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue3?$emit用法指南(含選項API、組合API及?setup?語法糖)
這篇文章主要介紹了Vue3?$emit用法指南,使用?emit，我們可以觸發(fā)事件并將數(shù)據(jù)傳遞到組件的層次結(jié)構(gòu)中，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-07-07
利用Vue2.x開發(fā)實現(xiàn)JSON樹的方法
這篇文章主要給大家介紹了關(guān)于利用Vue2.x開發(fā)實現(xiàn)JSON樹的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01