uni-app 树形菜单插件需求

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app 树形菜单插件需求

求一个uniapp 树形菜单!

开发环境 版本号 项目创建方式
1 回复

针对您提出的uni-app树形菜单插件需求,以下是一个基于Vue和uni-app实现的简单树形菜单组件示例。这个示例主要展示如何构建一个基本的树形菜单结构,并提供展开/收起功能。

首先,确保您的uni-app项目已经创建并运行。然后,您可以按照以下步骤创建树形菜单组件。

1. 创建树形菜单组件

components目录下创建一个名为TreeMenu.vue的文件,并添加以下代码:

<template>
  <view>
    <view v-for="(item, index) in treeData" :key="index" class="tree-item">
      <view @click="toggle(item)">
        <text :class="{ 'icon-right': true, 'icon-down': item.expanded, 'icon-right-empty': !item.expanded }">{{ item.label }}</text>
      </view>
      <view v-if="item.expanded" class="tree-children" v-for="(child, childIndex) in item.children" :key="childIndex">
        <tree-menu :tree-data="[child]" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TreeMenu',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  },
  methods: {
    toggle(item) {
      item.expanded = !item.expanded;
    }
  }
}
</script>

<style scoped>
.tree-item {
  margin-left: 20px;
}
.icon-right::after {
  content: ' ▶';
}
.icon-down::after {
  content: ' ▼';
}
.icon-right-empty::after {
  content: '';
}
</style>

2. 使用树形菜单组件

在您的页面文件中(例如pages/index/index.vue),引入并使用TreeMenu组件:

<template>
  <view>
    <tree-menu :tree-data="menuData" />
  </view>
</template>

<script>
import TreeMenu from '@/components/TreeMenu.vue';

export default {
  components: {
    TreeMenu
  },
  data() {
    return {
      menuData: [
        {
          label: 'Item 1',
          expanded: false,
          children: [
            { label: 'Child 1-1', expanded: false, children: [] },
            { label: 'Child 1-2', expanded: false, children: [] }
          ]
        },
        {
          label: 'Item 2',
          expanded: false,
          children: [
            { label: 'Child 2-1', expanded: false, children: [] }
          ]
        }
      ]
    };
  }
}
</script>

3. 运行项目

确保您的uni-app项目配置正确,然后运行项目,您应该能够看到一个简单的树形菜单,点击菜单项可以展开和收起其子菜单。

这个示例仅展示了树形菜单的基本功能,您可以根据实际需求进一步扩展和优化,例如添加图标、样式、动画效果等。

回到顶部