vue element ui文件预览

Vue Element UI 提供了一个文件预览组件，可以用于显示各种类型的文件。你可以通过以下步骤来实现文件预览：

1. 首先，在你的 Vue 项目中安装 Element UI，可以使用 npm 或者 yarn 进行安装：

npm install element-ui --save

或者

yarn add element-ui

2. 在你的 Vue 项目的入口文件中导入 Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 在需要使用文件预览的组件中，引入并使用 `el-upload` 组件：

<template>
  <el-upload
    class="upload-demo"
    action="//jsonplaceholder.typicode.com/posts/"
    :on-preview="handlePreview"
    :file-list="fileList"
    list-type="picture-card"
    :auto-upload="false">
    <i class="el-icon-plus"></i>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handlePreview(file) {
      // 在这里处理文件预览逻辑
      console.log(file)
    }
  }
}
</script>

在上面的示例代码中，我们使用了 `el-upload` 组件来进行文件上传，并且设置了 `list-type` 属性为 `picture-card`，这样上传的文件将会以卡片形式展示。同时，我们还设置了 `:on-preview` 属性来指定文件预览的回调函数 `handlePreview`。

在 `handlePreview` 方法中，你可以自定义文件预览的逻辑，可以使用 Element UI 提供的 Dialog 组件等来展示文件内容。

需要注意的是，这个示例代码只是一个简单的演示，你还需要根据你的需求进行相应的修改和扩展。