mirror of https://github.com/halo-dev/halo-admin
59 lines
1.1 KiB
Vue
59 lines
1.1 KiB
Vue
<template>
|
|
<a-popover trigger="click" placement="bottomRight" :overlayStyle="{ width: '300px' }">
|
|
<template slot="content">
|
|
<a-spin :spinning="loadding">
|
|
<a-tabs>
|
|
<a-tab-pane v-for="(tab, k) in tabs" :tab="tab.title" :key="k">
|
|
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-spin>
|
|
</template>
|
|
<span @click="fetchNotice" class="header-notice">
|
|
<a-badge count="12">
|
|
<a-icon style="font-size: 16px; padding: 4px" type="bell" />
|
|
</a-badge>
|
|
</span>
|
|
</a-popover>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'HeaderNotice',
|
|
props: {
|
|
tabs: {
|
|
type: Array,
|
|
default: null,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
loadding: false
|
|
}
|
|
},
|
|
methods: {
|
|
fetchNotice() {
|
|
if (this.loadding) {
|
|
this.loadding = false
|
|
return
|
|
}
|
|
this.loadding = true
|
|
setTimeout(() => {
|
|
this.loadding = false
|
|
}, 2000)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.header-notice{
|
|
display: inline-block;
|
|
transition: all 0.3s;
|
|
span {
|
|
vertical-align: initial;
|
|
}
|
|
}
|
|
</style>
|