腳本之家服務器常用軟件

快捷導航

Vue實現(xiàn)生成二維碼的簡單方式

更新時間：2023年01月05日 11:12:01 作者：?冷風20°C???

與后端生成二維碼相比,前端生成二維碼更具有靈活性,下面這篇文章主要給大家介紹了關于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; //設置白色背景色
    padding: 6px; // 利用padding的特性，擠出白邊
  }
}
</style>

本人是把樣式也寫在111.vue文件里面，也可以分開去寫！

④啟動項目

1. 在終端輸入啟動項目命令

npm run serve

成功啟動項目：

2. 在瀏覽器中輸入訪問地址

http://localhost:8080/111

這里我們設計了路由，所以輸入/111相當于輸入/111.vue

可以在src/router/index.ts中添加一下代碼：

const routes: Array<RouteRecordRaw> = [
{
    path: '/111',
    name: '生成二維碼',
    component: () => import('../views/111.vue')
}
]

3. 訪問生成的二維碼

4. 掃碼進行解析

識別圖中的二維碼后，可以看到顯示我們自己設置的文本內(nèi)容“Vue實現(xiàn)生成二維碼！”

總結(jié)

到此這篇關于Vue實現(xiàn)生成二維碼的文章就介紹到這了,更多相關Vue生成二維碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

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