Vue3+TypeScript+Ant-Design-Vue开发后台管理模板（三）
day3
6.4 消息推送具体效果的实现
0）⽬录架构
1）通知tab的实现notifyList.vue
<template>
<a-list item-layout="horizontal":data-source="ifies">
<template v-if="!ifies.length == 0"renderItem="{ item }">
<a-list-item>
<a-list-item-meta description="三年前">
<template title>
<a href="#">{{ item.title }}</a>
</template>
损伤的近义词<template avatar>
<a-avatar src="/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
</template>
</a-list-item-meta>
</a-list-item>
</template>
<template v-if="ifies.length == 0">
<a-empty description="暂⽆通知"/>
</template>
<a-list-item>
<a-button type="info"block@click="clearNotify">清空通知</a-button>
<a-button type="info"block>
<router-link to="">查看更多</router-link>
</a-button>
</a-list-item>
</a-list>
</template>
<script lang="ts">
import{ data, uGetNotify, uClearNotify }from"./index";
export default{
name:"",
情感短文/** ⽗组件传过来的值 */
props:{},
inject:["ur"],
/** 组件 */
components:{},
tup(props,{ emit }){
// 获取通知数据
uGetNotify(emit, data);
// 清空数据
const{ clearNotify }=uClearNotify(emit, data);
/** 返回值 */
return{ data, clearNotify };
}
};
</script>
<style lang="scss"scoped></style>
通知标签页的实现，主要⽤来List组件，利⽤组件⾃带功能可以轻松的⽣成列表。为了数据和⽅法⽅便管理，单独抽离数据和⽅法在index.ts⽂件中,
import{ Count }from"@/types/header/noticeBadge";
import{ reactive }from"vue";
// 初始化数据
const data =reactive({
notifies:[],
messages:[],
todos:[]
});
// 获取通知数据
const uGetNotify=(emit:any, data: Count)=>{
// 从数据库获取数据
const notifies =[
{ title:"Ant Design Title 1"},
{ title:"Ant Design Title 2"},
以乐景写哀情{ title:"Ant Design Title 3"},
{ title:"Ant Design Title 4"}
];
然的近义词
emit("getNumber", data);
};
// 清空通知
const uClearNotify=(emit:any, data: Count)=>{
const clearNotify=()=>{
// 调⽤接⼝，删除数据库中的数据（这⾥⽤清空数组模拟）
emit("getNumber", data);
};
return{ clearNotify };
};
野餐食物// 获取消息数据
const uGetMessage=(emit:any, data: Count)=>{
const messages =[
开口粉刺{ name:"曲丽丽", title:"评论了你", date:"三年前"},
{ name:"曲丽丽", title:"回复了你", date:"三年前"},
{ name:"曲丽丽", title:"标题", date:"三年前"}
];
emit("getNumber", data);
};
// 清空消息数据
const uClearMessage=(emit:any, data: Count)=>{
const clearMessage=()=>{
// 调⽤接⼝，删除数据库中的数据（这⾥⽤清空数组模拟）
emit("getNumber", data);
};
return{ clearMessage };
};
// 获取待办数据
const uGetTodo=(emit:any, data: Count)=>{
const todos =[
{ done:fal, tag:"grey", tagDesc:"未开始", title:"任务名称", description:"任务需要在 2017-01-12 20:00 前启动"},
{ done:true, tag:"red", tagDesc:"马上到期", title:"代码变更", description:"冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务"},
{ done:fal, tag:"orange", tagDesc:"已耗时8天", title:"信息安全考试", description:"指派⽵尔于 2017-01-09 前完成更新并发布"},
{ done:fal, tag:"blue", tagDesc:"进⾏中", title:"ABDC版本发布", description:"冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务"},{ don e:fal, tag:"grey", tagDesc:"未开始", title:"任务名称", description:"任务需要在 2017-01-12 20:00 前启动"},
{ done:true, tag:"red", tagDesc:"马上到期", title:"代码变更", description:"冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务"},
{ done:fal, tag:"orange", tagDesc:"已耗时8天", title:"信息安全考试", description:"指派⽵尔于 2017-01-09 前完成更新并发布"},
{ done:fal, tag:"blue", tagDesc:"进⾏中", title:"ABDC版本发布", description:"冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务"}
];
emit("getNumber", data);
};
// 清空待办数据
const uClearTodo=(emit:any, data: Count)=>{
const clearTodo=()=>{
// 调⽤接⼝，删除数据库中的数据（这⾥⽤清空数组模拟）
// 调⽤接⼝，删除数据库中的数据（这⾥⽤清空数组模拟）
emit("getNumber", data);
};
return{ clearTodo };
};
// 完成待办事项
const uDoneTodo=(emit, data: Count)=>{
const todoDone=(index:number)=>{
/
/ 修改数据库中该条记录的状态
emit("getNumber", data);
};
return{ todoDone };
};
export{
data,
uGetMessage,
uClearMessage,
uGetNotify,
uClearNotify,
uGetTodo,
uClearTodo,
uDoneTodo
};
由于没有后端也没有使⽤mockjs，我就⽤数组代替进⾏相关操作，具体的实现⽅式，使⽤了函数式编程。在index.ts中进⾏业务操作（若业务繁多，可再次进⾏拆分），在notifyList.vue中导⼊后，即可正常使⽤。由于``notifyList.vue是⼀个组件，因此使⽤Vue的emit⽅法向⽗组件传值，具体使⽤⽅法可参考官⽅⽂档。当⽗组件（即index.vue`）获取到数据后，即可进⾏数据的处理，渲染或者计算通知的数量并进⾏赋值。
消息推送模块分为三个⼦组件，分别是：notifyList.vue,messageList.vue,todoList.vue，实现⽅式答题类似，都是通过emit传值，⽗组件进⾏数据处理。todoList还增加了⼀个功能，即点击后状态改成已完成，者主要是判断数据中done字段的值，控制其显⽰。
具体代码如下：
2）message.vue⽂件
<a-list item-layout="horizontal":data-source="ssages">
<template v-if="!ssages.length == 0"renderItem="{ item }">
<a-list-item>
<a-list-item-meta :description="item.date">
<template title>
<a href="#">{{ item.name }} {{ item.title }}</a>
</template>
<template avatar>
<a-avatar src="/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/> </template>
</a-list-item-meta>
</a-list-item>
</template>
<template v-if="ssages.length == 0">
<a-empty description="暂⽆通知"/>
</template>
<a-list-item>
<a-button type="info"block@click="clearMessage">清空通知</a-button>
<a-button type="info"block>
<router-link to="">查看更多</router-link>
</a-button>
</a-list-item>
头痛英语
</a-list>
</template>
<script lang="ts">
import{ data, uGetMessage, uClearMessage }from"./index";
export default{
name:"",
/** ⽗组件传过来的值 */
props:{},
/** 组件 */
components:{},
tup(props,{ emit }){
/
/ 获取消息数据
uGetMessage(emit, data);
// 清空消息
const{ clearMessage }=uClearMessage(emit, data);
/** 返回值 */
return{ data, clearMessage };
}
};
</script>
<style lang="scss"scoped></style>
3）todoList.vue⽂件
回车换行<a-list item-layout="horizontal":data-source="dos">
<template v-if="!dos.length == 0"renderItem="{ item, index }"> <a-list-item>
<a-list-item-meta :description="item.description"@click="todoDone(index)"> <template title>
<a href="#">{{ item.title }}</a>
<a-tag :color="item.tag"class="todo-tags"v-if="!item.done">
{{ item.tagDesc }}
</a-tag>
<a-tag color="#2db7f5"class="todo-tags"v-el>
已完成
</a-tag>
</template>
</a-list-item-meta>
</a-list-item>
</template>
<template v-if="dos.length == 0">
<a-empty description="暂⽆通知"/>
</template>
</a-list>
<a-list>
<a-list-item>
<a-button type="info"block@click="clearTodo">清空通知</a-button>
<a-button type="info"block>
<router-link to="">查看更多</router-link>
</a-button>
</a-list-item>
</a-list>
</template>
<script lang="ts">
import{ data, uGetTodo, uClearTodo, uDoneTodo }from"./index"; export default{
name:"TodoList",
/** ⽗组件传过来的值 */
props:{},
/** 组件 */
components:{},
tup(props,{ emit }){
// 获取待办数据
uGetTodo(emit, data);
// 清空待办
const{ clearTodo }=uClearTodo(emit, data);
// 完成待办事项
const{ todoDone }=uDoneTodo(emit, data);
/** 返回值 */
return{ data, clearTodo, todoDone };
}
};
</script>
<style lang="scss"scoped>
.todo-tags{
float: right;
}
</style>
4）index.vue⽂件
<template>
<div class="notice-badge-wrap">
<a-dropdown :trigger="['click']">
<span @click="e => e.preventDefault()">
<BellOutlined class="icon"/>
<a-badge :count="unt"class="notice-badge">
<a href="#"class="head-example"/>
</a-badge>
</span>
