Vue實(shí)現(xiàn)生成二維碼的簡(jiǎn)單方式
前言
與后端用Java實(shí)現(xiàn)生成二維碼相比,在前端用Vue生成二維碼更加簡(jiǎn)單、靈活。
①首先創(chuàng)建一個(gè)vue項(xiàng)目
可以用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. 進(jìn)行封裝
<script> export default { name: "qrCode", data() { return {} }, mounted: function () { this.$nextTick(function () { this.bindQRCode(); }) }, methods: { bindQRCode: function () { new QRCode(this.$refs.qrCodeDiv, { text: 'Vue實(shí)現(xiàn)生成二維碼!', width: 200, height: 200, colorDark: "#333333", //二維碼顏色 colorLight: "#ffffff", //二維碼背景色 correctLevel: QRCode.CorrectLevel.L//容錯(cuò)率,L/M/H }) } } } </script>
5. less控制樣式
布局樣式大家可以根據(jù)自己的喜好去定義,也可以用css控制樣式,這里用less控制樣式簡(jiǎn)單舉個(gè)例子:
<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文件里面,也可以分開去寫!
④啟動(dòng)項(xiàng)目
1. 在終端輸入啟動(dòng)項(xiàng)目命令
npm run serve
成功啟動(dòng)項(xiàng)目:
2. 在瀏覽器中輸入訪問地址
http://localhost:8080/111
這里我們?cè)O(shè)計(jì)了路由,所以輸入/111相當(dāng)于輸入/111.vue
可以在src/router/index.ts中添加一下代碼:
const routes: Array<RouteRecordRaw> = [ { path: '/111', name: '生成二維碼', component: () => import('../views/111.vue') } ]
3. 訪問生成的二維碼
4. 掃碼進(jìn)行解析
識(shí)別圖中的二維碼后,可以看到顯示我們自己設(shè)置的文本內(nèi)容“Vue實(shí)現(xiàn)生成二維碼!”
總結(jié)
到此這篇關(guān)于Vue實(shí)現(xiàn)生成二維碼的文章就介紹到這了,更多相關(guān)Vue生成二維碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解swiper在vue中的應(yīng)用(以3.0為例)
這篇文章主要介紹了詳解swiper在vue中的應(yīng)用(以3.0為例),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09如何使用elementUI組件實(shí)現(xiàn)表格的分頁(yè)及搜索功能
最近在使用element-ui的表格組件時(shí),遇到了搜索框功能的實(shí)現(xiàn)問題,這篇文章主要給大家介紹了關(guān)于如何使用elementUI組件實(shí)現(xiàn)表格的分頁(yè)及搜索功能的相關(guān)資料,需要的朋友可以參考下2023-03-03vue3+vite+ts?通過(guò)svg-sprite-loader?插件使用自定義圖標(biāo)的詳細(xì)步驟
這篇文章主要介紹了vue3+vite+ts通過(guò)svg-sprite-loader插件使用自定義圖標(biāo),本文分步驟給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09vue2.x 從vue.config.js配置到項(xiàng)目?jī)?yōu)化
這篇文章主要介紹了vue2.x 從vue.config.js配置到項(xiàng)目?jī)?yōu)化,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息
這篇文章主要介紹了vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息,項(xiàng)目結(jié)合vue腳手架和websocket來(lái)搭建,本文給大家分享實(shí)例代碼,需要的朋友可以參考下2019-12-12