vue点击不同的按钮实现文件下载

QQ录屏20220616095854

首次四个按钮是前端写死，在后端传过来的数据中包含的name，通过name携带的id值来区分。

首先name是通过v-for进行遍历出来的，如图所示。在公共数据区中定义tablelist，通过不同的code值来区分不同的name。

 

因为点击不同的按钮是通过code值来区分的，给按钮定义一个样式，当点击不同的按钮就给添加写好的样式，:class="{active:active===item.code}"；当他被点击的时候给一个click方法，@click="handleTabChange(item)"，把code值传入给它。

handleTabChange(e) {
  this.active = e.code;
}

 在页面渲染后，调用getUpload方法，在接口调用中，在接口中传入往后端的传参，

{ pageNum: 1, pageSize: 50 }

当接口调用成功后，定义一个集合obj，然后通过switch函数，当code为‘1’时，即obj【‘1’】赋给接口传过来的即附件的字段refFile。

最后重新定义一个集合enclosure【object】类型的，将obj的值赋给enclosure函数，

在前端组件中调用的是已经写好的公共组件，zd-upload，通过v-moudle定义，因为obj赋给了enclosure，所以点击不同的按钮时，拿到不同的值，来进行绑定。通过v-show来隐藏，接口只需要调用一次就行。

<!--
 * @Description: 下载专区
 * @Author: Zander
 * @Date: 2022/6/1 14:39
 * @LastEditors: tz
 * @LastEditTime: 2022/6/1 14:39
 -->
<template>
  <div class="download">
    <div class="download-head-title">
      <img src="../../assets/images/pic_trust.png" alt="#"/>
      <div class="wrap title">
        <h5>下载专区</h5>
        <h6>我们致力于打造智能化智慧港口平台！</h6>
      </div>
    </div>
    <div class="wrap download-body">
      <div class="title">
        <div class="zh">下载专区</div>
        <div class="en">Download Zone</div>
      </div>
      <div class="tab">
        <div class="tab_title clearfix">
          <div class="tab_title_item fl"
             v-for="(item,index) in tableList"
             :key="index"
             :class="{active:active===item.code}"
             @click="handleTabChange(item)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="tab_panel" style="width: 600px; margin: 0 auto">
          <zd-upload v-show="active === '1'" v-model="enclosure['1']" folder="temp" disabled />
          <zd-upload v-show="active === '2'" v-model="enclosure['2']" folder="temp" disabled />
          <zd-upload v-show="active === '3'" v-model="enclosure['3']" folder="temp" disabled />
          <zd-upload v-show="active === '4'" v-model="enclosure['4']" folder="temp" disabled />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { portalEnclosure } from '@api/tjsc/introduce/introduce.js'
import BaseFormMixins from '@/mixins/base-form-mixins';

export default {
  name: 'download',
  mixins: [BaseFormMixins],
  data() {
    return {
      active: '1',
      tableList: [
        {
          code: '1',
          name: '合同范本'
        },
        {
          code: '2',
          name: '集疏港'
        },
        {
          code: '3',
          name: '装卸船'
        },
        {
          code: '4',
          name: '相关制度'
        }
      ],
      enclosure: {}
    }
  },
  mounted() {
    this.getUpload();
  },
  methods: {
    getUpload() {
      portalEnclosure({ pageNum: 1, pageSize: 50 }).then(res => {
        const list = res.data.list;
        const obj = {};
        if (list && list.length > 0) {
          list.forEach(item => {
            switch (item.type) {
              case '1':
                obj['1'] = item.refFile;
                break;
              case '2':
                obj['2'] = item.refFile;
                break;
              case '3':
                obj['3'] = item.refFile;
                break;
              case '4':
                obj['4'] = item.refFile;
                break;
            }
          })
        }
        this.enclosure = obj;
      })
    },
    handleTabChange(e) {
      this.active = e.code;
    }
  }
}
</script>

<style scoped lang="scss">
.download {
  .download-head-title {
    position: relative;

    img {
      display: block;

    }

    .title {
      color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      text-align: center;
      transform: translate(-50%, -50%);

      h5 {
        font-size: 60px;
        font-weight: 400;
        letter-spacing: 5px;
      }

      h6 {
        font-size: 30px;
        margin-top: 20px;
        font-weight: 400;
        letter-spacing: 5px;
      }
    }
  }

  .download-body {
    padding: 65px 0 25px;

    .title {
      text-align: center;

      .zh {
        color: #1a1d1e;
        font-size: 30px;
        font-weight: bold;
      }

      .en {
        color: #868686;
        font-size: 16px;
        margin-top: 15px;
        text-transform: uppercase;
      }
    }

    .tab {
      margin-top: 50px;

      .tab_title {
        width: 600px;
        margin: 0 auto 40px;

        .tab_title_item {
          width: 120px;
          height: 45px;
          margin: 0 15px;
          color: #003da6;
          cursor: pointer;
          font-size: 16px;
          line-height: 45px;
          text-align: center;
          border-radius: 23px;
          background: #f6f7f9;
          border: 1px solid #DEE1E8;

          &.active {
            color: #ffffff;
            background: #003da6;
            border-color: #003DA6;
          }

          &:hover {
            color: #ffffff;
            background: #003da6;
            border-color: #003DA6;
          }
        }
      }

      .tab_panel {
        padding: 0 20px;
      }
    }
  }
}
</style>