Menu support transition fixed #514
This commit is contained in:
Aresn
parent
75c32564f0
commit
841cb1fe67
6 changed files with 195 additions and 186 deletions
|
|
@ -2,12 +2,7 @@
|
||||||
<div style="width: 300px;">
|
<div style="width: 300px;">
|
||||||
<i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
<i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
||||||
<Form-item label="爱好" prop="interest">
|
<Form-item label="爱好" prop="interest">
|
||||||
<Checkbox-group v-model="formValidate.interest">
|
<Input v-model="formValidate.interest" number></Input>
|
||||||
<Checkbox label="吃饭"></Checkbox>
|
|
||||||
<Checkbox label="睡觉"></Checkbox>
|
|
||||||
<Checkbox label="跑步"></Checkbox>
|
|
||||||
<Checkbox label="看电影"></Checkbox>
|
|
||||||
</Checkbox-group>
|
|
||||||
</Form-item>
|
</Form-item>
|
||||||
<Form-item>
|
<Form-item>
|
||||||
<i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
|
<i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
|
||||||
|
|
@ -21,12 +16,15 @@
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
formValidate: {
|
formValidate: {
|
||||||
interest: ['吃饭', '跑步']
|
interest: ''
|
||||||
},
|
},
|
||||||
ruleValidate: {
|
ruleValidate: {
|
||||||
interest: [
|
interest: [
|
||||||
{ required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },
|
{
|
||||||
{ type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' }
|
required: true,
|
||||||
|
type: 'number',
|
||||||
|
trigger: 'change'
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,25 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Menu mode="horizontal" :theme="theme1" @on-select="s">
|
<Row>
|
||||||
<Row type="flex" justify="center" align="middle">
|
<i-col span="8">
|
||||||
<i-col span="12">
|
<Menu :theme="theme2">
|
||||||
<Menu-item name="1">
|
<Submenu name="1">
|
||||||
|
<template slot="title">
|
||||||
<Icon type="ios-paper"></Icon>
|
<Icon type="ios-paper"></Icon>
|
||||||
内容管理
|
内容管理
|
||||||
</Menu-item>
|
</template>
|
||||||
<Menu-item name="2">
|
<Menu-item name="1-1">文章管理</Menu-item>
|
||||||
|
<Menu-item name="1-2">评论管理</Menu-item>
|
||||||
|
<Menu-item name="1-3">举报管理</Menu-item>
|
||||||
|
</Submenu>
|
||||||
|
<Submenu name="2">
|
||||||
|
<template slot="title">
|
||||||
<Icon type="ios-people"></Icon>
|
<Icon type="ios-people"></Icon>
|
||||||
用户管理
|
用户管理
|
||||||
</Menu-item>
|
</template>
|
||||||
|
<Menu-item name="2-1">新增用户</Menu-item>
|
||||||
|
<Menu-item name="2-2">活跃用户</Menu-item>
|
||||||
|
</Submenu>
|
||||||
<Submenu name="3">
|
<Submenu name="3">
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
<Icon type="stats-bars"></Icon>
|
<Icon type="stats-bars"></Icon>
|
||||||
|
|
@ -26,19 +35,14 @@
|
||||||
<Menu-item name="3-5">流失用户</Menu-item>
|
<Menu-item name="3-5">流失用户</Menu-item>
|
||||||
</Menu-group>
|
</Menu-group>
|
||||||
</Submenu>
|
</Submenu>
|
||||||
<Menu-item name="4">
|
</Menu>
|
||||||
<Icon type="settings"></Icon>
|
|
||||||
综合设置
|
|
||||||
</Menu-item>
|
|
||||||
</i-col>
|
</i-col>
|
||||||
</Row>
|
</Row>
|
||||||
</Menu>
|
|
||||||
<br>
|
<br>
|
||||||
<p>切换主题</p>
|
<p>切换主题</p>
|
||||||
<Radio-group v-model="theme1">
|
<Radio-group v-model="theme2">
|
||||||
<Radio label="light"></Radio>
|
<Radio label="light"></Radio>
|
||||||
<Radio label="dark"></Radio>
|
<Radio label="dark"></Radio>
|
||||||
<Radio label="primary"></Radio>
|
|
||||||
</Radio-group>
|
</Radio-group>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -46,149 +50,8 @@
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
theme1: 'light'
|
theme2: 'light'
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
s (s) {
|
|
||||||
console.log(s)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<!--<template>-->
|
|
||||||
<!--<div>-->
|
|
||||||
<!--<Row>-->
|
|
||||||
<!--<i-col span="8">-->
|
|
||||||
<!--<Menu :theme="theme2" @on-select="s">-->
|
|
||||||
<!--<Submenu name="1">-->
|
|
||||||
<!--<template slot="title">-->
|
|
||||||
<!--<Icon type="ios-paper"></Icon>-->
|
|
||||||
<!--内容管理-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<Menu-item name="1-1">文章管理</Menu-item>-->
|
|
||||||
<!--<Menu-item name="1-2">评论管理</Menu-item>-->
|
|
||||||
<!--<Menu-item name="1-3">举报管理</Menu-item>-->
|
|
||||||
<!--</Submenu>-->
|
|
||||||
<!--<Submenu name="2">-->
|
|
||||||
<!--<template slot="title">-->
|
|
||||||
<!--<Icon type="ios-people"></Icon>-->
|
|
||||||
<!--用户管理-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<Menu-item name="2-1">新增用户</Menu-item>-->
|
|
||||||
<!--<Menu-item name="2-2">活跃用户</Menu-item>-->
|
|
||||||
<!--</Submenu>-->
|
|
||||||
<!--<Submenu name="3">-->
|
|
||||||
<!--<template slot="title">-->
|
|
||||||
<!--<Icon type="stats-bars"></Icon>-->
|
|
||||||
<!--统计分析-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<Menu-group title="使用">-->
|
|
||||||
<!--<Menu-item name="3-1">新增和启动</Menu-item>-->
|
|
||||||
<!--<Menu-item name="3-2">活跃分析</Menu-item>-->
|
|
||||||
<!--<Menu-item name="3-3">时段分析</Menu-item>-->
|
|
||||||
<!--</Menu-group>-->
|
|
||||||
<!--<Menu-group title="留存">-->
|
|
||||||
<!--<Menu-item name="3-4">用户留存</Menu-item>-->
|
|
||||||
<!--<Menu-item name="3-5">流失用户</Menu-item>-->
|
|
||||||
<!--</Menu-group>-->
|
|
||||||
<!--</Submenu>-->
|
|
||||||
<!--</Menu>-->
|
|
||||||
<!--</i-col>-->
|
|
||||||
<!--<i-col span="8">-->
|
|
||||||
<!--<Menu :theme="theme2" active-name="1-2" :open-names="['1']" @on-select="s">-->
|
|
||||||
<!--<Submenu name="1">-->
|
|
||||||
<!--<template slot="title">-->
|
|
||||||
<!--<Icon type="ios-paper"></Icon>-->
|
|
||||||
<!--内容管理-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<Menu-item name="1-1">文章管理</Menu-item>-->
|
|
||||||
<!--<Menu-item name="1-2">评论管理</Menu-item>-->
|
|
||||||
<!--<Menu-item name="1-3">举报管理</Menu-item>-->
|
|
||||||
<!--</Submenu>-->
|
|
||||||
<!--<Submenu name="2">-->
|
|
||||||
<!--<template slot="title">-->
|
|
||||||
<!--<Icon type="ios-people"></Icon>-->
|
|
||||||
<!--用户管理-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<Menu-item name="2-1">新增用户</Menu-item>-->
|
|
||||||
<!--<Menu-item name="2-2">活跃用户</Menu-item>-->
|
|
||||||
<!--</Submenu>-->
|
|
||||||
<!--<Submenu name="3">-->
|
|
||||||
<!--<template slot="title">-->
|
|
||||||
<!--<Icon type="stats-bars"></Icon>-->
|
|
||||||
<!--统计分析-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<Menu-group title="使用">-->
|
|
||||||
<!--<Menu-item name="3-1">新增和启动</Menu-item>-->
|
|
||||||
<!--<Menu-item name="3-2">活跃分析</Menu-item>-->
|
|
||||||
<!--<Menu-item name="3-3">时段分析</Menu-item>-->
|
|
||||||
<!--</Menu-group>-->
|
|
||||||
<!--<Menu-group title="留存">-->
|
|
||||||
<!--<Menu-item name="3-4">用户留存</Menu-item>-->
|
|
||||||
<!--<Menu-item name="3-5">流失用户</Menu-item>-->
|
|
||||||
<!--</Menu-group>-->
|
|
||||||
<!--</Submenu>-->
|
|
||||||
<!--</Menu>-->
|
|
||||||
<!--</i-col>-->
|
|
||||||
<!--<i-col span="8">-->
|
|
||||||
<!--<Menu :theme="theme2" :open-names="['1']" accordion @on-select="s">-->
|
|
||||||
<!--<Submenu name="1">-->
|
|
||||||
<!--<template slot="title">-->
|
|
||||||
<!--<Icon type="ios-paper"></Icon>-->
|
|
||||||
<!--内容管理-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<Menu-item name="1-1">文章管理</Menu-item>-->
|
|
||||||
<!--<Menu-item name="1-2">评论管理</Menu-item>-->
|
|
||||||
<!--<Menu-item name="1-3">举报管理</Menu-item>-->
|
|
||||||
<!--</Submenu>-->
|
|
||||||
<!--<Submenu name="2">-->
|
|
||||||
<!--<template slot="title">-->
|
|
||||||
<!--<Icon type="ios-people"></Icon>-->
|
|
||||||
<!--用户管理-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<Menu-item name="2-1">新增用户</Menu-item>-->
|
|
||||||
<!--<Menu-item name="2-2">活跃用户</Menu-item>-->
|
|
||||||
<!--</Submenu>-->
|
|
||||||
<!--<Submenu name="3">-->
|
|
||||||
<!--<template slot="title">-->
|
|
||||||
<!--<Icon type="stats-bars"></Icon>-->
|
|
||||||
<!--统计分析-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<Menu-group title="使用">-->
|
|
||||||
<!--<Menu-item name="3-1">新增和启动</Menu-item>-->
|
|
||||||
<!--<Menu-item name="3-2">活跃分析</Menu-item>-->
|
|
||||||
<!--<Menu-item name="3-3">时段分析</Menu-item>-->
|
|
||||||
<!--</Menu-group>-->
|
|
||||||
<!--<Menu-group title="留存">-->
|
|
||||||
<!--<Menu-item name="3-4">用户留存</Menu-item>-->
|
|
||||||
<!--<Menu-item name="3-5">流失用户</Menu-item>-->
|
|
||||||
<!--</Menu-group>-->
|
|
||||||
<!--</Submenu>-->
|
|
||||||
<!--</Menu>-->
|
|
||||||
<!--</i-col>-->
|
|
||||||
<!--</Row>-->
|
|
||||||
<!--<br>-->
|
|
||||||
<!--<p>切换主题</p>-->
|
|
||||||
<!--<Radio-group v-model="theme2">-->
|
|
||||||
<!--<Radio label="light"></Radio>-->
|
|
||||||
<!--<Radio label="dark"></Radio>-->
|
|
||||||
<!--</Radio-group>-->
|
|
||||||
<!--</div>-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<script>-->
|
|
||||||
<!--export default {-->
|
|
||||||
<!--data () {-->
|
|
||||||
<!--return {-->
|
|
||||||
<!--theme2: 'light'-->
|
|
||||||
<!--}-->
|
|
||||||
<!--},-->
|
|
||||||
<!--methods: {-->
|
|
||||||
<!--s (s) {-->
|
|
||||||
<!--console.log(s);-->
|
|
||||||
<!--}-->
|
|
||||||
<!--}-->
|
|
||||||
<!--}-->
|
|
||||||
<!--</script>-->
|
|
||||||
|
|
|
||||||
79
src/components/base/collapse-transition.js
Normal file
79
src/components/base/collapse-transition.js
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
// Thanks to https://github.com/ElemeFE/element/blob/dev/src/transitions/collapse-transition.js
|
||||||
|
|
||||||
|
import { addClass, removeClass } from '../../utils/assist';
|
||||||
|
|
||||||
|
const Transition = {
|
||||||
|
beforeEnter(el) {
|
||||||
|
addClass(el, 'collapse-transition');
|
||||||
|
if (!el.dataset) el.dataset = {};
|
||||||
|
|
||||||
|
el.dataset.oldPaddingTop = el.style.paddingTop;
|
||||||
|
el.dataset.oldPaddingBottom = el.style.paddingBottom;
|
||||||
|
|
||||||
|
el.style.height = '0';
|
||||||
|
el.style.paddingTop = 0;
|
||||||
|
el.style.paddingBottom = 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
enter(el) {
|
||||||
|
el.dataset.oldOverflow = el.style.overflow;
|
||||||
|
if (el.scrollHeight !== 0) {
|
||||||
|
el.style.height = el.scrollHeight + 'px';
|
||||||
|
el.style.paddingTop = el.dataset.oldPaddingTop;
|
||||||
|
el.style.paddingBottom = el.dataset.oldPaddingBottom;
|
||||||
|
} else {
|
||||||
|
el.style.height = '';
|
||||||
|
el.style.paddingTop = el.dataset.oldPaddingTop;
|
||||||
|
el.style.paddingBottom = el.dataset.oldPaddingBottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
el.style.overflow = 'hidden';
|
||||||
|
},
|
||||||
|
|
||||||
|
afterEnter(el) {
|
||||||
|
// for safari: remove class then reset height is necessary
|
||||||
|
removeClass(el, 'collapse-transition');
|
||||||
|
el.style.height = '';
|
||||||
|
el.style.overflow = el.dataset.oldOverflow;
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeLeave(el) {
|
||||||
|
if (!el.dataset) el.dataset = {};
|
||||||
|
el.dataset.oldPaddingTop = el.style.paddingTop;
|
||||||
|
el.dataset.oldPaddingBottom = el.style.paddingBottom;
|
||||||
|
el.dataset.oldOverflow = el.style.overflow;
|
||||||
|
|
||||||
|
el.style.height = el.scrollHeight + 'px';
|
||||||
|
el.style.overflow = 'hidden';
|
||||||
|
},
|
||||||
|
|
||||||
|
leave(el) {
|
||||||
|
if (el.scrollHeight !== 0) {
|
||||||
|
// for safari: add class after set height, or it will jump to zero height suddenly, weired
|
||||||
|
addClass(el, 'collapse-transition');
|
||||||
|
el.style.height = 0;
|
||||||
|
el.style.paddingTop = 0;
|
||||||
|
el.style.paddingBottom = 0;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
afterLeave(el) {
|
||||||
|
removeClass(el, 'collapse-transition');
|
||||||
|
el.style.height = '';
|
||||||
|
el.style.overflow = el.dataset.oldOverflow;
|
||||||
|
el.style.paddingTop = el.dataset.oldPaddingTop;
|
||||||
|
el.style.paddingBottom = el.dataset.oldPaddingBottom;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'CollapseTransition',
|
||||||
|
functional: true,
|
||||||
|
render(h, { children }) {
|
||||||
|
const data = {
|
||||||
|
on: Transition
|
||||||
|
};
|
||||||
|
|
||||||
|
return h('transition', data, children);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -4,7 +4,9 @@
|
||||||
<slot name="title"></slot>
|
<slot name="title"></slot>
|
||||||
<Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
|
<Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
|
||||||
</div>
|
</div>
|
||||||
<ul :class="[prefixCls]" v-if="mode === 'vertical'" v-show="opened"><slot></slot></ul>
|
<collapse-transition v-if="mode === 'vertical'">
|
||||||
|
<ul :class="[prefixCls]" v-show="opened"><slot></slot></ul>
|
||||||
|
</collapse-transition>
|
||||||
<transition name="slide-up" v-else>
|
<transition name="slide-up" v-else>
|
||||||
<Drop
|
<Drop
|
||||||
v-show="opened"
|
v-show="opened"
|
||||||
|
|
@ -17,6 +19,7 @@
|
||||||
<script>
|
<script>
|
||||||
import Drop from '../select/dropdown.vue';
|
import Drop from '../select/dropdown.vue';
|
||||||
import Icon from '../icon/icon.vue';
|
import Icon from '../icon/icon.vue';
|
||||||
|
import CollapseTransition from '../base/collapse-transition';
|
||||||
import { getStyle, findComponentUpward } from '../../utils/assist';
|
import { getStyle, findComponentUpward } from '../../utils/assist';
|
||||||
import Emitter from '../../mixins/emitter';
|
import Emitter from '../../mixins/emitter';
|
||||||
|
|
||||||
|
|
@ -25,7 +28,7 @@
|
||||||
export default {
|
export default {
|
||||||
name: 'Submenu',
|
name: 'Submenu',
|
||||||
mixins: [ Emitter ],
|
mixins: [ Emitter ],
|
||||||
components: { Icon, Drop },
|
components: { Icon, Drop, CollapseTransition },
|
||||||
props: {
|
props: {
|
||||||
name: {
|
name: {
|
||||||
type: [String, Number],
|
type: [String, Number],
|
||||||
|
|
|
||||||
|
|
@ -26,3 +26,7 @@
|
||||||
@import "move";
|
@import "move";
|
||||||
@import "ease";
|
@import "ease";
|
||||||
@import "slide";
|
@import "slide";
|
||||||
|
|
||||||
|
.collapse-transition {
|
||||||
|
transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out, @transition-time padding-bottom ease-in-out;
|
||||||
|
}
|
||||||
|
|
@ -233,3 +233,65 @@ function findComponentsDownward (context, componentName, components = []) {
|
||||||
return components;
|
return components;
|
||||||
}
|
}
|
||||||
export {findComponentsDownward};
|
export {findComponentsDownward};
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
|
const trim = function(string) {
|
||||||
|
return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
|
||||||
|
};
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
|
export function hasClass(el, cls) {
|
||||||
|
if (!el || !cls) return false;
|
||||||
|
if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
|
||||||
|
if (el.classList) {
|
||||||
|
return el.classList.contains(cls);
|
||||||
|
} else {
|
||||||
|
return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
|
export function addClass(el, cls) {
|
||||||
|
if (!el) return;
|
||||||
|
let curClass = el.className;
|
||||||
|
const classes = (cls || '').split(' ');
|
||||||
|
|
||||||
|
for (let i = 0, j = classes.length; i < j; i++) {
|
||||||
|
const clsName = classes[i];
|
||||||
|
if (!clsName) continue;
|
||||||
|
|
||||||
|
if (el.classList) {
|
||||||
|
el.classList.add(clsName);
|
||||||
|
} else {
|
||||||
|
if (!hasClass(el, clsName)) {
|
||||||
|
curClass += ' ' + clsName;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!el.classList) {
|
||||||
|
el.className = curClass;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
|
export function removeClass(el, cls) {
|
||||||
|
if (!el || !cls) return;
|
||||||
|
const classes = cls.split(' ');
|
||||||
|
let curClass = ' ' + el.className + ' ';
|
||||||
|
|
||||||
|
for (let i = 0, j = classes.length; i < j; i++) {
|
||||||
|
const clsName = classes[i];
|
||||||
|
if (!clsName) continue;
|
||||||
|
|
||||||
|
if (el.classList) {
|
||||||
|
el.classList.remove(clsName);
|
||||||
|
} else {
|
||||||
|
if (hasClass(el, clsName)) {
|
||||||
|
curClass = curClass.replace(' ' + clsName + ' ', ' ');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!el.classList) {
|
||||||
|
el.className = trim(curClass);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue