Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
<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>