content-menu.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536
  1. <div class="pop-mask" style="background-color: #00000000;" @click="itemClick('', $event)" ref="mask">
  2. <div class="pop-menu-container" :style="menuStyle" ref="menu" v-if="show" @click="$event.stopPropagation()">
  3. <template v-for="item in items">
  4. <div class="pop-menu-item"
  5. v-if="!item.subMenu"
  6. :key="item.id"
  7. @click.stop="itemClick(item, $event)">
  8. {{ item.name }}
  9. </div>
  10. <div v-else
  11. style="position: relative; overflow: visible;"
  12. class="pop-menu-item"
  13. :key="item.id"
  14. @click.stop="itemClick(item, $event)"
  15. @mouseenter="onSubMenuItemEnter(item)"
  16. @mouseleave="onSubMenuItemLeave(item)">
  17. {{ item.name }}
  18. <span style="position: absolute; right: 0; padding-right: 0.5em; font-size: 0.8em;">&#9654;</span>
  19. <div :style="positionContainerStyle" @click="$event.stopPropagation()">
  20. <div v-if="item.id === curSubMenuItemId"
  21. class="pop-sub-menu-container"
  22. :style="subMenuStyle">
  23. <div v-for="subItem in item.subMenu"
  24. :key="subItem.id"
  25. :class="['pop-menu-item', subItem.isTop && 'top', subItem.isBottom && 'bottom']"
  26. @click.stop="itemClick(subItem, $event)">
  27. {{ subItem.name }}
  28. </div>
  29. </div>
  30. </div>
  31. </div>
  32. </template>
  33. </div>
  34. </div>