VUE3基于vite封裝條形碼和二維碼組件的詳細(xì)過程

更新時(shí)間：2023年08月17日 09:25:53 作者：Elwin0204

基礎(chǔ)組件開發(fā)是項(xiàng)目業(yè)務(wù)開發(fā)的基石, 本文主要介紹了通過vue3的vite腳手架快速搭建項(xiàng)目, 開發(fā)條形碼和二維碼組件的過程,感興趣的朋友跟隨小編一起看看吧

概要

基礎(chǔ)組件開發(fā)是項(xiàng)目業(yè)務(wù)開發(fā)的基石, 本文主要介紹了通過vue3的vite腳手架快速搭建項(xiàng)目, 開發(fā)條形碼和二維碼組件的過程。

使用vite創(chuàng)建項(xiàng)目

初始化下vue項(xiàng)目

npm init vite@latest然后按照提示操作即可！
創(chuàng)建好項(xiàng)目后，執(zhí)行如下命令啟動(dòng)項(xiàng)目:

npm install
npm run dev

安裝依賴

執(zhí)行如下命令安裝開發(fā)所需依賴:

npm install element-plus -S
npm install jsbarcode -S
npm install qrcode -S

注冊(cè)element-plus組件庫

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

條形碼組件

在components目錄下創(chuàng)建Barcode.vue, 配置需要傳遞的props參數(shù), removeUndefinedProps 刪除未傳值的props屬性, 在生命周期鉤子函數(shù)onMounted()中執(zhí)行生成條形碼的函數(shù)render(), 完整的代碼如下:

<template>
  <div>
    <canvas ref="barcodeRef" v-show="valid"></canvas>
    <div v-show="!valid">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, defineProps } from 'vue'
import JsBarcode from 'jsbarcode'
const props = defineProps({
  value: [String, Number],
  //選擇要使用的條形碼類型
  format: {
    type: [String],
    default: "CODE39"
  },
  //設(shè)置條之間的寬度
  width: {
    type:[String, Number],
    default: 3
  },
  height: {
    type:[String, Number],
    default: 100
  },
  //覆蓋顯示的文本
  text: [String, Number],
  //使文字加粗體或變斜體
  fontOptions: {
    type: [String],
    default: "bold italic"
  },
  //設(shè)置文本的字體
  font: [String, Number],
  //設(shè)置文本的水平對(duì)齊方式
  textAlign: [String],
  //設(shè)置文本的垂直位置
  textPosition: [String],
  //設(shè)置條形碼和文本之間的間距
  textMargin: [String, Number],
  //設(shè)置文本的大小
  fontSize: {
    type:[String, Number],
    default: 15
  },
  //設(shè)置條和文本的顏色
  lineColor: [String],
  //設(shè)置條形碼的背景
  background: {
    type:[String],
    default:"#eee"
  },
  //設(shè)置條形碼周圍的空白邊距
  margin: [String, Number],
  // 是否在條形碼下方顯示文字
  displayValue: {
    type: [String, Boolean],
    default: true
  }
})
const settings = {
  format: props.format,//選擇要使用的條形碼類型
  width: props.width,//設(shè)置條之間的寬度
  height: props.height,//高度
  displayValue: props.displayValue,//是否在條形碼下方顯示文字
  text: props.text,//覆蓋顯示的文本
  fontOptions: props.fontOptions,//使文字加粗體或變斜體
  font: props.font,//設(shè)置文本的字體
  textAlign: props.textAlign,//設(shè)置文本的水平對(duì)齊方式
  textPosition: props.textPosition,//設(shè)置文本的垂直位置
  textMargin: props.textMargin,//設(shè)置條形碼和文本之間的間距
  fontSize: props.fontSize,//設(shè)置文本的大小
  background: props.background,//設(shè)置條形碼的背景
  lineColor: props.lineColor,//設(shè)置條和文本的顏色。
  margin: props.margin//設(shè)置條形碼周圍的空白邊距
}
const removeUndefinedProps = (obj) => {
  for (let prop in obj) {
    if (obj.hasOwnProperty(prop) && obj[prop] === undefined) {
      delete obj[prop]
    }
  }
}
const valid = ref(true)
const barcodeRef = ref(null)
onMounted(() => {
  removeUndefinedProps(settings)
  render()
})
const render = () => {
  JsBarcode(barcodeRef.value, props.value, settings)
}
</script>

二維碼組件

在components目錄下創(chuàng)建Qrcode.vue, 代碼如下:

<template>
  <canvas ref="qrcode"></canvas>
</template>
<script setup>
import { ref, onMounted, defineProps } from 'vue'
import QRCode from 'qrcode'
const props = defineProps({
  value: {
    type: String,
    default: "https://baidu.com"
  }
})
const qrcode = ref(null)
onMounted(() => {
  render()
})
const render = () => {
  QRCode.toCanvas(qrcode.value, props.value, (error) => {
    if (error) {
      console.log(error)
    }
  })
}
</script>

App.vue代碼

使用element-plus組件庫的el-table組件展示條形碼, 代碼如下:

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      type="index"
      label="序號(hào)"
      align="center"
      width="60">
    </el-table-column>
    <el-table-column
      prop="name"
      label="品名"
      align="center"
      width="180">
    </el-table-column>
    <el-table-column
      prop="code"
      align="center"
      label="編碼">
    </el-table-column>
    <el-table-column
      align="center"
      label="條形碼">
      <template #default="scope">
        <barcode :value="scope.row.code" />
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      label="二維碼">
      <template #default="scope">
        <qrcode :value="scope.row.url" />
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import Barcode from './components/Barcode.vue'
import Qrcode from './components/Qrcode.vue'
const tableData = [
  { name: '蘋果', code: 'fruit1231', url: 'https://baidu.com' },
  { name: '香蕉', code: 'fruit1232', url: 'https://baidu.com' },
  { name: '橘子', code: 'fruit1233', url: 'https://baidu.com' }
]
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

效果如下:

到此這篇關(guān)于VUE3基于vite封裝條形碼和二維碼組件的詳細(xì)過程的文章就介紹到這了,更多相關(guān)vue3條形碼和二維碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: