EEP_BookPreview/src/views/book/courseware/preview/components/divider/DividerPreview.vue

<template>
  <div v-if="'wavy' === data.property.line_type" class="wavy" :style="settingWavyStyle"></div>
  <hr v-else :style="settingStyle" />
</template>

<script>
import { getDividerData } from '@/views/book/courseware/data/divider';
import PreviewMixin from '../common/PreviewMixin';
import { getRandomNumber } from '@/utils';

export default {
  name: 'DividerPreview',
  mixins: [PreviewMixin],
  data() {
    return {
      data: getDividerData(),
    };
  },
  computed: {
    settingStyle() {
      return {
        margin: `${this.data.property.height / 2}px auto`,
        border: 'none',
        borderTop: `1px ${this.data.property.line_type} ${this.data.property.color}`,
        width: `${this.data.property.line_type === 'none' ? 'auto' : `${this.data.property.width}px`}`,
      };
    },
    settingWavyStyle() {
      return {
        margin: `${this.data.property.height / 2}px auto`,
        width: `${this.data.property.width}px`,
        color: `${this.data.property.color}`,
        letterSpacing: `${this.data.property.width}px`,
      };
    },
  },
  methods: {
    /**
     * 获取无文本内容的数据结构，用于保存为个人模板时的样式模板
     */
    getNoTextContentData() {
      let noTextContentData = JSON.parse(JSON.stringify(this.data));
      const resetFieldMap = {
        analysis_list: [],
        answer_list: [],
      };

      Object.assign(noTextContentData, resetFieldMap);

      if (noTextContentData.answer) {
        noTextContentData.answer.answer_list = [];
        noTextContentData.answer.reference_answer = '';
      }

      return noTextContentData;
    },
  },
};
</script>

<style lang="scss" scoped>
hr {
  border: none;
  border-top-color: #ebebeb;
  border-top-width: 1px;
}

.wavy {
  display: block;
  height: 11px !important;
  padding-top: 0.5em;
  overflow: hidden;
  white-space: nowrap;
}

.wavy::before {
  /* IE浏览器实线代替 */
  text-decoration: overline;

  /* 现代浏览器 */
  text-decoration: overline wavy;
  content: '\2000';
}
</style>