当前位置：首页 > 前端教程

elementui markdown

2026-01-14 20:49:53前端教程

ElementUI 与 Markdown 结合使用

ElementUI 是一个基于 Vue.js 的组件库，常用于快速构建前端界面。Markdown 是一种轻量级标记语言，常用于文档编写。以下是将 ElementUI 与 Markdown 结合使用的几种方法：

使用 ElementUI 的 `el-input` 渲染 Markdown

通过 el-input 的多行文本输入框，可以实时编辑 Markdown 内容，并结合第三方库（如 marked）实现预览功能。

<template>
  <div>
    <el-input
      type="textarea"
      v-model="markdownText"
      placeholder="输入 Markdown 内容"
      rows="10"
    />
    <div v-html="compiledMarkdown"></div>
  </div>
</template>

<script>
import marked from 'marked';
export default {
  data() {
    return {
      markdownText: ''
    };
  },
  computed: {
    compiledMarkdown() {
      return marked(this.markdownText);
    }
  }
};
</script>

使用 `el-dialog` 展示 Markdown 内容

通过 el-dialog 弹窗展示渲染后的 Markdown 内容，适合用于帮助文档或说明。

<template>
  <div>
    <el-button @click="dialogVisible = true">查看文档</el-button>
    <el-dialog :visible.sync="dialogVisible">
      <div v-html="compiledMarkdown"></div>
    </el-dialog>
  </div>
</template>

<script>
import marked from 'marked';
export default {
  data() {
    return {
      dialogVisible: false,
      markdownText: '# 标题\n\n这里是 Markdown 内容。'
    };
  },
  computed: {
    compiledMarkdown() {
      return marked(this.markdownText);
    }
  }
};
</script>

结合 `el-tabs` 实现 Markdown 编辑与预览

通过 el-tabs 切换编辑和预览模式，提升用户体验。

<template>
  <div>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="编辑" name="edit">
        <el-input
          type="textarea"
          v-model="markdownText"
          placeholder="输入 Markdown 内容"
          rows="10"
        />
      </el-tab-pane>
      <el-tab-pane label="预览" name="preview">
        <div v-html="compiledMarkdown"></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import marked from 'marked';
export default {
  data() {
    return {
      activeTab: 'edit',
      markdownText: ''
    };
  },
  computed: {
    compiledMarkdown() {
      return marked(this.markdownText);
    }
  }
};
</script>

使用 `el-card` 展示 Markdown 内容

通过 el-card 组件美化渲染后的 Markdown 内容，适合用于文章或博客展示。

<template>
  <div>
    <el-card>
      <div v-html="compiledMarkdown"></div>
    </el-card>
  </div>
</template>

<script>
import marked from 'marked';
export default {
  data() {
    return {
      markdownText: '# 标题\n\n这里是 Markdown 内容。'
    };
  },
  computed: {
    compiledMarkdown() {
      return marked(this.markdownText);
    }
  }
};
</script>