Item.vue 712 Bytes
Newer Older
sunhongwei's avatar
sunhongwei committed
1 2 3 4 5 6 7 8 9 10 11 12
<script>
export default {
  name: 'MenuItem',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
dragondean@qq.com's avatar
dragondean@qq.com committed
13 14
    },
    badge: Number
sunhongwei's avatar
sunhongwei committed
15 16
  },
  render(h, context) {
dragondean@qq.com's avatar
dragondean@qq.com committed
17
    const { icon, title, badge } = context.props
sunhongwei's avatar
sunhongwei committed
18 19 20
    const vnodes = []

    if (icon) {
dragondean@qq.com's avatar
dragondean@qq.com committed
21
      vnodes.push(<svg-icon icon-class={icon} test="1"/>)
sunhongwei's avatar
sunhongwei committed
22 23 24
    }

    if (title) {
dragondean@qq.com's avatar
dragondean@qq.com committed
25
      vnodes.push(<span><span>{(title)}</span><span class="badge">{badge}</span></span>)
sunhongwei's avatar
sunhongwei committed
26
    }
dragondean@qq.com's avatar
dragondean@qq.com committed
27

sunhongwei's avatar
sunhongwei committed
28 29 30 31
    return vnodes
  }
}
</script>
dragondean@qq.com's avatar
dragondean@qq.com committed
32 33 34 35 36 37 38 39 40 41
<style lang="scss" scoped>
.badge:not(:empty){
  background: red;
  color: #fff;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 10px;
  margin-left: 5px;
}
</style>