概要

基础组件开发是项目业务开发的基石, 本文主要介绍了通过vue3的vite脚手架快速搭建项目, 开发条形码和二维码组件的过程。

使用vite创建项目

初始化下vue项目
npm init vite@latest
然后按照提示操作即可！
创建好项目后，执行如下命令启动项目:
npm install
npm run dev

安装依赖
执行如下命令安装开发所需依赖:
npm install element-plus -S
npm install jsbarcode -S
npm install qrcode -S

注册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目录下创建Barcode.vue, 配置需要传递的props参数, removeUndefinedProps 删除未传值的props属性, 在生命周期钩子函数onMounted()中执行生成条形码的函数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"
  },
  //设置条之间的宽度
  width: {
    type:[String, Number],
    default: 3
  },
  height: {
    type:[String, Number],
    default: 100
  },
  //覆盖显示的文本
  text: [String, Number],
  //使文字加粗体或变斜体
  fontOptions: {
    type: [String],
    default: "bold italic"
  },
  //设置文本的字体
  font: [String, Number],
  //设置文本的水平对齐方式
  textAlign: [String],
  //设置文本的垂直位置
  textPosition: [String],
  //设置条形码和文本之间的间距
  textMargin: [String, Number],
  //设置文本的大小
  fontSize: {
    type:[String, Number],
    default: 15
  },
  //设置条和文本的颜色
  lineColor: [String],
  //设置条形码的背景
  background: {
    type:[String],
    default:"#eee"
  },
  //设置条形码周围的空白边距
  margin: [String, Number],
  // 是否在条形码下方显示文字
  displayValue: {
    type: [String, Boolean],
    default: true
  }
})

const settings = {
  format: props.format,//选择要使用的条形码类型
  width: props.width,//设置条之间的宽度
  height: props.height,//高度
  displayValue: props.displayValue,//是否在条形码下方显示文字
  text: props.text,//覆盖显示的文本
  fontOptions: props.fontOptions,//使文字加粗体或变斜体
  font: props.font,//设置文本的字体
  textAlign: props.textAlign,//设置文本的水平对齐方式
  textPosition: props.textPosition,//设置文本的垂直位置
  textMargin: props.textMargin,//设置条形码和文本之间的间距
  fontSize: props.fontSize,//设置文本的大小
  background: props.background,//设置条形码的背景
  lineColor: props.lineColor,//设置条和文本的颜色。
  margin: props.margin//设置条形码周围的空白边距
}

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目录下创建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="序号"
      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>

效果如下:

VUE3--封装条形码和二维码组件(基于vite)