81 lines
2.9 KiB
Vue
81 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<Menu :theme="theme1" active-name="1" @on-select="handleSelect" @on-open-change="handleOpen" :open-names="openArr">
|
|
<Menu-item name="1">
|
|
<Icon type="ios-paper"></Icon>
|
|
一级1
|
|
</Menu-item>
|
|
<Menu-item name="2">
|
|
<Icon type="ios-people"></Icon>
|
|
一级2
|
|
</Menu-item>
|
|
<Submenu name="3">
|
|
<template slot="title">
|
|
<Icon type="ios-people"></Icon>
|
|
一级3
|
|
</template>
|
|
<Menu-item name="3-1">二级1</Menu-item>
|
|
<Menu-item name="3-2">二级2</Menu-item>
|
|
<Submenu name="3-3">
|
|
<template slot="title">
|
|
<Icon type="stats-bars"></Icon>
|
|
二级3
|
|
</template>
|
|
<Menu-item name="3-3-1">三级1</Menu-item>
|
|
<Menu-item name="3-3-2">三级2</Menu-item>
|
|
<Submenu name="3-3-3">
|
|
<template slot="title">
|
|
<Icon type="stats-bars"></Icon>
|
|
三级3
|
|
</template>
|
|
<Menu-item name="3-3-3-1">四级1</Menu-item>
|
|
<Menu-item name="3-3-3-2">四级2</Menu-item>
|
|
<MenuGroup title="Menu-Group">
|
|
<MenuItem name="3-3-3-3-1">
|
|
<Icon type="document-text"></Icon>
|
|
Group-item1
|
|
</MenuItem>
|
|
<MenuItem name="3-3-3-3-2">
|
|
<Icon type="chatbubbles"></Icon>
|
|
Group-item2
|
|
</MenuItem>
|
|
</MenuGroup>
|
|
</Submenu>
|
|
</Submenu>
|
|
</Submenu>
|
|
<Menu-item name="4">
|
|
<Icon type="settings"></Icon>
|
|
一级4
|
|
</Menu-item>
|
|
</Menu>
|
|
<br>
|
|
<p>切换主题</p>
|
|
<Radio-group v-model="theme1">
|
|
<Radio label="light"></Radio>
|
|
<Radio label="dark"></Radio>
|
|
<Radio label="primary"></Radio>
|
|
</Radio-group>
|
|
<Input v-model="value4" icon="ios-clock-outline" placeholder="请输入..." style="width: 200px"></Input>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
theme1: 'dark',
|
|
value4: '',
|
|
openArr: ['3', '3-3', '3-3-3']
|
|
};
|
|
},
|
|
methods: {
|
|
handleSelect (name) {
|
|
// console.log(name);
|
|
return name;
|
|
},
|
|
handleOpen (openArr) {
|
|
// console.log(openArr);
|
|
return openArr;
|
|
}
|
|
}
|
|
};
|
|
</script>
|