欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2021年12月08日 16:22:18   作者:假我和尚  
這篇文章主要為大家介紹了Vue使用vue-qr生成二維碼的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助

“二維碼”的英文是“QR Code”,“QR”是“Quick Response”的縮寫,反映出這種二維碼具有“超高速識讀”的特點?!癚uick Response Code”也就是“快速響應碼”。

npm下載

npm install vue-qr --save

下載成功:

在這里插入圖片描述

步驟

(1)導入

import VueQr from 'vue-qr'

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

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

結果:

在這里插入圖片描述

總結

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

相關文章

  • VUE實現(xiàn)日歷組件功能

    VUE實現(xiàn)日歷組件功能

    本篇文章主要介紹了VUE實現(xiàn)日歷組件功能,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-03-03
  • 詳解vue2.0 資源文件assets和static的區(qū)別

    詳解vue2.0 資源文件assets和static的區(qū)別

    這篇文章主要介紹了詳解vue2.0 資源文件assets和static的區(qū)別,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2018-11-11
  • Vue DPlayer詳細使用教程含遇到坑

    Vue DPlayer詳細使用教程含遇到坑

    Vue-DPlayer是一個易于使用、高性能的基于Vue.js的視頻播放器組件,本文給大家介紹Vue DPlayer詳細使用,本文將從四個方面對Vue-DPlayer進行詳細的闡述,感興趣的朋友一起看看吧
    2023-10-10
  • 輕量級富文本編輯器wangEditor結合vue使用方法示例

    輕量級富文本編輯器wangEditor結合vue使用方法示例

    在我們項目中,有些時候需要使用富文本編輯器。本文將以百度開發(fā)的Ueditor結合Vue.js介紹一下。非常具有實用價值,需要的朋友可以參考下
    2018-10-10
  • vue3中vue-meta的使用方法解析

    vue3中vue-meta的使用方法解析

    這篇文章主要介紹了vue3中vue-meta的使用方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • 在vue中使用?jquery?的兩種方法小結

    在vue中使用?jquery?的兩種方法小結

    這篇文章主要介紹了在vue中使用?jquery?的兩種方法小結,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue-cli history模式實現(xiàn)tomcat部署報404的解決方式

    vue-cli history模式實現(xiàn)tomcat部署報404的解決方式

    這篇文章主要介紹了vue-cli history模式實現(xiàn)tomcat部署報404的解決方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-09-09
  • vue-cli創(chuàng)建vue項目的詳細步驟記錄

    vue-cli創(chuàng)建vue項目的詳細步驟記錄

    vue.cli是vue中的項目構造工具,是一個npm包,需要安裝node.js和 git才能用,下面這篇文章主要給大家介紹了關于利用vue-cli創(chuàng)建vue項目的詳細步驟,需要的朋友可以參考下
    2022-06-06
  • VUE?Element修改el-input和el-select長度的具體步驟

    VUE?Element修改el-input和el-select長度的具體步驟

    這篇文章主要給大家介紹了關于VUE?Element修改el-input和el-select長度的具體步驟,文中通過代碼介紹的非常詳細,對大家學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-12-12
  • Vue引用vee-validate插件表單驗證問題(cdn方式引用)

    Vue引用vee-validate插件表單驗證問題(cdn方式引用)

    這篇文章主要介紹了Vue引用vee-validate插件表單驗證問題(cdn方式引用),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12

最新評論