组件库文档 tmui.design
侧边栏导航 Sidemenu
主要是应用于类目分类,产品分类,过多时的竖向展示切换.
🌶️ 侧边栏导航 sidemenu 示例
查看模拟效果+
示例模板
vue
<template>
<tm-app>
<tm-side-menu v-model:active="active" :itemHeight="100" :list="list">
<tm-text _class="pa-32" label="这边是你的内容区域"></tm-text>
</tm-side-menu>
<tm-sheet :margin="[0,32]" _class="flex flex-row flex-row-center-start">
<tm-divider color='yellow' vertical :height="30" realColor :border="8"></tm-divider>
<tm-text label="可以根据自己的需求更新你的配色方案"></tm-text>
</tm-sheet>
<tm-side-menu v-model:active="active" menuActiveFontColor="yellow" menuFontColor='black' menuBarBgColor='yellow' :itemHeight="100" :list="list">
<tm-text _class="pa-32" label="这边是你的内容区域"></tm-text>
</tm-side-menu>
</tm-app>
</template>
<script lang="ts" setup>
import tmText from "@/tmui/components/tm-text/tm-text.vue"
import tmDivider from "@/tmui/components/tm-divider/tm-divider.vue"
import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue"
import tmApp from "@/tmui/components//tm-app//tm-app.vue"
import tmSideMenu from "@/tmui/components/tm-side-menu/tm-side-menu.vue"
import {ref} from "vue"
const active = ref(3)
const list = ref([
{text:"广东",id:1},
{text:"北京",id:2},
{text:"江苏",id:3,dotCount:6},
{text:"南昌",id:4,icon:'tmicon-md-chatboxes'},
{text:"上海",id:5},
{text:"吃菠菜吃菠菜吃菠菜",id:6,dotCount:6},
{text:"Hellow",id:7},
{text:"Github",id:8,dotCount:1},
{text:"Vue",id:9},
{text:"Uniapp",id:10},
])
</script>
<style>
</style>
🌶️ 兼容性
APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
width | Number | 750 | 组件宽度 |
height | Number | 500 | 组件高度 |
sideWidth | Number | 190 | 侧边菜单栏宽度 |
itemHeight | Number | 100 | 侧边菜单项目高度 |
fontSize | Number | 26 | 菜单文字大小 |
active | Number | 0 | 默认选中的索引,可以使用v-model:active双向绑定 |
menuFontColor | String | grey | 菜单默认字体颜色 |
menuActiveFontColor | String | primary | 菜单选中时的字体颜色 |
menuActiveBgColor | String | white | 菜单项目激活时的背景颜色 |
menuBarBgColor | String | grey-4 | 侧菜单栏的整体背景色 |
bodyBgColor | String | white | 右侧内容区域的背景色 |
unit | String | rpx | 尺寸单位 |
list | Array | [] | 菜单项目数据 |
refresh | Boolean | false | 默认加载状态 |
load | Function | (type: 'pull' | 'bottom' |
firstLoad | Boolean | true | 首次是否进行load数据加载触发状态. |
disabledBottom | Boolean | false | 是否禁用下拉刷新功能 |
rangKey | String | text | 菜单名称的字段key |
isScroll | Boolean | false | 是否自定义右侧滚动区域的插槽,如果是原有的下拉,下拉的滚动组件将不显示并去除。 |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
click | / | item:listItem,index:number | 点击菜单项目时触发 |
change | / | index:number | 改变菜单选项时触发 |
load | / | type:'loading'|'success'|'pull'|'bottom'|'menu',index:number | 加载数据时触发此函数 |
restore | / | - | 重置下拉时触发 |
🌽 slot插槽
默认右边内容插槽
🥗 ref方法
无