elementui markdown
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>注意事项
- 安全性：直接使用
v-html渲染 Markdown 可能存在 XSS 风险，建议使用DOMPurify对内容进行过滤。 - 样式定制：可以通过 CSS 自定义渲染后的 Markdown 样式，使其与 ElementUI 风格一致。
- 性能优化：对于大型 Markdown 文档，可以考虑使用懒加载或分块渲染。
以上方法展示了如何将 ElementUI 与 Markdown 结合使用，具体实现可根据实际需求调整。
