update Menu
update Menu
This commit is contained in:
梁灏
parent
8778b3435d
commit
e05d728978
10 changed files with 441 additions and 42 deletions
|
|
@ -4,10 +4,7 @@
|
|||
v-clickoutside="handleClose"
|
||||
@mouseenter="handleMouseenter"
|
||||
@mouseleave="handleMouseleave">
|
||||
<div
|
||||
:class="[prefixCls-rel]"
|
||||
v-el:reference
|
||||
@click="handleClick"><slot></slot></div>
|
||||
<div :class="[prefixCls-rel]" v-el:reference @click="handleClick"><slot></slot></div>
|
||||
<Drop v-show="visible" :placement="placement" :transition="transition" v-ref:drop><slot name="list"></slot></Drop>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,30 @@
|
|||
<template>
|
||||
|
||||
<li :class="[prefixCls + '-item-group']">
|
||||
<div :class="[prefixCls + '-item-group-title']">{{ title }}</div>
|
||||
<ul><slot></slot></ul>
|
||||
</li>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-menu';
|
||||
|
||||
export default {
|
||||
props: {},
|
||||
data () {
|
||||
return {}
|
||||
name: 'MenuGroup',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,13 +1,42 @@
|
|||
<template>
|
||||
|
||||
<li :class="classes" @click.stop="handleClick"><slot></slot></li>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-menu';
|
||||
|
||||
export default {
|
||||
props: {},
|
||||
data () {
|
||||
return {}
|
||||
name: 'MenuItem',
|
||||
props: {
|
||||
key: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
data () {
|
||||
return {
|
||||
active: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}-item`,
|
||||
{
|
||||
[`${prefixCls}-item-active`]: this.active,
|
||||
[`${prefixCls}-item-selected`]: this.active,
|
||||
[`${prefixCls}-item-disabled`]: this.disabled
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
this.$dispatch('on-menu-item-select', this.key);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,13 +1,93 @@
|
|||
<template>
|
||||
|
||||
<ul :class="classes"><slot></slot></ul>
|
||||
</template>
|
||||
<script>
|
||||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-menu';
|
||||
|
||||
export default {
|
||||
props: {},
|
||||
data () {
|
||||
return {}
|
||||
props: {
|
||||
mode: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['horizontal', 'vertical']);
|
||||
},
|
||||
default: 'vertical'
|
||||
},
|
||||
theme: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['light', 'dark', 'primary']);
|
||||
},
|
||||
default: 'light'
|
||||
},
|
||||
activeKey: {
|
||||
type: [String, Number]
|
||||
},
|
||||
openKeys: {
|
||||
type: Array
|
||||
},
|
||||
accordion: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-${this.mode}`]: this.mode,
|
||||
[`${prefixCls}-${this.theme}`]: this.theme
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateActiveKey () {
|
||||
this.$children.forEach((item, index) => {
|
||||
if (!this.activeKey && index === 0) this.activeKey = item.key;
|
||||
|
||||
if (item.$options.name === 'Submenu') {
|
||||
item.active = false;
|
||||
item.$children.forEach(subitem => {
|
||||
if (subitem.$options.name === 'MenuGroup') {
|
||||
subitem.$children.forEach(groupItem => {
|
||||
if (groupItem.key === this.activeKey) {
|
||||
groupItem.active = true;
|
||||
groupItem.$parent.$parent.active = true;
|
||||
} else {
|
||||
groupItem.active = false;
|
||||
}
|
||||
})
|
||||
} else {
|
||||
if (subitem.key === this.activeKey) {
|
||||
subitem.active = true;
|
||||
subitem.$parent.active = true;
|
||||
} else {
|
||||
subitem.active = false;
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
item.active = item.key === this.activeKey;
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
this.updateActiveKey();
|
||||
},
|
||||
events: {
|
||||
'on-menu-item-select' (key) {
|
||||
this.activeKey = key;
|
||||
this.updateActiveKey();
|
||||
this.$emit('on-select', key);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,13 +1,84 @@
|
|||
<template>
|
||||
|
||||
<li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
|
||||
<div :class="[prefixCls + '-title']" v-el:reference>
|
||||
<span><slot name="title"></slot></span>
|
||||
<Icon type="ios-arrow-down"></Icon>
|
||||
</div>
|
||||
<ul :class="[prefixCls]" v-if="mode === 'vertical'"></ul>
|
||||
<Drop v-else v-show="opened" placement="bottom" transition="slide-up" v-ref:drop><slot></slot></Drop>
|
||||
</li>
|
||||
</template>
|
||||
<script>
|
||||
import Drop from '../select/dropdown.vue';
|
||||
import Icon from '../icon/icon.vue';
|
||||
const prefixCls = 'ivu-menu';
|
||||
|
||||
export default {
|
||||
props: {},
|
||||
data () {
|
||||
return {}
|
||||
name: 'Submenu',
|
||||
components: { Icon, Drop },
|
||||
props: {
|
||||
key: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
active: false,
|
||||
opened: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}-submenu`,
|
||||
{
|
||||
[`${prefixCls}-item-active`]: this.active,
|
||||
[`${prefixCls}-opened`]: this.opened
|
||||
}
|
||||
]
|
||||
},
|
||||
mode () {
|
||||
return this.$parent.mode;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMouseenter () {
|
||||
if (this.mode === 'vertical') return;
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
this.opened = true;
|
||||
}, 250);
|
||||
},
|
||||
handleMouseleave () {
|
||||
if (this.mode === 'vertical') return;
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
this.opened = false;
|
||||
}, 150);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
mode (val) {
|
||||
if (val === 'horizontal') {
|
||||
this.$refs.drop.update();
|
||||
}
|
||||
},
|
||||
opened (val) {
|
||||
if (this.mode === 'vertical') return;
|
||||
if (val) {
|
||||
this.$refs.drop.update();
|
||||
} else {
|
||||
this.$refs.drop.destroy();
|
||||
}
|
||||
}
|
||||
},
|
||||
events: {
|
||||
'on-menu-item-select' () {
|
||||
this.opened = false;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
@menu-prefix-cls: ~"@{css-prefix}menu";
|
||||
@menu-dropdown-item-prefix-cls: ~"@{menu-prefix-cls}-horizontal .@{menu-prefix-cls}-submenu .@{select-dropdown-prefix-cls} .@{menu-prefix-cls}-item";
|
||||
|
||||
.@{menu-prefix-cls} {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
list-style: none;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
position: relative;
|
||||
|
||||
&-horizontal{
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
|
||||
&.@{menu-prefix-cls}-light{
|
||||
&:after{
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: @border-color-base;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-vertical{
|
||||
width: 240px;
|
||||
&.@{menu-prefix-cls}-light{
|
||||
&:after{
|
||||
content: '';
|
||||
display: block;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: @border-color-base;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-light{
|
||||
background: #fff;
|
||||
}
|
||||
&-dark{
|
||||
background: @title-color;
|
||||
}
|
||||
&-primary{
|
||||
background: @primary-color;
|
||||
}
|
||||
|
||||
&-item{
|
||||
display: block;
|
||||
outline: none;
|
||||
list-style: none;
|
||||
font-size: @font-size-base;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
transition: all @transition-time @ease-in-out;
|
||||
|
||||
.@{menu-prefix-cls}-light &{
|
||||
color: @text-color;
|
||||
}
|
||||
.@{menu-prefix-cls}-dark &{
|
||||
color: @subsidiary-color;
|
||||
&-active, &:hover{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.@{menu-prefix-cls}-primary &{
|
||||
color: #fff;
|
||||
&-active, &:hover{
|
||||
background: @link-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-horizontal &-item,
|
||||
&-horizontal &-submenu
|
||||
{
|
||||
float: left;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
transition: all @transition-time @ease-in-out;
|
||||
}
|
||||
|
||||
&-light&-horizontal &-item, &-light&-horizontal &-submenu{
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
border-bottom: 2px solid transparent;
|
||||
&-active, &:hover{
|
||||
color: @primary-color;
|
||||
border-bottom: 2px solid @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-dark&-horizontal &-item{
|
||||
&-active, &:hover{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&-primary&-horizontal &-item{
|
||||
&-active, &:hover{
|
||||
background: @link-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal &-submenu .@{select-dropdown-prefix-cls} {
|
||||
width: 100%;
|
||||
.@{menu-prefix-cls}-item{
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
border-bottom: 0;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-item-group{
|
||||
line-height: normal;
|
||||
&-title {
|
||||
padding-left: 8px;
|
||||
font-size: 12px;
|
||||
color: @legend-color;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls);
|
||||
|
|
@ -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
Reference in a new issue