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

上次

在这里插入图片描述上次计划

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

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

在这里插入图片描述

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

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

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

准备svg图片资源

在这里插入图片描述导入svg图片

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

渲染svg图片

效果预览

在这里插入图片描述整合Tailwindcss使用Tailwindcss优化表格优化图标的显示

渲染效果：

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

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

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

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

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

}

}