为了账号安全,请及时绑定邮箱和手机立即绑定

【金秋打卡】第8天 全新升级,基于Vue3最新标准,打造后台综合解决方案之提供两种文件导入形式

标签:
Vue.js

课程章节:7-6 业务落地:提供两种文件导入形式

课程讲师:Sunday

课程内容:

目标:把excel导入页面和按钮实现出来,能够进行按钮点击跳转页面。页面中有两种上传的方式。

核心点:参考拖拽的api,把事件和dom结构先布局好。单独拎出来的组件功能不要和页面逻辑混合在一起。

excel 页面我们在之前已经创建过了,就是 views/import/index 。
所以此处,我们只需要在按钮处完成页面跳转即可,在 user-manage 中:

在tagsview中,相对于比较重要的就是点击鼠标右键进行contextMenu的展示,其中最主要的就是事件处理,写完了DOM结构,接下来就进行contetMenu的事件处理。

<el-button type="primary" @click="onImportExcelClick">
          {{ $t('msg.excel.importExcel') }}</el-button
        >

const router = useRouter()
/**
 * excel 导入点击事件
 */
const onImportExcelClick = () => {
  router.push('/user/import')
}

这样我们就已经完成了前面两步,那么接下来我们就来实现 提供两种文件导入形式

  1. 创建components/UploadExcel 组件,用于处理上传 excel 相关的问题
  2. 在import 中导入该组件
<template>
  <upload-excel></upload-excel>
</template>

<script setup>
import UploadExcel from '@/components/UploadExcel'
</script>
  1. 整个 UploadExcel 组件的内容可以分成两部分:
    • 样式
    • 逻辑
  2. 那么首先我们先处理样式内容
<template>
  <div class="upload-excel">
    <div class="btn-upload">
      <el-button :loading="loading" type="primary" @click="handleUpload">
        {{ $t('msg.uploadExcel.upload') }}
      </el-button>
    </div>

    <input
      ref="excelUploadInput"
      class="excel-upload-input"
      type="file"
      accept=".xlsx, .xls"
      @change="handleChange"
    />
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API -->
    <div
      class="drop"
      @drop.stop.prevent="handleDrop"
      @dragover.stop.prevent="handleDragover"
      @dragenter.stop.prevent="handleDragover"
    >
      <i class="el-icon-upload" />
      <span>{{ $t('msg.uploadExcel.drop') }}</span>
    </div>
  </div>
</template>

<script setup>
import {} from 'vue'
</script>

<style lang="scss" scoped>
.upload-excel {
  display: flex;
  justify-content: center;
  margin-top: 100px;
  .excel-upload-input {
    display: none;
    z-index: -9999;
  }
  .btn-upload,
  .drop {
    border: 1px dashed #bbb;
    width: 350px;
    height: 160px;
    text-align: center;
    line-height: 160px;
  }
  .drop {
    line-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #bbb;
    i {
      font-size: 60px;
      display: block;
    }
  }
}
</style>

课程收获:

谢谢老师,讲的非常细致,很容易懂。这一节学的是左边栏的员工管理页面上面的两个excel按钮的,其中导入的页面和点击按钮跳转的实现。其中页面部分有两种导入的方式,一种是点击上传,还有一种是拖拽上传,通过写结构发现这两种上传方式都有自己特有的API,通过上传组件的拆分,再通过之后的API使用的学习就能完成这个组件的功能了。光是看看这些固有的API就知道有自己特殊的写法和注意事项。期待后面的学习。

课程截图:

图片描述
图片描述

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消