父页面

<template><div style="margin-top: 20px"><div class="nav-style msg-style"><el-badge :value="value" :max="99" class="num" v-if="value > 0"><i class="el-icon-bell"></i></el-badge><i class="el-icon-bell" v-else></i><message class="news-style" @getNums="getNumsFn"></message></div></div>
</template>
<script>
import message from './message.vue'
export default {components: { message },data() {return {value: 0}},methods: {getNumsFn(val) {this.value = val}}
}
</script><style scoped>
.el-icon-bell {font-size: 16px;
}.nav-style label {text-align: center;width: 16px;height: 16px;position: absolute;top: 3px;right: 16px;
}.nav-style .name {height: 22px;margin-top: 19px;margin-bottom: 19px;font-size: 14px;font-weight: 400;color: #24324c;line-height: 22px;
}.msg-style {position: relative;float: right;margin-right: 100px;
}
.msg-style:hover .news-style {display: block;
}
.msg-style .num {line-height: 100%;
}
::v-deep .msg-style .el-badge__content {margin-top: 3px;padding: 0 3px;/* width: 28px; */min-width: 16px;height: 16px;background: #f2314e;text-align: center;line-height: 16px;font-size: 12px;z-index: 3;
}.nav-style .el-button {font-size: 14px;
}
</style>

子页面（message.vue)

<template><div class="news-style"><div class="msg"><div class="msg-header">消息中心</div><div class="msg-style"><div v-if="msglist.length > 0"><div class="item" v-for="item in msglist" :key="item.id"><span class="blue dot"></span><a:href="item.url"target="_blank":class="[item.url ? 'title-style' : '', 'title']"v-bind:title="msglist.title"><span @click="titleFn(item.id)" v-html="item.title"></span></a></div></div><div class="no-item" v-else><span>暂无新消息，去别的地方看看吧~</span></div></div><div class="msg-footer"><el-button type="text" @click="markFn" :disabled="msglist.length === 0"> 全部标为已读 </el-button><!-- 跳转 --><a class="link" target="_blank" rel="noreferrer" href="#/">查看全部 <i class="el-icon-arrow-right"></i> </a></div></div></div>
</template><script>
export default {data() {return {msglist: [],isRead: false}},created() {this.informationFn() //信息},methods: {informationFn() {// 页面只能先展示2条const falselist = {num: 2,data: [{title: '宫1',id: 'c',url: 'https://fanyi.baidu.com/translate#en'},{title: '宫2',id: '0',url: 'https://www.baidu.com/'}]}this.msglist = falselist.data ? falselist.data : []this.$emit('getNums', falselist.num)},markFn() {const ids = this.msglist.map(item => item.id)// 调接口},titleFn(id) {// 调接口}},beforeDestroy() {}
}
</script><style lang="scss" scoped>
.news-style {position: absolute;// top: 40px;//这个是为了固定的right: -10px;display: none;background-color: #fff;border-radius: 8px;box-shadow: 0px 8px 12px 4px rgba(0, 16, 47, 0.05);transition: all 0.3s;
}
.news-style .msg {position: relative;padding: 20px 0px 28px 28px;width: 356px;height: 313px;height: 230px;
}
.msg-header {margin-bottom: 25px;font-family: PingFangSC-Regular;font-size: 16px;font-weight: normal;line-height: 24px;color: #24324c;
}
.msg-style {overflow-y: scroll;margin-bottom: 64px;padding-right: 28px;.item {display: flex;justify-content: start;align-items: center;height: 40px;line-height: 40px;border-bottom: 1px solid rgba(#00102f, $alpha: 5%);.dot {display: inline-block;margin-right: 6px;min-width: 8px;height: 8px;border-radius: 50%;}.title {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-family: PingFangSC-Regular;color: #24324c;}.title-style:hover {color: #2662ff;}}.item:last-child {border: 0;}
}
.msg-style .no-item {display: flex;justify-content: center;align-items: center;flex-direction: column;cursor: default;color: #8c93a1;img {margin: 10px 0 5px 0;}
}
.msg-style .item .red {background: #ff5959;
}
.msg-style .item .org {background: #ff8800;
}
.msg-style .item .blue {background: #5987ff;
}
.msg-footer {position: absolute;bottom: 0;margin-bottom: 28px;display: flex;justify-content: space-between;width: 300px;line-height: 22px;img {vertical-align: bottom;}.link {margin-top: 9px;color: #2662ff;}::v-deep .el-button {font-family: PingFangSC-Regular;font-size: 14px;font-weight: normal;color: rgba(0, 16, 47, 0.65);}::v-deep .el-button--text.is-disabled {color: #bfc3cb;}
}
</style>