当前位置：首页 > VUE

vue预览功能怎么实现

2026-02-22 11:35:07VUE

Vue 预览功能的实现方法

使用 `v-html` 指令

在 Vue 中，可以通过 v-html 指令将 HTML 字符串渲染到页面上，实现简单的预览功能。
确保内容经过安全处理，避免 XSS 攻击。

<template>
  <div v-html="previewContent"></div>
</template>

<script>
export default {
  data() {
    return {
      previewContent: '<p>这是预览内容</p>'
    }
  }
}
</script>

结合 Markdown 解析

如果需要预览 Markdown 内容，可以使用 marked 或 markdown-it 库将 Markdown 转换为 HTML，再通过 v-html 渲染。

安装依赖：

npm install marked

代码示例：

vue预览功能怎么实现

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

<script>
import marked from 'marked';

export default {
  data() {
    return {
      markdownContent: '加粗文本'
    }
  },
  computed: {
    compiledMarkdown() {
      return marked(this.markdownContent);
    }
  }
}
</script>

使用第三方组件库

对于富文本预览，可以使用现成的组件如 @toast-ui/vue-editor 的预览模式。

安装依赖：

vue预览功能怎么实现

npm install @toast-ui/vue-editor

代码示例：

<template>
  <Editor
    :initialValue="content"
    :options="{ previewStyle: 'vertical' }"
  />
</template>

<script>
import { Editor } from '@toast-ui/vue-editor';

export default {
  components: { Editor },
  data() {
    return {
      content: '预览内容'
    }
  }
}
</script>

动态切换编辑与预览

通过状态管理切换编辑器和预览模式，使用 v-if 或组件动态渲染。

<template>
  <button @click="mode = 'preview'">预览</button>
  <button @click="mode = 'edit'">编辑</button>

  <div v-if="mode === 'preview'" v-html="compiledContent"></div>
  <textarea v-else v-model="rawContent"></textarea>
</template>

<script>
export default {
  data() {
    return {
      mode: 'edit',
      rawContent: '输入内容...'
    }
  },
  computed: {
    compiledContent() {
      return this.rawContent; // 可结合 Markdown 解析
    }
  }
}
</script>

文件上传预览

对于图片或文件预览，可通过 FileReader 实现本地预览。

<template>
  <input type="file" @change="previewFile">
  <img v-if="previewUrl" :src="previewUrl">
</template>

<script>
export default {
  data() {
    return {
      previewUrl: null
    }
  },
  methods: {
    previewFile(e) {
      const file = e.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (event) => {
        this.previewUrl = event.target.result;
      };
      reader.readAsDataURL(file);
    }
  }
}
</script>