manger/src/views/vab/markdown/index.vue

<template>
  <div class="markdown-container markdown-body">
    <el-select v-model="value" placeholder="请选择" @change="handleChange">
      <el-option
        v-for="(item, index) in options"
        :key="index"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <div v-html="prettierList"></div>
  </div>
</template>

<script>
  import marked from "marked";
  import "github-markdown-css/github-markdown.css";
  import { getList } from "@/api/markdown";
  export default {
    name: "Markdown",
    data() {
      return {
        listLoading: true,
        elementLoadingText: "正在加载...",
        options: [
          {
            value: "0",
            label: "Prettier",
          },
        ],
        value: "0",
        prettierList: null,
      };
    },
    created() {
      this.fetchData();
    },
    mounted() {},
    methods: {
      handleChange(val) {
        this.value = val;
        this.fetchData();
      },
      async fetchData() {
        this.listLoading = true;
        switch (this.value) {
          case "0":
            const { data } = await getList();
            this.prettierList = marked(data || "", {
              renderer: new marked.Renderer(),
              gfm: true,
              tables: true,
              breaks: false,
              pedantic: false,
              sanitize: false,
              smartLists: true,
              smartypants: false,
            });

            break;
        }
        setTimeout(() => {
          this.listLoading = false;
        }, 500);
      },
    },
  };
</script>