element-plus/docs/examples/badge/basic.vue
Ayden d6b14cf303
fix(component): [badge] fix auto width (#11003)
* fix: badge auto width

* fix(components): [badge] remove inset-inline-end
2023-01-10 16:45:28 +08:00

49 lines
1.1 KiB
Vue

<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-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: 40px;
}
.el-dropdown {
margin-top: 1.1rem;
}
</style>