forked from opentiny/tiny-vue
192 lines
3.8 KiB
Vue
192 lines
3.8 KiB
Vue
<template>
|
||
<div>
|
||
<p>场景1：静态数据</p>
|
||
<tiny-tree-menu :data="treeData"></tiny-tree-menu>
|
||
<br />
|
||
<p>场景2：服务端数据</p>
|
||
<tiny-tree-menu :get-menu-data-sync="getMenuDataSync"></tiny-tree-menu>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
|
||
|
||
const treeData = ref([
|
||
{
|
||
id: 100,
|
||
label: '组件总览'
|
||
},
|
||
{
|
||
id: 200,
|
||
label: '使用指南',
|
||
children: [
|
||
{
|
||
id: 201,
|
||
label: '更新日志'
|
||
},
|
||
{ id: 202, label: '环境准备' },
|
||
{ id: 203, label: '安装' },
|
||
{
|
||
id: 204,
|
||
label: '引入组件',
|
||
children: [
|
||
{ id: 20401, label: '按需引入' },
|
||
{ id: 20402, label: '完整引入' }
|
||
]
|
||
},
|
||
{ id: 205, label: '开发示例' },
|
||
{ id: 206, label: '国际化' },
|
||
{ id: 207, label: '主题配置' },
|
||
{ id: 208, label: '表单校验配置' },
|
||
{ id: 209, label: '常见问题' }
|
||
]
|
||
},
|
||
{
|
||
id: 300,
|
||
label: '框架风格',
|
||
children: [
|
||
{
|
||
id: 301,
|
||
label: 'Color 色彩'
|
||
},
|
||
{ id: 302, label: 'Container 版型' },
|
||
{ id: 303, label: 'Font 字体' },
|
||
{ id: 304, label: 'Icon 图标' },
|
||
{ id: 305, label: 'Layout 布局' }
|
||
]
|
||
},
|
||
{
|
||
id: 400,
|
||
label: '导航组件',
|
||
children: [
|
||
{
|
||
id: 401,
|
||
label: 'Anchor 锚点'
|
||
},
|
||
{ id: 402, label: 'Guide 引导' },
|
||
{ id: 403, label: 'Breadcrumb 面包屑' }
|
||
]
|
||
},
|
||
{
|
||
id: 500,
|
||
label: '容器组件',
|
||
children: [
|
||
{
|
||
id: 501,
|
||
label: 'Carousel 走马灯'
|
||
},
|
||
{ id: 502, label: 'Collapse 折叠面板' },
|
||
{ id: 503, label: 'DialogBox 对话框' }
|
||
]
|
||
},
|
||
{
|
||
id: 600,
|
||
label: '表单组件',
|
||
children: [
|
||
{
|
||
id: 60101,
|
||
label: 'Button 按钮',
|
||
url: 'button'
|
||
},
|
||
{
|
||
id: 60102,
|
||
label: 'DatePicker 日期选择器',
|
||
url: 'date-picker'
|
||
},
|
||
{
|
||
id: 60103,
|
||
label: 'Select 选择器',
|
||
url: 'select'
|
||
},
|
||
{
|
||
id: 60104,
|
||
label: 'DropTimes 下拉时间',
|
||
url: 'drop-times'
|
||
},
|
||
{
|
||
id: 60105,
|
||
label: 'Input 输入框',
|
||
url: 'input'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: 700,
|
||
label: '业务组件',
|
||
children: [
|
||
{
|
||
id: 701,
|
||
label: 'Amount 金额'
|
||
},
|
||
{ id: 702, label: 'Area 片区' },
|
||
{ id: 703, label: 'Company 公司' }
|
||
]
|
||
},
|
||
{
|
||
id: 800,
|
||
label: '其他组件',
|
||
children: [
|
||
{
|
||
id: 801,
|
||
label: '废弃组件',
|
||
children: [
|
||
{
|
||
id: 80101,
|
||
label: 'CreditCardForm 信用卡表单',
|
||
url: 'credit-card-form'
|
||
},
|
||
{
|
||
id: 80102,
|
||
label: 'DetailPage 表头详情栏',
|
||
url: 'detail-page'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: 802,
|
||
label: '新增组件',
|
||
children: [
|
||
{
|
||
id: 80201,
|
||
label: 'QrCode 二维码',
|
||
url: 'qr-code'
|
||
},
|
||
{
|
||
id: 80202,
|
||
label: 'Watermark 水印',
|
||
url: 'watermark'
|
||
},
|
||
{
|
||
id: 80203,
|
||
label: 'MindMap 脑图',
|
||
url: 'mind-map'
|
||
},
|
||
{
|
||
id: 80204,
|
||
label: 'Skeleton 骨架屏',
|
||
url: 'skeleton'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: 803,
|
||
label: 'BulletinBoard 公告牌'
|
||
},
|
||
{ id: 804, label: 'Calendar 日历' }
|
||
]
|
||
}
|
||
])
|
||
|
||
const getMenuDataSync = () => {
|
||
return treeData.value
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
p {
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
}
|
||
</style>
|