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项目配置正确,然后运行项目,您应该能够看到一个简单的树形菜单,点击菜单项可以展开和收起其子菜单。
这个示例仅展示了树形菜单的基本功能,您可以根据实际需求进一步扩展和优化,例如添加图标、样式、动画效果等。