eep_page/src/views/book/courseware/create/components/base/divider/Divider.vue

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

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

export default {
  name: 'DividerPage',
  mixins: [ModuleMixin],
  data() {
    return {
      data: getDividerData(),
    };
  },
  computed: {
    settingStyle() {
      return {
        margin: `${this.data.property.height / 2}px 0`,
        border: 'none',
        borderTop: `1px ${this.data.property.line_type} ${this.data.property.color}`,
        width: `${this.data.property.width}px`,
      };
    },
    settingWavyStyle() {
      return {
        margin: `${this.data.property.height / 2}px 0`,
        width: `${this.data.property.width}px`,
        height: '11px',
        color: `${this.data.property.color}`,
        letterSpacing: `${this.data.property.width}px`,
      };
    },
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.wavy {
  display: block;
  padding-top: 0.5em;
  overflow: hidden;
  white-space: nowrap;
}

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

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