vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3条形码和二维码

VUE3基于vite封装条形码和二维码组件的详细过程

作者:Elwin0204

基础组件开发是项目业务开发的基石, 本文主要介绍了通过vue3的vite脚手架快速搭建项目, 开发条形码和二维码组件的过程,感兴趣的朋友跟随小编一起看看吧

概要

基础组件开发是项目业务开发的基石, 本文主要介绍了通过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封装条形码和二维码组件的详细过程的文章就介绍到这了,更多相关vue3条形码和二维码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文