BJ_ZTEITS-Developers / parking-cloud-yudao

Commit bdd8229c970acaff85394761cf1304ee4ca1514a

Authored by xingyu
1 parent 664c6258

perf: message

Inline Side-by-side
Showing 1 changed file with 40 additions and 42 deletions
yudao-ui-admin-vue3/src/layout/components/Message/src/Message.vue
  View file @bdd8229
  1 +<script setup lang="ts">
  2 +import { ref } from 'vue'
  3 +import { ElTabs, ElTabPane, ElPopover, ElBadge } from 'element-plus'
  4 +
  5 +const activeName = ref('notice')
  6 +
  7 +const noticeList = ref([
  8 + { id: 1, title: '版本升级1', date: '2022-12-12 10:00:00' },
  9 + { id: 2, title: '版本升级2', date: '2022-12-12 10:00:00' },
  10 + { id: 3, title: '版本升级3', date: '2022-12-12 10:00:00' },
  11 + { id: 4, title: '版本升级4', date: '2022-12-12 10:00:00' },
  12 + { id: 5, title: '版本升级5', date: '2022-12-12 10:00:00' }
  13 +])
  14 +const messageList = ref([
  15 + { id: 1, title: '加班1', date: '2022-12-12 10:00:00' },
  16 + { id: 2, title: '加班2', date: '2022-12-12 10:00:00' },
  17 + { id: 3, title: '加班3', date: '2022-12-12 10:00:00' },
  18 + { id: 4, title: '加班4', date: '2022-12-12 10:00:00' },
  19 + { id: 5, title: '加班5', date: '2022-12-12 10:00:00' }
  20 +])
  21 +const needList = ref([
  22 + { id: 1, title: '审批1', date: '2022-12-12 10:00:00' },
  23 + { id: 2, title: '审批2', date: '2022-12-12 10:00:00' },
  24 + { id: 3, title: '审批3', date: '2022-12-12 10:00:00' },
  25 + { id: 4, title: '审批4', date: '2022-12-12 10:00:00' },
  26 + { id: 5, title: '审批5', date: '2022-12-12 10:00:00' }
  27 +])
  28 +</script>
1 29 <template>
2 30 <div class="message">
3   - <el-popover placement="bottom" :width="310" trigger="click">
  31 + <ElPopover placement="bottom" :width="310" trigger="click">
4 32 <template #reference>
5   - <el-badge :value="noticeList.length" class="item">
  33 + <ElBadge :value="noticeList.length" class="item">
6 34 <Icon icon="ep:bell" :size="18" class="cursor-pointer" />
7   - </el-badge>
  35 + </ElBadge>
8 36 </template>
9   - <el-tabs v-model="activeName">
10   - <el-tab-pane label="通知(5)" name="first">
  37 + <ElTabs v-model="activeName">
  38 + <ElTabPane label="通知(5)" name="notice">
11 39 <div class="message-list">
12 40 <template v-for="item in noticeList" :key="item.id">
13 41 <div class="message-item">
... ... @@ -19,8 +47,8 @@
19 47 </div>
20 48 </template>
21 49 </div>
22   - </el-tab-pane>
23   - <el-tab-pane label="消息(0)" name="second">
  50 + </ElTabPane>
  51 + <ElTabPane label="消息(0)" name="message">
24 52 <div class="message-list">
25 53 <template v-for="item in messageList" :key="item.id">
26 54 <div class="message-item">
... ... @@ -32,8 +60,8 @@
32 60 </div>
33 61 </template>
34 62 </div>
35   - </el-tab-pane>
36   - <el-tab-pane label="代办(0)" name="third">
  63 + </ElTabPane>
  64 + <ElTabPane label="代办(0)" name="need">
37 65 <div class="message-list">
38 66 <template v-for="item in needList" :key="item.id">
39 67 <div class="message-item">
... ... @@ -45,41 +73,11 @@
45 73 </div>
46 74 </template>
47 75 </div>
48   - </el-tab-pane>
49   - </el-tabs>
50   - </el-popover>
  76 + </ElTabPane>
  77 + </ElTabs>
  78 + </ElPopover>
51 79 </div>
52 80 </template>
53   -
54   -<script setup lang="ts">
55   -import { ref } from 'vue'
56   -import { ElTabs, ElTabPane, ElPopover, ElBadge } from 'element-plus'
57   -
58   -const activeName = ref('first')
59   -
60   -const noticeList = ref([
61   - { id: 1, title: '版本升级1', date: '2022-12-12 10:00:00' },
62   - { id: 2, title: '版本升级2', date: '2022-12-12 10:00:00' },
63   - { id: 3, title: '版本升级3', date: '2022-12-12 10:00:00' },
64   - { id: 4, title: '版本升级4', date: '2022-12-12 10:00:00' },
65   - { id: 5, title: '版本升级5', date: '2022-12-12 10:00:00' }
66   -])
67   -const messageList = ref([
68   - { id: 1, title: '加班1', date: '2022-12-12 10:00:00' },
69   - { id: 2, title: '加班2', date: '2022-12-12 10:00:00' },
70   - { id: 3, title: '加班3', date: '2022-12-12 10:00:00' },
71   - { id: 4, title: '加班4', date: '2022-12-12 10:00:00' },
72   - { id: 5, title: '加班5', date: '2022-12-12 10:00:00' }
73   -])
74   -const needList = ref([
75   - { id: 1, title: '审批1', date: '2022-12-12 10:00:00' },
76   - { id: 2, title: '审批2', date: '2022-12-12 10:00:00' },
77   - { id: 3, title: '审批3', date: '2022-12-12 10:00:00' },
78   - { id: 4, title: '审批4', date: '2022-12-12 10:00:00' },
79   - { id: 5, title: '审批5', date: '2022-12-12 10:00:00' }
80   -])
81   -</script>
82   -
83 81 <style scoped lang="scss">
84 82 .message-empty {
85 83 display: flex;
... ...