vue項目中自動生成二維碼

• 我們在做vue項目時，很多時候要用到生成二維碼的功能，今天給大家介紹一個有前端生成二維碼的小例子：
  1、安裝vue-qr：

npm isntall vue-qr --save

2、在組件中引入

<template><div><vue-qr :logoSrc="imgPath" :text="value" :colorDark="stype" :size="150"></vue-qr></div> </template><script>// 引入vue-qrimport VueQr from 'vue-qr'export default{name: 'qr',data(){// 要顯示的值，如果為跳轉地址加http：//value: '我是二維碼生成的內容',// value: 'http://www.baidu.com',imgPath: require('../assets/logo.png'),stype: '#0f0',},// 掛載components:{VueQr}} </script>

• vue-qr的配置

bgSrc —— 背景圖 logoSrc —— 欲嵌入至二維碼中心的 LOGO 地址 colorDark —— 實點顏色 colorLight —— 空白區顏色 dotScale —— 數據區域點縮小比例

總結

以上是生活随笔為你收集整理的vue项目中自动生成二维码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。