快捷導(dǎo)航

深入了解Vue使用vue-qr生成二維碼的方法

更新時間：2021年12月08日 16:22:18 作者：假我和尚

這篇文章主要為大家介紹了Vue使用vue-qr生成二維碼的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

npm下載

npm install vue-qr --save

下載成功：

在這里插入圖片描述

步驟

（1）導(dǎo)入

import VueQr from 'vue-qr'

（2）vue-qr參數(shù)

text 二維碼，即掃描二維碼后跳轉(zhuǎn)的頁面
size 二維碼大小
margin 二維碼圖像的外邊距, 默認(rèn) 20px
bgSrc 嵌入的背景圖地址
logoSrc 嵌入至二維碼中心的 LOGO 地址
logoScale 中間圖的尺寸
dotScale 二維碼的點的大小
colorDark 實點的顏色（注意：和colorLight一起設(shè)置才有效）
colorLight 空白的顏色（注意：和colorDark一起設(shè)置才有效）
autoColor 若為 true, 背景圖的主要顏色將作為實點的顏色, 即 colorDark,默認(rèn) true

示例

<template>
   <div>
      <vue-qr
         :text="imgUrl"
         :size="250"
         :logoSrc="logo"
         :logoScale="0.2">
      </vue-qr>
   </div>
</template>
<script>
import VueQr from 'vue-qr'
export default {
   name:'', 
   components:{
      VueQr,
   },
   data() {
      return {
         imgUrl: 'https://baidu.com',
         logo: require('@/assets/tea_128.png'),
      }
   },
   methods:{
   },
}
</script>

結(jié)果：

在這里插入圖片描述

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

您可能感興趣的文章:

相關(guān)文章

vue實現(xiàn)的雙向數(shù)據(jù)綁定操作示例
這篇文章主要介紹了vue實現(xiàn)的雙向數(shù)據(jù)綁定操作,結(jié)合完整實例形式較為詳細(xì)的分析了vue.js進行數(shù)據(jù)雙向綁定操作的常見實現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下
2018-12-12
vue loadmore組件上拉加載更多功能示例代碼
這篇文章主要介紹了vue loadmore組件上拉加載更多功能示例代碼,需要的朋友可以參考下
2017-07-07
vue-jsonp的使用及說明
這篇文章主要介紹了vue-jsonp的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
基于Vue實現(xiàn)消息提示功能
這篇文章主要為大家詳細(xì)介紹了如何基于Vue實現(xiàn)簡單的消息提示功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-10-10
vue 如何使用vue-cropper裁剪圖片你知道嗎
這篇文章主要為大家介紹了vue 使用vue-cropper裁剪圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
vue實現(xiàn)文章內(nèi)容過長點擊閱讀全文功能的實例
下面小編就為大家分享一篇vue實現(xiàn)文章內(nèi)容過長點擊閱讀全文功能的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-12-12
Vue組件之高德地圖地址選擇功能的實例代碼
這篇文章主要介紹了Vue組件之高德地圖地址選擇功能的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-06-06
Vue-router路由該如何使用
這篇文章主要介紹了Vue-router路由該如何使用，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-03-03
詳解從vue-loader源碼分析CSS Scoped的實現(xiàn)
這篇文章主要介紹了詳解從vue-loader源碼分析CSS Scoped的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
基于vue3開發(fā)mobile-table適用于移動端表格
這篇文章主要給大家介紹了關(guān)于如何基于vue3開發(fā)mobile-table適用于移動端表格的相關(guān)資料,需要的朋友可以參考下
2024-03-03