barcode.js+elementUi——实现二维码的展示——基础积累

要在前端项目中使用barcode.js和element-ui来实现二维码的展示，你需要先安装这两个库。如果还没有安装，可以通过npm或yarn进行安装：

npm install barcode.js --save
npm install element-ui --save

或者

yarn add barcode.js
yarn add element-ui

接下来，你可以创建一个简单的Vue组件来展示二维码：

<template>
  <div>
    <el-input v-model="text" placeholder="请输入内容"></el-input>
    <div ref="barcode"></div>
  </div>
</template>
 
<script>
import { Input } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import JsBarcode from 'jsbarcode';
 
export default {
  components: {
    'el-input': Input
  },
  data() {
    return {
      text: '1234567890'
    };
  },
  watch: {
    text: function(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.createBarcode();
      }
    }
  },
  mounted() {
    this.createBarcode();
  },
  methods: {
    createBarcode() {
      JsBarcode(this.$refs.barcode, this.text, {
        format: 'CODE128',
        lineColor: '#0aa',
        width: 2,
        height: 100,
        displayValue: false
      });
    }
  }
};
</script>

在这个例子中，我们使用了element-ui的el-input组件来让用户输入文本，然后使用JsBarcode来生成对应的二维码。我们监听text的变化，一旦发生变化，就重新生成二维码。在mounted钩子中，我们初始化生成了一个二维码。

请确保你已经在项目的入口文件（比如main.js）中全局引入了element-ui：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);

这样就可以在你的Vue组件中直接使用el-input了。