Skip to content
On this page

组件库文档 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-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

参数名类型默认值描述
widthNumber750组件宽度
heightNumber500组件高度
sideWidthNumber190侧边菜单栏宽度
itemHeightNumber100侧边菜单项目高度
fontSizeNumber26菜单文字大小
activeNumber0默认选中的索引,可以使用v-model:active双向绑定
menuFontColorStringgrey菜单默认字体颜色
menuActiveFontColorStringprimary菜单选中时的字体颜色
menuActiveBgColorStringwhite菜单项目激活时的背景颜色
menuBarBgColorStringgrey-4侧菜单栏的整体背景色
bodyBgColorStringwhite右侧内容区域的背景色
unitStringrpx尺寸单位
listArray[]菜单项目数据
refreshBooleanfalse默认加载状态
loadFunction(type: 'pull''bottom'
firstLoadBooleantrue首次是否进行load数据加载触发状态.
disabledBottomBooleanfalse是否禁用下拉刷新功能
rangKeyStringtext菜单名称的字段key
isScrollBooleanfalse是否自定义右侧滚动区域的插槽,如果是原有的下拉,下拉的滚动组件将不显示并去除。

🌹 事件

事件名参数返回数据描述
click/item:listItem,index:number点击菜单项目时触发
change/index:number改变菜单选项时触发
load/type:'loading'|'success'|'pull'|'bottom'|'menu',index:number加载数据时触发此函数
restore/-重置下拉时触发

🌽 slot插槽

默认右边内容插槽

🥗 ref方法