Vue3学习(二十四)- 文档页面功能开发
写在前面
这部分真的感觉超级难,其实也不能说难,主要是真的想不到这个思路应该这么做,或者说他好厉害,他怎么知道该这么设计实现。
说下难点吧,我觉得后天逻辑还好,主要是前端部分真的需要点花点时间来思考,比如布局、交互设计的实现等等。
文档页面功能开发
1、任务拆解
- 增加文档页面,首页点击电子书时,跳转到电子书文档页面
- 左边显示文档树
- 右边显示默认选择第一个节点的内容
- 文档编辑增加预览功能
- 无文档内容时,给出提示
- 功能优化及问题修复
2、增加文档页面
首页点击电子书时,跳转到电子书文档页面,参考之前电子书列表中文档管理的路由跳转即可,示例代码如下:
<router-link :to="'/doc?ebookId='+item.id">
{{ item.name }}
</router-link>
3、左边显示文档树
就是把文档管理的树形数据变成菜单,选择对应菜单显示对应电子书,示例代码如下:
<a-row>
<a-col :span="6">
<a-tree
v-if="level1 && level1.length"
:defaultExpandAllRows="true"
:tree-data="level1"
@select="onSelect"
:fieldNames="{title: 'name', key: 'id', value: 'id'}"
:defaultExpandAll="true"
>
</a-tree>
</a-col>
<a-col :span="18">
</a-col>
</a-row>
4、右边默认选择第一个节点
当进入文档页面时,默认就选择第一个节点内容,示例代码如下:
/**
* 数据查询
**/
const handleQuery = () => {
axios.get("/doc/all/" + route.query.ebookId).then((response) => {
const data = response.data;
if (data.success) {
docs.value = data.content;
level1.value = [];
level1.value = Tool.array2Tree(docs.value, 0);
setParent(level1.value)
if (Tool.isNotEmpty(level1.value)) {
defaultSelectedKeys.value = [level1.value[0].id];
handleQueryContent(level1.value[0].id);
}
} else {
message.error(data.message);
}
});
};
5、文档编辑增加预览功能
就是增加一个按钮,点击后用一个抽屉显示即可,示例代码如下:
<!-- 预览按钮 -->
<a-button type="primary" @click="handlePreviewContent()">
<EyeOutlined /> 内容预览
</a-button>
// 抽屉
<a-drawer width="750" placement="right" :closable="false" :visible="drawerVisible" @close="onDrawerClose">
<div class="wangeditor" :innerHTML="previewHtml"></div>
</a-drawer>
6、无文档内容时,给出提示
判断接口返回数据,如果长度为0,就返回页面字符串显示,示例代码如下:
<h3 v-if="level1.length === 0">对不起,找不到相关文档!</h3>
7、部分功能优化
图标的显示,需要先安装依赖如下:
npm install --save @ant-design/icons-vue
代码部分如下所示:
<a-button type="primary" @click="handlePreviewContent()">
<EyeOutlined /> 内容预览
</a-button>
import {SmileOutlined, DownOutlined, ExclamationCircleOutlined,EyeOutlined} from '@ant-design/icons-vue';
components: {
SmileOutlined,
DownOutlined,
EyeOutlined
},
8、效果
写在最后
这部分内容终于更新完,耗时大约五个小时吧,第一次感觉大脑饱和,有点整不动了,有种被压制的感觉呀,但是也真的好开心,又会了几个组件的使用。
但跳出来看,目前对我而言最大的快乐,也就是每天能会一旦点就可以啦,很简单而充实。
当然这也算单身狗的日常啦,感兴趣的同学可自行尝试!
优秀不够,你是否无可替代
软件测试交流QQ群:721256703,期待你的加入!!
欢迎关注我的微信公众号:软件测试君