teachcloud-print-web/card/elements/lines/ElemLines.vue

<template>
  <div :class="classes">
    <div class="lines-body">
      <div
        class="lines-item"
        v-for="n in this.data.lineCount"
        :key="n"
        :style="styles"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "elem-line-horizontal",
  props: {
    data: {
      type: Object
    }
  },
  computed: {
    classes() {
      return ["elem-lines"];
    },
    styles() {
      return {
        borderBottomStyle: this.data.style,
        borderBottomWidth: this.data.bold,
        borderBottomColor: this.data.color,
        paddingTop: this.data.lineSpacing + "px",
        margin: this.data.margin ? `0 ${this.data.margin}px` : "0"
      };
    }
  },
  data() {
    return {};
  },
  methods: {}
};
</script>