Vue實現(xiàn)生成二維碼的簡單方式
更新時間：2023年01月05日 11:12:01 作者：?冷風(fēng)20°C???
與后端生成二維碼相比,前端生成二維碼更具有靈活性,下面這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)生成二維碼的簡單方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
前言
與后端用Java實現(xiàn)生成二維碼相比，在前端用Vue生成二維碼更加簡單、靈活。
①首先創(chuàng)建一個vue項目
可以用vue-cli腳手架去生成。
②引入qrcodejs2
在終端輸入以下命令：
npm install qrcodejs2 --save
③封裝組件
1. 創(chuàng)建Vue文件
在src/views路徑下創(chuàng)建111.vue文件
2. 定義template模板
<template>
<body>
<div id="qqq" >
<div id="qrCode" ref="qrCodeDiv"></div>
</div>
</body>
</template>3. 引入QRCode包
import QRCode from 'qrcodejs2';
4. 進行封裝
<script>
export default {
name: "qrCode",
data() {
return {}
},
mounted: function () {
this.$nextTick(function () {
this.bindQRCode();
})
},
methods: {
bindQRCode: function () {
new QRCode(this.$refs.qrCodeDiv, {
text: 'Vue實現(xiàn)生成二維碼！',
width: 200,
height: 200,
colorDark: "#333333", //二維碼顏色
colorLight: "#ffffff", //二維碼背景色
correctLevel: QRCode.CorrectLevel.L//容錯率，L/M/H
})
}
}
}
</script>5. less控制樣式
布局樣式大家可以根據(jù)自己的喜好去定義，也可以用css控制樣式，這里用less控制樣式簡單舉個例子：
<style lang='less'>
#qqq {
background-color: #111;
width:300px;
height:300px;
margin: 0 auto; /*水平居中*/
position: relative;
}
#qrCode {
display: inline-block;
margin: 0 auto; /*水平居中*/
position: relative;
top: 15%;
img {
width: 200px;
height: 200px;
background-color: #fff; //設(shè)置白色背景色
padding: 6px; // 利用padding的特性，擠出白邊
}
}
</style>本人是把樣式也寫在111.vue文件里面，也可以分開去寫！
④啟動項目
1. 在終端輸入啟動項目命令
npm run serve
成功啟動項目：
2. 在瀏覽器中輸入訪問地址
http://localhost:8080/111
這里我們設(shè)計了路由，所以輸入/111相當(dāng)于輸入/111.vue
可以在src/router/index.ts中添加一下代碼：
const routes: Array<RouteRecordRaw> = [
{
path: '/111',
name: '生成二維碼',
component: () => import('../views/111.vue')
}
]3. 訪問生成的二維碼
4. 掃碼進行解析
識別圖中的二維碼后，可以看到顯示我們自己設(shè)置的文本內(nèi)容“Vue實現(xiàn)生成二維碼！”
總結(jié)
到此這篇關(guān)于Vue實現(xiàn)生成二維碼的文章就介紹到這了,更多相關(guān)Vue生成二維碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue 封裝 Adminlte3組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue-cli創(chuàng)建的項目,配置多頁面的實現(xiàn)方法
下面小編就為大家分享一篇vue-cli創(chuàng)建的項目,配置多頁面的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本篇文章主要介紹了詳解vue跨組件通信的幾種方法 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了vue組件庫的在線主題編輯器的實現(xiàn)思路，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
本篇文章主要介紹了詳解Vue路由鉤子及應(yīng)用場景（小結(jié)），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
async和await作為異步函數(shù),語法很簡單,就是在函數(shù)前面加上async 關(guān)鍵字,來表示它是異步的,下面這篇文章主要給大家介紹了如何通過一文教會你vue中使用async和await的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了深入解析Vue的自定義指令,自定義指令主要是為了重用涉及普通元素的底層 DOM 訪問的邏輯,一個自定義指令由一個包含類似組件生命周期鉤子的對象來定義,需要的朋友可以參考下2023-05-05
本文主要介紹了django+vue項目搭建實現(xiàn)前后端通信，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
在之前的前端開發(fā)中，為了實現(xiàn)我們的需求，通常采用的方案是通過 JS/Jquery 直接操縱頁面的 DOM 元素，得益于 Jquery 對于 DOM 元素優(yōu)異的操作能力，我們可以很輕易的對獲取到的 DOM 元素進行操作。這篇文章主要介紹了Vue 中 ref 的使用 ,需要的朋友可以參考下2019-04-04
vue報錯之exports is not defined問題的解決
這篇文章主要介紹了vue報錯之exports is not defined問題的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07