btnMenu.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <template>
  2. <view>
  3. <uni-icons type="list" size="30" @click="showDrawer"></uni-icons>
  4. <uni-drawer ref="showLeft" mode="left" :width="320">
  5. <uni-collapse ref="collapse" accordion v-model="data.activeMenu">
  6. <uni-collapse-item :title="item.title" v-for="item in data.list" :key="item.title" :name="item.url">
  7. <view v-for="cIt in item.children" :key="item.title" @click="handleClick(cIt)">
  8. <view class="content">
  9. <text class="text" :class="{active: cIt.url.includes(data.activePath)}">{{cIt.title}}</text>
  10. </view>
  11. </view>
  12. </uni-collapse-item>
  13. </uni-collapse>
  14. <view class="close">
  15. <button @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭Drawer</text></button>
  16. </view>
  17. </uni-drawer>
  18. </view>
  19. </template>
  20. <script setup>
  21. import {
  22. ref,
  23. reactive
  24. } from "vue"
  25. const showLeft = ref(null)
  26. import { onLoad } from "@dcloudio/uni-app"
  27. const data = reactive({
  28. list: [{
  29. title: '1',
  30. url: '1',
  31. children: [{
  32. title: '1-1',
  33. url: '/pages/dqgzDangjiangongzuo/dqgzDangjiangongzuo'
  34. }, {
  35. title: '1-2',
  36. url: 'http://www.baidu.com',
  37. type: 'link'
  38. }, {
  39. title: '1-3',
  40. url: '/pages/index/index'
  41. }, {
  42. title: '1-4',
  43. url: '2'
  44. }, ]
  45. },
  46. {
  47. title: '2',
  48. url: '3',
  49. children: [{
  50. title: '2-1',
  51. url: '4'
  52. }, {
  53. title: '2-2',
  54. url: '5'
  55. }, {
  56. title: '2-3',
  57. url: '6'
  58. }, {
  59. title: '2-4',
  60. url: '7'
  61. }]
  62. }
  63. ],
  64. activeMenu: null,
  65. activePath: '',
  66. })
  67. onLoad(() => {
  68. const pages = getCurrentPages();
  69. data.activePath = pages[pages.length - 1].route;
  70. const parentMenu = data.list.find(item => item.children.some(cit => cit.url.includes(data.activePath)));
  71. console.log('parentMenu && parentMenu.url',parentMenu && parentMenu.url)
  72. data.activeMenu = parentMenu && parentMenu.url;
  73. })
  74. function showDrawer() {
  75. showLeft.value.open();
  76. }
  77. function closeDrawer() {
  78. showLeft.value.close();
  79. }
  80. function handleClick(data) {
  81. console.log(`菜单:${data.title};路径:${data.url}`);
  82. if (data.type == 'link') {
  83. window.location.href = data.url;
  84. return;
  85. }
  86. if (data.url) {
  87. uni.navigateTo({
  88. url: data.url
  89. })
  90. }
  91. }
  92. </script>
  93. <style lang="scss" scoped>
  94. .active {
  95. color: red
  96. }
  97. </style>