You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
< template >
<!-- 定义一个布局侧边栏 -- >
< a -layout -sider >
<!-- 根据不同条件添加不同的class -- >
: class = "['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
<!-- 设置宽度为256px -- >
width = "256px"
<!-- 是否可折叠 -- >
: collapsible = "collapsible"
<!-- 绑定collapsed变量 -- >
v - model = "collapsed"
<!-- 设置触发器为null -- >
: trigger = "null" >
<!-- 引入logo组件 -- >
< logo / >
<!-- 引入s - menu组件 -- >
< s -menu >
<!-- 绑定collapsed变量 -- >
: collapsed = "collapsed"
<!-- 绑定menus变量 -- >
: menu = "menus"
<!-- 绑定theme变量 -- >
: theme = "theme"
<!-- 绑定mode变量 -- >
: mode = "mode"
<!-- 监听select事件 -- >
@ select = "onSelect"
<!-- 设置样式 -- >
style = "padding: 16px 0px;" > < / s - m e n u >
< / a - l a y o u t - s i d e r >
< / template >
< script >
// 引入Logo组件
import Logo from '../../components/tools/Logo'
// 引入SMenu组件
import SMenu from './index'
// 引入mixin和mixinDevice
import { mixin , mixinDevice } from '../../utils/mixin'
export default {
name : 'SideMenu' ,
// 注册组件
components : { Logo , SMenu } ,
// 使用mixin和mixinDevice
mixins : [ mixin , mixinDevice ] ,
// 定义props
props : {
// 菜单模式，
mode : {
type : String ,
required : false ,
default : 'inline'
} ,
// 主题，
theme : {
type : String ,
required : false ,
default : 'dark'
} ,
// 是否可折叠，
collapsible : {
type : Boolean ,
required : false ,
default : false
} ,
// 是否已折叠，
collapsed : {
type : Boolean ,
required : false ,
default : false
} ,
// 菜单列表，必填
menus : {
type : Array ,
required : true
}
} ,
// 定义方法
methods : {
// 菜单选择事件
onSelect ( obj ) {
// 触发menuSelect事件
this . $emit ( 'menuSelect' , obj )
}
}
}
< / script >
