drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Vue

Browse source
This commit is contained in:
梁灏 2018-03-13 18:37:16 +08:00
parent 5ddf1bcf4f
commit 444907c4ca
5 changed files with 60 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

129
examples/routers/menu.vue
View file

@ -1,97 +1,46 @@
<template>
<div>
<Menu :theme="theme1" active-name="1" accordion @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>
<Menu active-name="1-2" :open-names="['1']">
<Submenu name="1">
<template slot="title">
<Icon type="ios-analytics"></Icon>
Navigation One
</template>
<MenuGroup title="Item 1">
<MenuItem name="1-1">Option 1</MenuItem>
<MenuItem name="1-2">Option 2</MenuItem>
</MenuGroup>
<MenuGroup title="Item 2">
<MenuItem name="1-3">Option 3</MenuItem>
<MenuItem name="1-4">Option 4</MenuItem>
</MenuGroup>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-filing"></Icon>
Navigation Two
</template>
<MenuItem name="2-1">Option 5</MenuItem>
<MenuItem name="2-2">Option 6</MenuItem>
<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 name="3-3-4">
<template slot="title">
<Icon type="stats-bars"></Icon>
三级4
</template>
<Menu-item name="3-3-4-1">四级1</Menu-item>
<Menu-item name="3-3-4-2">四级2</Menu-item>
</Submenu>
</Submenu>
<Submenu name="3-4">
<template slot="title">
<Icon type="stats-bars"></Icon>
二级4
</template>
<Menu-item name="3-4-1">三级1</Menu-item>
<Menu-item name="3-4-2">三级2</Menu-item>
</Submenu>
<template slot="title">Submenu</template>
<MenuItem name="3-1">Option 7</MenuItem>
<MenuItem name="3-2">Option 8</MenuItem>
</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>
</Submenu>
<Submenu name="4">
<template slot="title">
<Icon type="ios-gear"></Icon>
Navigation Three
</template>
<MenuItem name="4-1">Option 9</MenuItem>
<MenuItem name="4-2">Option 10</MenuItem>
<MenuItem name="4-3">Option 11</MenuItem>
<MenuItem name="4-4">Option 12</MenuItem>
</Submenu>
</Menu>
</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>