Vue3学习（二十四）- 文档页面功能开发

写在前面

这部分真的感觉超级难，其实也不能说难，主要是真的想不到这个思绪应该这么做，大概说他好厉害，他怎么知道该这么计划实现。
说下难点吧，我觉得后天逻辑还好，主要是前端部分真的需要点花点时间来思索，比如布局、交互计划的实现等等。

文档页面功能开发

1、任务拆解

• 增加文档页面，首页点击电子书时，跳转到电子书文档页面
  
• 左边表现文档树
  
• 右边表现默认选择第一个节点的内容
  
• 文档编辑增加预览功能
  
• 无文档内容时，给出提示
  
• 功能优化及题目修复
  

2、增加文档页面

首页点击电子书时，跳转到电子书文档页面，参考之前电子书列表中文档管理的路由跳转即可，示例代码如下：

1. <router-link :to="'/doc?ebookId='+item.id">
2.   {{ item.name }}
3. </router-link>

复制代码

3、左边表现文档树

就是把文档管理的树形数据变成菜单，选择对应菜单表现对应电子书，示例代码如下：

1. <a-row>
2.   <a-col :span="6">
3.     <a-tree
4.         v-if="level1 && level1.length"
5.         :defaultExpandAllRows="true"
6.         :tree-data="level1"
7.         @select="onSelect"
8.         :fieldNames="{title: 'name', key: 'id', value: 'id'}"
9.         :defaultExpandAll="true"
10.     >
11.     </a-tree>
12.   </a-col>
13.   <a-col :span="18">
14.   </a-col>
15. </a-row>

复制代码

4、右边默认选择第一个节点

当进入文档页面时，默认就选择第一个节点内容，示例代码如下：

1. /**
2.    * 数据查询
3.    **/
4.   const handleQuery = () => {
5.     axios.get("/doc/all/" + route.query.ebookId).then((response) => {
6.       const data = response.data;
7.       if (data.success) {
8.         docs.value = data.content;
9.         level1.value = [];
10.         level1.value = Tool.array2Tree(docs.value, 0);
11.         setParent(level1.value)
12.         if (Tool.isNotEmpty(level1.value)) {
13.           defaultSelectedKeys.value = [level1.value[0].id];
14.           handleQueryContent(level1.value[0].id);
15.         }
16.       } else {
17.         message.error(data.message);
18.       }
19.     });
20.   };

复制代码

5、文档编辑增加预览功能

就是增加一个按钮，点击后用一个抽屉表现即可，示例代码如下：

1. <a-button type="primary" @click="handlePreviewContent()">
2.   <EyeOutlined /> 内容预览
3. </a-button>
4. // 抽屉
5. <a-drawer width="750" placement="right" :closable="false" :visible="drawerVisible" @close="onDrawerClose">
6.   
7. </a-drawer>

复制代码

6、无文档内容时，给出提示

判断接口返回数据，如果长度为0，就返回页面字符串表现，示例代码如下：

1. <h3 v-if="level1.length === 0">对不起，找不到相关文档！</h3>

复制代码

7、部分功能优化

图标的表现，需要先安装依赖如下：

1. npm install --save @ant-design/icons-vue

复制代码

代码部分如下所示：

1. <a-button type="primary" @click="handlePreviewContent()">
2.   <EyeOutlined /> 内容预览
3. </a-button>
5. import {SmileOutlined, DownOutlined, ExclamationCircleOutlined,EyeOutlined} from '@ant-design/icons-vue';
7. components: {
8.   SmileOutlined,
9.   DownOutlined,
10.   EyeOutlined
11. },

复制代码

8、效果

写在末了

这部分内容终于更新完，耗时大约五个小时吧，第一次感觉大脑饱和，有点整不动了，有种被压抑的感觉呀，但是也真的好开心，又会了几个组件的使用。

但跳出来看，目前对我而言最大的快乐，也就是每天能会一旦点就可以啦，很简单而充实。
当然这也算单身狗的日常啦，感爱好的同学可自行尝试！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。