eep_page/src/views/book/courseware/preview/components/common/PreviewMixin.js

import SerialNumberPosition from './SerialNumberPosition.vue';
import DOMPurify from 'dompurify';

import { GetCoursewareComponentContent_View } from '@/api/book';

const mixin = {
  data() {
    return {
      answer: { answer_list: [] }, // 答案
      disabled: false, // 是否禁用
    };
  },
  props: {
    id: {
      type: String,
      required: true,
    },
    coursewareId: {
      type: String,
      required: true,
    },
  },
  components: {
    SerialNumberPosition,
  },
  created() {
    this.getCoursewareComponentContent_View();
  },
  methods: {
    getCoursewareComponentContent_View() {
      GetCoursewareComponentContent_View({ courseware_id: this.coursewareId, component_id: this.id }).then(
        ({ content }) => {
          if (content) this.data = JSON.parse(content);
        },
      );
    },
    /**
     * 得到序号外部样式
     */
    getAreaStyle() {
      const position = this.data.property.sn_position;
      let grid = '';

      if (position.includes('right')) {
        grid = `"main position" / 1fr auto`;
      } else if (position.includes('left')) {
        grid = `"position main" / auto 1fr`;
      } else if (position.includes('top')) {
        grid = `"position" auto "main" 1fr`;
      } else if (position.includes('bottom')) {
        grid = `"main" 1fr "position" auto`;
      }

      return {
        grid,
      };
    },
    /**
     * 过滤 html，防止 xss 攻击
     * @param {string} html 需要过滤的html
     * @returns {string} 过滤后的html
     */
    sanitizeHTML(html) {
      return DOMPurify.sanitize(html);
    },
  },
};

export default mixin;