<template>
  <div>
    <svg-icon v-if="icon!=''" :icon-class="icon"/>
    <span v-if="title!=''" slot="title">{{ title }}</span>
    <el-badge v-if="value!=''" :value="value" class="mark" />
  </div>
</template>
<script>
export default {
  name: 'MenuItem',
  // functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    value: {
      type: [String, Number],
      default: ''
    }
  }
  // ,
  // render(h, context) {
  //   const { icon, title } = context.props
  //   const vnodes = []
  //
  //   if (icon) {
  //     vnodes.push(<svg-icon icon-class={icon}/>)
  //   }
  //   // if (title) {
  //   //   vnodes.push(<el-badge class='marker' is-dot />)
  //   // }
  //   if (title) {
  //     vnodes.push(<el-badge is-dot slot='title' class='item'><span>{(title)}</span></el-badge>)
  //   }
  //   return vnodes
  // }
}
</script>