teachcloud-print-web/card/elements/undertaking/ElemUndertaking.vue

<template>
  <div class="elem-undertaking">
    <h3 class="para-text para-title">考生承诺书</h3>
    <p class="para-text para-cl">本人郑重承诺<em>：</em></p>
    <div class="para-text para-body">
      <p v-for="(cont, index) in contentList" :key="index" v-html="cont"></p>
    </div>
    <p class="para-text para-std">
      承诺人<span>（</span>签名 <span>）</span> :
    </p>
  </div>
</template>

<script>
export default {
  name: "elem-undertaking",
  props: {
    content: {
      type: String,
      default: "",
    },
    pageSize: {
      type: String,
      default: "A3",
    },
  },
  data() {
    return {};
  },
  computed: {
    contentList() {
      const pageSizeChartCountConfig = {
        A3: 65,
        "8K": 54,
      };
      let len = this.content.length;
      const maxParaCharCount = pageSizeChartCountConfig[this.pageSize];
      const count = Math.ceil(len / maxParaCharCount);
      let conts = [];
      for (let i = 0; i < count; i++) {
        let cont = this.content.substring(
          i * maxParaCharCount,
          (i + 1) * maxParaCharCount
        );
        cont = cont.replace(/([(（【】）)])/g, "<span>$1</span>");
        cont = cont.replace(/([，。？])/g, "<em>$1</em>");
        conts[i] = cont;
      }
      return conts;
    },
  },
  methods: {},
};
</script>