teachcloud-print-web/card/components/PageNumber.vue

<template>
  <div :class="classes">
    <ul class="page-number-rect-list" v-if="type === 'rect' && current % 2">
      <li
        v-for="n in total"
        :key="n"
        :class="{ 'rect-li-act': n === current }"
      ></li>
    </ul>
    <div class="page-number-text-cont" v-if="type === 'text'">
      第{{ current }}页（共{{ total }}页）
    </div>
  </div>
</template>

<script>
export default {
  name: "page-number",
  props: {
    type: {
      type: String,
      default: "text",
      validator(val) {
        return ["text", "rect"].indexOf(val) !== -1;
      }
    },
    total: {
      type: Number,
      default: 1
    },
    current: {
      type: Number,
      default: 1
    }
  },
  computed: {
    classes() {
      return ["page-number", `page-number-${this.type}`];
    }
  }
};
</script>