vue中使用el-progress，不点击的时候隐藏，点击下载文件的时候显示在页面的正中间，并且随着下载文件的进度走

好的，这个问题需要结合 vue 和 el-progress 组件来回答。

首先，我们可以在页面中使用一个 el-progress 组件来表示下载进度条，同时通过设置 v-show 属性来控制其显示/隐藏状态。具体来说，我们可以通过在 data 中定义一个变量来控制其显示状态，如：

<template>
  <div>
    <el-progress v-show="showProgress" :percentage="progress"></el-progress>
    <!-- 其他页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      showProgress: false,
      progress: 0
    }
  }
}
</script>

然后，当用户点击下载按钮时，我们可以通过调用浏览器提供的下载功能来实现文件下载，并在下载过程中更新进度条的状态。具体来说，我们可以通过绑定 click 事件来触发下载操作，并在下载过程中更新进度条的状态，如：

<template>
  <div>
    <el-progress v-show="showProgress" :percentage="progress"></el-progress>
    <button @click="downloadFile">下载文件</button>
    <!-- 其他页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      showProgress: false,
      progress: 0
    }
  },
  methods: {
    downloadFile() {
      // 显示进度条
      this.showProgress = true;

      // 调用浏览器下载功能
      const xhr = new XMLHttpRequest();
      xhr.open('GET', '/download/file');
      xhr.responseType = 'blob';
      xhr.onprogress = (event) => {
        // 更新进度条状态
        if (event.lengthComputable) {
          this.progress = Math.round((event.loaded / event.total) * 100);
        }
      };
      xhr.onload = () => {
        // 隐藏进度条
        this.showProgress = false;

        // 下载完成，处理下载的文件
        const blob = new Blob([xhr.response]);
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = 'file';
        link.click();
      };
      xhr.send();
    }
  }
}
</script>

这样，我们就实现了一个在点击下载时显示进度条，并且随着下载进度走的功能。注意，在下载完成后，我们需要隐藏进度条，并且通过创建一个链接来让用户下载文件。