vue 生成二维码(带logo)与条形码_前端生成条形码

1.生成二维码安装

npm install  --save qrcodejs

 实现代码

<template>
  <div>
          <qrcode :url="jmc" :iconurl="icon" :wid="200" 
          :hei="200" :imgwid="100" :imghei="100"
          colorLight="#ffffff" colorDark="#333333"
          />
          <!-- wid二维码宽度 hei二维码高度 imgwid图标宽度 imghei图标高度-->
          <!-- colorLight二维码背景色 colorDark二维码颜色-->
  </div>
</template>
<script>
import qrcode from "vue_qrcodes"; //引入
export default {
   components: { qrcode},
   data(){
      return{
        jmc: '45654wssedws41', //二维码生成的内容
        icon: "https://cn.vuejs.org/images/logo.png", //二维中间的图标
      }
   },
}
</script>

效果图：

 2.生成条形码安装

npm install jsbarcode --save

 实现代码

<template>
  <div>
           <!-- 条形码 -->
           <img id="barcode"/>
  </div>
</template>
<script>
import JsBarcode from 'jsbarcode'
export default {
   data(){
      return{
         
      }
   },
   mounted(){
       let str = '1554aswsdf78'
       JsBarcode("#barcode", str, {
           format: "CODE128",
            lineColor: "#000",
            displayValue:true,//true显示低部文本,false隐藏低部文本
            fontSize: 12, //低部文本字体大小
            width: 1.7, 
            height: 30,
      });
           
   },
}
</script>

效果图：

/仅供参考,如有雷同,纯属虚构