update Menu
update Menu
This commit is contained in:
parent
8778b3435d
commit
e05d728978
10 changed files with 441 additions and 42 deletions
|
@ -44,6 +44,7 @@ li + li {
|
|||
<li><a v-link="'/table'">Table</a></li>
|
||||
<li><a v-link="'/dropdown'">Dropdown</a></li>
|
||||
<li><a v-link="'/tabs'">Tabs</a></li>
|
||||
<li><a v-link="'/menu'">Menu</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<router-view></router-view>
|
||||
|
|
|
@ -117,6 +117,11 @@ router.map({
|
|||
component: function (resolve) {
|
||||
require(['./routers/tabs.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/menu': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/menu.vue'], resolve);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
70
test/routers/menu.vue
Normal file
70
test/routers/menu.vue
Normal file
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<div>
|
||||
<i-button @click="toggleMode">调整方向</i-button>
|
||||
<Menu :mode="mode" active-key="1">
|
||||
<Menu-item key="1">
|
||||
<Icon type="ionic"></Icon>
|
||||
<span>导航一</span>
|
||||
</Menu-item>
|
||||
<Menu-item key="2">导航二</Menu-item>
|
||||
<Submenu key="3">
|
||||
<span slot="title">导航三</span>
|
||||
<Menu-group title="集合1">
|
||||
<Menu-item key="3-1">导航三 - 一</Menu-item>
|
||||
<Menu-item key="3-2">导航三 - 二</Menu-item>
|
||||
</Menu-group>
|
||||
<Menu-group title="集合2">
|
||||
<Menu-item key="3-3">导航三 - 三</Menu-item>
|
||||
<Menu-item key="3-4">导航三 - 四</Menu-item>
|
||||
</Menu-group>
|
||||
</Submenu>
|
||||
<Menu-item key="4">导航四</Menu-item>
|
||||
</Menu>
|
||||
<br><br>
|
||||
<!--<Menu mode="horizontal" theme="dark" active-key="1">-->
|
||||
<!--<Menu-item key="1">-->
|
||||
<!--<Icon type="ionic"></Icon>-->
|
||||
<!--<span>导航一</span>-->
|
||||
<!--</Menu-item>-->
|
||||
<!--<Menu-item key="2">导航二</Menu-item>-->
|
||||
<!--<Submenu key="3">-->
|
||||
<!--<span slot="title">导航三</span>-->
|
||||
<!--<Menu-item key="3-1">导航三 - 一</Menu-item>-->
|
||||
<!--<Menu-item key="3-2">导航三 - 二</Menu-item>-->
|
||||
<!--<Menu-item key="3-3">导航三 - 三</Menu-item>-->
|
||||
<!--</Submenu>-->
|
||||
<!--<Menu-item key="4">导航四</Menu-item>-->
|
||||
<!--</Menu>-->
|
||||
<!--<br><br>-->
|
||||
<!--<Menu mode="horizontal" theme="primary" active-key="1">-->
|
||||
<!--<Menu-item key="1">-->
|
||||
<!--<Icon type="ionic"></Icon>-->
|
||||
<!--<span>导航一</span>-->
|
||||
<!--</Menu-item>-->
|
||||
<!--<Menu-item key="2">导航二</Menu-item>-->
|
||||
<!--<Submenu key="3">-->
|
||||
<!--<span slot="title">导航三</span>-->
|
||||
<!--<Menu-item key="3-1">导航三 - 一</Menu-item>-->
|
||||
<!--<Menu-item key="3-2">导航三 - 二</Menu-item>-->
|
||||
<!--<Menu-item key="3-3">导航三 - 三</Menu-item>-->
|
||||
<!--</Submenu>-->
|
||||
<!--<Menu-item key="4">导航四</Menu-item>-->
|
||||
<!--</Menu>-->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
data () {
|
||||
return {
|
||||
mode: 'horizontal'
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
toggleMode () {
|
||||
this.mode = this.mode === 'horizontal' ? 'vertical' : 'horizontal';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -1,16 +1,8 @@
|
|||
<template>
|
||||
<Row style="margin: 100px">
|
||||
<i-col span="12" style="padding-right:10px">
|
||||
<i-select :model.sync="model11" filterable>
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</i-col>
|
||||
<i-col span="12">
|
||||
<i-select :model.sync="model12" filterable multiple>
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</i-col>
|
||||
</Row>
|
||||
<i-button @click="model8 = ''">clear</i-button>
|
||||
<i-select :model.sync="model8" clearable style="width:200px">
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
@ -42,8 +34,7 @@
|
|||
label: '重庆市'
|
||||
}
|
||||
],
|
||||
model11: '',
|
||||
model12: []
|
||||
model8: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue