teachcloud-print-web/card/elements/barcode/ElemBarcode.vue

<template>
  <div class="elem-barcode" :style="styles">
    <img v-if="imageSrc" :src="imageSrc" alt="条形码" />
    <img
      v-else
      src="../../assets/images/barcode-sample-notext.png"
      alt="条形码"
    />
  </div>
</template>

<script>
export default {
  name: "elem-barcode",
  props: {
    data: {
      type: Object
    }
  },
  computed: {
    styles() {
      return {
        backgroundColor: this.data.bgColor,
        borderStyle: this.data.style,
        borderWidth: this.data.bold,
        borderColor: this.data.color,
        transform: `rotate(${this.data.rotation}deg)`
      };
    },
    imageSrc() {
      // 设置变量之后的条形码，在渲染时将content的内容填充为base64字符图片。
      const content = this.data.content;

      return content && content.indexOf("base64") !== -1 ? content : "";
    }
  },
  data() {
    return {};
  },
  methods: {}
};
</script>