Item.vue 712 Bytes
Newer Older
lanbaoming's avatar
lanbaoming committed
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
<script>
export default {
  name: 'MenuItem',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    badge: Number
  },
  render(h, context) {
    const { icon, title, badge } = context.props
    const vnodes = []

    if (icon) {
      vnodes.push(<svg-icon icon-class={icon} test="1"/>)
    }

    if (title) {
      vnodes.push(<span><span>{(title)}</span><span class="badge">{badge}</span></span>)
    }

    return vnodes
  }
}
</script>
<style lang="scss" scoped>
.badge:not(:empty){
  background: red;
  color: #fff;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 10px;
  margin-left: 5px;
}
</style>