Vue新手：实现文件预览功能的前端

最新推荐文章于 2024-08-19 17:53:19 发布

喂，小猴子

最新推荐文章于 2024-08-19 17:53:19 发布

阅读量3.1w

点赞数 2

分类专栏： vue前端文章标签： Vue预览文件的前端

本文链接：https://blog.youkuaiyun.com/w_e_i_1201/article/details/88844806

版权

预览文件的前端

省略点击按钮点击触发showdialogview()方法的代码

第一种方法
1. 先在template中加入一个input框，绑定一个字符串类型的变量
2. 写showdialogview()方法
3. 调用后台的方法，如果返回的不是null（后台返回的数据是一行一行返回的）,就使用for循环，添加到变量中去。

<template>
  <div class="content">
    <!--文件预览-->
    <el-dialog title="数据预览" :visible.sync="dialogvisibleview" >
      <el-input type="textarea" :rows="10" placeholder="" v-model="dataview">
      </el-input>
    </el-dialog>
  </div>
</template>

<script>
  import api from '../../api/api'
  import $ from 'jquery';
  import axios from 'axios';
  export default {
    name: "DataFile",
    inject: ['reload'],
    data(){
      return {
        dialogvisibleview: false, // 文件预览
        dataview: ''
      }
    }