update Menu

update Menu
This commit is contained in:
梁灏 2016-12-07 20:45:21 +08:00
parent 8778b3435d
commit e05d728978
10 changed files with 441 additions and 42 deletions

View file

@ -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>

View file

@ -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
View 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>

View file

@ -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: ''
}
}
}