zdpy+vue3+onlyoffice文档系统实战上课笔记 20240805

上次

上次计划

1、最近文档表格完善
2、实现登录功能
3、新建文件，复制文件，删除文件
4、其他

目前任务：最近文档表格完善

1、在名称前面，渲染这个文档的图标
2、大小的基本的单位是kb，超过1024kb则换成mb，主要是这两个单位
3、数据按照最近访问时间倒序
4、给文件名价格链接，实现和编辑按钮相同的功能
5、实现编辑的功能
6、实现删除的功能
7、分享的功能暂时往后放，因为目前没有用户，等有了用户之后再考虑做

在名称前面，渲染这个文档的图标

先实现body的插槽，对name做自定义渲染

<template #bodyCell="{ column, record }">
   <template v-if="column.key === 'action'">
     <a-space>
       <a-button>编辑</a-button>
       <a-button>删除</a-button>
       <a-button>分享</a-button>
     </a-space>
   </template>
   <template v-else-if="column.key === 'name'">
     {{ record[column.key] }}
   </template>
   <template v-else>
     {{ record[column.key] }}
   </template>
 </template>

准备svg图片资源

导入svg图片

import docxSvg from "../../assets/svg/docx.svg"

渲染svg图片

<template v-else-if="column.key === 'name'">
  <div>
    <img :src="docxSvg" alt="">
    <span>{{ record[column.key] }}</span>
  </div>
</template>

效果预览

整合Tailwindcss

参考文章：https://blog.csdn.net/qq_37703224/article/details/139401458

使用Tailwindcss优化表格

优化图标的显示

<template v-else-if="column.key === 'name'">
  <div class="flex items-center justify-center">
    <img :src="docxSvg" class="w-5 h-5 mr-1">
    <span>{{ record[column.key] }}</span>
  </div>
</template>

渲染效果：

图标应该根据类型动态切换思路

要实现这个功能，我们要么借助函数，要么借助计算属性。

计算属性比较适合不经常改变的数据，所以这里我们选择使用函数。

这里的图标，主要考虑五种情况：

• docx：表示文档图标
• ppt：表示PPT文件图标
• excel：表示Excel文件图标
• pdf：表示PDF文件图标
• other：其他文档图标

我们只需要准备好对应的svg图片，然后在一个函数中，通过switch进行动态捕获即可。

准备对应的svg图片

图标应该根据类型动态切换代码

导入图片：

import docxSvg from "../../assets/svg/docx.svg"
import excelSvg from "../../assets/svg/excel.svg"
import otherSvg from "../../assets/svg/other.svg"
import pdfSvg from "../../assets/svg/pdf.svg"
import pptSvg from "../../assets/svg/ppt.svg"

实现方法：

const getSvg = (typeStr) => {
  switch (typeStr) {
    case "docx":
      return docxSvg
    case "ppt":
      return pptSvg
    case "excel":
      return excelSvg
    case "pdf":
      return pdfSvg
    default:
      return otherSvg
  }
}