union-question-web/src/modules/card/components/PreviewCardTemplate.vue

<template>
  <el-dialog
    class="preview-card-template"
    :visible.sync="modalIsShow"
    title="题卡模板"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    fullscreen
  >
    <div class="card-image-list">
      <div v-for="(item, ind) in imageList" :key="ind" class="card-image-item">
        <img :src="item" :alt="ind" />
      </div>
    </div>

    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
export default {
  name: "PreviewCardTemplate",
  props: {
    imageList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return { modalIsShow: false };
  },
  methods: {
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
  },
};
</script>

<style scoped>
.card-image-item {
  margin: 10px;
}
.card-image-item img {
  display: block;
  width: 100%;
  height: auto;
}
</style>