-
-
Notifications
You must be signed in to change notification settings - Fork 14.6k
/
basic.vue
50 lines (47 loc) 路 1.23 KB
/
basic.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<template>
<el-badge :value="12" class="item">
<el-button>comments</el-button>
</el-badge>
<el-badge :value="3" class="item">
<el-button>replies</el-button>
</el-badge>
<el-badge :value="1" class="item" type="primary">
<el-button>comments</el-button>
</el-badge>
<el-badge :value="2" class="item" type="warning">
<el-button>replies</el-button>
</el-badge>
<el-badge :value="1" class="item" color="green">
<el-button>custom background</el-button>
</el-badge>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
Click Me
<el-icon class="el-icon--right"><caret-bottom /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item class="clearfix">
comments
<el-badge class="mark" :value="12" />
</el-dropdown-item>
<el-dropdown-item class="clearfix">
replies
<el-badge class="mark" :value="3" />
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<script lang="ts" setup>
import { CaretBottom } from '@element-plus/icons-vue'
</script>
<style scoped>
.item {
margin-top: 10px;
margin-right: 30px;
}
.el-dropdown {
margin-top: 1.1rem;
}
</style>