pop-menu.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <view class="pop-menu" @tap="onClose()" @contextmenu.prevent="">
  3. <view class="menu" :style="menuStyle">
  4. <view class="menu-item" v-for="(item) in items" :key="item.key" @click.prevent="onSelectMenu(item)">
  5. <uni-icons :type="item.icon" size="22"></uni-icons>
  6. <text> {{item.name}}</text>
  7. </view>
  8. </view>
  9. </view>
  10. </template>
  11. <script>
  12. export default {
  13. name: "pop-menu",
  14. data() {
  15. return {}
  16. },
  17. props: {
  18. menuStyle: {
  19. type: String
  20. },
  21. items: {
  22. type: Array
  23. }
  24. },
  25. methods: {
  26. onSelectMenu(item) {
  27. this.$emit("select", item);
  28. },
  29. onClose() {
  30. this.$emit("close");
  31. }
  32. }
  33. }
  34. </script>
  35. <style lang="scss" scoped>
  36. .pop-menu {
  37. position: fixed;
  38. left: 0;
  39. top: 0;
  40. right: 0;
  41. bottom: 0;
  42. width: 100%;
  43. height: 100%;
  44. z-index: 9999;
  45. }
  46. .menu {
  47. position: fixed;
  48. border: 1px solid #b4b4b4;
  49. border-radius: 7px;
  50. overflow: hidden;
  51. box-shadow: 0px 0px 10px #ccc;
  52. background-color: #eeeeee;
  53. .menu-item {
  54. height: 25px;
  55. line-height: 25px;
  56. font-size: 18px;
  57. display: flex;
  58. padding: 10px;
  59. align-items: center;
  60. border-bottom: 1px solid #d0d0d8;
  61. }
  62. }
  63. </style>