源代码
<template>
<div>
<h2>MenuItem Template</h2>
<Menu :inline="true" :noline="true" :menuWidth="200">
<MenuItem v-for="item in items" :key="item">
<template slot="item">
<div class="item">{{item.text}}</div>
<div v-if="item.count" class="right">
<span class="count">{{item.count}}</span>
</div>
</template>
</MenuItem>
</Menu>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ text: "Inbox", count: 127 },
{ text: "Starred" },
{ text: "Important" },
{ text: "Sent Mail", count: 32 },
{ text: "Drafts" },
{ text: "Spam", count: 345 },
{ text: "Trash" }
]
};
}
};
</script>
<style>
.item {
line-height: 30px;
padding: 0 20px;
}
.right {
position: absolute;
right: 20px;
height: 30px;
top: 5px;
}
.count {
display: inline-block;
border-radius: 6px;
background: #666;
color: #fff;
padding: 0 6px;
font-size: 12px;
line-height: 16px;
height: 16px;
}
</style>