github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #34 from baiyaaaaa/next 

update menu, tag, button, progress
pull/2/head
cinwell.li 2016-07-29 17:48:54 +08:00 committed by GitHub
parent 8de3a3158c 153220215f
commit fc92846ed2
10 changed files with 181 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
bin/build-entry.js
View File

@ -14,13 +14,13 @@ const install = function(Vue) {
{{install}} {{install}}
Vue.use(Loading); // Vue.use(Loading);
Vue.prototype.$msgbox = MessageBox; // Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert; // Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm; // Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt; // Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification; // Vue.prototype.$notify = Notification;
}; };
// auto install // auto install

140
examples/docs/menu.md
View File

@ -113,10 +113,10 @@
<div class="demo-box"> <div class="demo-box">
<div class="nav"> <div class="nav">
<h1>Element</h1> <h1>Element</h1>
<el-menu active-key="2"> <el-menu default-active="2">
<el-menu-item key="1">处理中心</el-menu-item> <el-menu-item index="1">处理中心</el-menu-item>
<el-menu-item key="2">我的工作台</el-menu-item> <el-menu-item index="2">我的工作台</el-menu-item>
<el-menu-item key="3">订单管理</el-menu-item> <el-menu-item index="3">订单管理</el-menu-item>
</el-menu> </el-menu>
<div class="nav-right"> <div class="nav-right">
<el-input placeholder="搜索用户手机号" icon="search" :value="search"></el-input> <el-input placeholder="搜索用户手机号" icon="search" :value="search"></el-input>
@ -133,10 +133,10 @@
```html ```html
<div class="nav"> <div class="nav">
<h1>Element</h1> <h1>Element</h1>
<el-menu active-key="1"> <el-menu default-active="1">
<el-menu-item key="1">处理中心</el-menu-item> <el-menu-item index="1">处理中心</el-menu-item>
<el-menu-item key="2">我的工作台</el-menu-item> <el-menu-item index="2">我的工作台</el-menu-item>
<el-menu-item key="3">订单管理</el-menu-item> <el-menu-item index="3">订单管理</el-menu-item>
</el-menu> </el-menu>
<div class="nav-right"> <div class="nav-right">
<el-input placeholder="搜索用户手机号" icon="search" :value="search"></el-input> <el-input placeholder="搜索用户手机号" icon="search" :value="search"></el-input>
@ -153,10 +153,10 @@
<div class="demo-box"> <div class="demo-box">
<div class="nav nav-dark"> <div class="nav nav-dark">
<h1>Element</h1> <h1>Element</h1>
<el-menu theme="dark" active-key="1"> <el-menu theme="dark" default-active="1">
<el-menu-item key="1">处理中心</el-menu-item> <el-menu-item index="1">处理中心</el-menu-item>
<el-menu-item key="2">我的工作台</el-menu-item> <el-menu-item index="2">我的工作台</el-menu-item>
<el-menu-item key="3">订单管理</el-menu-item> <el-menu-item index="3">订单管理</el-menu-item>
</el-menu> </el-menu>
<div class="nav-right"> <div class="nav-right">
<el-input placeholder="搜索用户手机号" icon="search" :value="search2"></el-input> <el-input placeholder="搜索用户手机号" icon="search" :value="search2"></el-input>
@ -173,10 +173,10 @@
```html ```html
<div class="nav nav-dark"> <div class="nav nav-dark">
<h1>Element</h1> <h1>Element</h1>
<el-menu theme="dark" active-key="1"> <el-menu theme="dark" default-active="1">
<el-menu-item key="1">处理中心</el-menu-item> <el-menu-item index="1">处理中心</el-menu-item>
<el-menu-item key="2">我的工作台</el-menu-item> <el-menu-item index="2">我的工作台</el-menu-item>
<el-menu-item key="3">订单管理</el-menu-item> <el-menu-item index="3">订单管理</el-menu-item>
</el-menu> </el-menu>
<div class="nav-right"> <div class="nav-right">
<el-input placeholder="搜索用户手机号" icon="search" :value="search2"></el-input> <el-input placeholder="搜索用户手机号" icon="search" :value="search2"></el-input>
@ -195,19 +195,19 @@
<div class="demo-box" style="width: 200px;"> <div class="demo-box" style="width: 200px;">
<div class="nav nav-vertical"> <div class="nav nav-vertical">
<h1>Element</h1> <h1>Element</h1>
<el-menu mode="vertical" active-key="2-1"> <el-menu mode="vertical" default-active="2-1">
<el-menu-item key="1"><i class="el-icon-message"></i>导航一</el-menu-item> <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<el-submenu key="sub1"> <el-submenu index="sub1">
<template slot="title"><i class="el-icon-menu"></i>导航二</template> <template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item key="2-1">选项1</el-menu-item> <el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item key="2-2">选项2</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item key="2-3">选项3</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu> </el-submenu>
<el-submenu key="sub2"> <el-submenu index="sub2">
<template slot="title"><i class="el-icon-setting"></i>导航三</template> <template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item key="3-1">选项1</el-menu-item> <el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item key="3-2">选项2</el-menu-item> <el-menu-item index="3-2">选项2</el-menu-item>
<el-menu-item key="3-3">选项3</el-menu-item> <el-menu-item index="3-3">选项3</el-menu-item>
</el-submenu> </el-submenu>
</el-menu> </el-menu>
</div> </div>
@ -216,19 +216,19 @@
```html ```html
<div class="nav nav-vertical"> <div class="nav nav-vertical">
<h1>Element</h1> <h1>Element</h1>
<el-menu mode="vertical" active-key="2-1"> <el-menu mode="vertical" default-active="2-1">
<el-menu-item key="1"><i class="el-icon-message"></i>导航一</el-menu-item> <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<el-submenu key="sub1"> <el-submenu index="sub1">
<template slot="title"><i class="el-icon-menu"></i>导航二</template> <template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item key="2-1">选项1</el-menu-item> <el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item key="2-2">选项2</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item key="2-3">选项3</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu> </el-submenu>
<el-submenu key="sub2"> <el-submenu index="sub2">
<template slot="title"><i class="el-icon-setting"></i>导航三</template> <template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item key="3-1">选项1</el-menu-item> <el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item key="3-2">选项2</el-menu-item> <el-menu-item index="3-2">选项2</el-menu-item>
<el-menu-item key="3-3">选项3</el-menu-item> <el-menu-item index="3-3">选项3</el-menu-item>
</el-submenu> </el-submenu>
</el-menu> </el-menu>
</div> </div>
@ -237,31 +237,31 @@
<div class="demo-box" style="width: 200px;"> <div class="demo-box" style="width: 200px;">
<div class="nav nav-vertical nav-dark"> <div class="nav nav-vertical nav-dark">
<h1>Element</h1> <h1>Element</h1>
<el-menu mode="vertical" theme="dark" :opened-keys="['sub3']" active-key="3-1" :unique-opend="true" @open="handleopen" @close="handleclose" @select="handleselect"> <el-menu mode="vertical" theme="dark" :default-openeds="['sub3']" default-active="3-1" :unique-opend="true" @open="handleopen" @close="handleclose" @select="handleselect">
<el-menu-item key="1"><i class="el-icon-message"></i>导航一</el-menu-item> <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<el-submenu key="sub2"> <el-submenu index="sub2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template> <template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item key="2-1">选项1</el-menu-item> <el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item key="2-2">选项2</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item key="2-3">选项3</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu> </el-submenu>
<el-submenu key="sub3"> <el-submenu index="sub3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template> <template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item key="3-1">选项1</el-menu-item> <el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item key="3-2">选项2</el-menu-item> <el-menu-item index="3-2">选项2</el-menu-item>
<el-menu-item key="3-3">选项3</el-menu-item> <el-menu-item index="3-3">选项3</el-menu-item>
</el-submenu> </el-submenu>
<el-submenu key="sub4"> <el-submenu index="sub4">
<template slot="title"><i class="el-icon-setting"></i>导航四</template> <template slot="title"><i class="el-icon-setting"></i>导航四</template>
<el-menu-item key="4-1">选项1</el-menu-item> <el-menu-item index="4-1">选项1</el-menu-item>
<el-menu-item key="4-2">选项2</el-menu-item> <el-menu-item index="4-2">选项2</el-menu-item>
<el-menu-item key="4-3">选项3</el-menu-item> <el-menu-item index="4-3">选项3</el-menu-item>
</el-submenu> </el-submenu>
<el-submenu key="sub5"> <el-submenu index="sub5">
<template slot="title"><i class="el-icon-setting"></i>导航五</template> <template slot="title"><i class="el-icon-setting"></i>导航五</template>
<el-menu-item key="5-1">选项1</el-menu-item> <el-menu-item index="5-1">选项1</el-menu-item>
<el-menu-item key="5-2">选项2</el-menu-item> <el-menu-item index="5-2">选项2</el-menu-item>
<el-menu-item key="5-3">选项3</el-menu-item> <el-menu-item index="5-3">选项3</el-menu-item>
</el-submenu> </el-submenu>
</el-menu> </el-menu>
</div> </div>
@ -270,19 +270,31 @@
```html ```html
<div class="nav nav-vertical nav-dark"> <div class="nav nav-vertical nav-dark">
<h1>Element</h1> <h1>Element</h1>
<el-menu mode="vertical" theme="dark" active-key="3-1"> <el-menu mode="vertical" theme="dark" :default-openeds="['sub3']" default-active="3-1" :unique-opend="true" @open="handleopen" @close="handleclose" @select="handleselect">
<el-menu-item key="1"><i class="el-icon-message"></i>导航一</el-menu-item> <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<el-submenu key="sub1"> <el-submenu index="sub2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template> <template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item key="2-1">选项1</el-menu-item> <el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item key="2-2">选项2</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item key="2-3">选项3</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu> </el-submenu>
<el-submenu key="sub2"> <el-submenu index="sub3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template> <template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item key="3-1">选项1</el-menu-item> <el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item key="3-2">选项2</el-menu-item> <el-menu-item index="3-2">选项2</el-menu-item>
<el-menu-item key="3-3">选项3</el-menu-item> <el-menu-item index="3-3">选项3</el-menu-item>
</el-submenu>
<el-submenu index="sub4">
<template slot="title"><i class="el-icon-setting"></i>导航四</template>
<el-menu-item index="4-1">选项1</el-menu-item>
<el-menu-item index="4-2">选项2</el-menu-item>
<el-menu-item index="4-3">选项3</el-menu-item>
</el-submenu>
<el-submenu index="sub5">
<template slot="title"><i class="el-icon-setting"></i>导航五</template>
<el-menu-item index="5-1">选项1</el-menu-item>
<el-menu-item index="5-2">选项2</el-menu-item>
<el-menu-item index="5-3">选项3</el-menu-item>
</el-submenu> </el-submenu>
</el-menu> </el-menu>
</div> </div>

3
examples/docs/tag.md
View File

@ -14,7 +14,7 @@
}, },
methods: { methods: {
handleClose(tag) { handleClose(tag) {
this.tags.$remove(tag); this.tags.splice(this.tags.indexOf(tag), 1);
} }
} }
} }
@ -55,6 +55,7 @@
v-for="tag in tags" v-for="tag in tags"
:closable="true" :closable="true"
:type="tag.type" :type="tag.type"
:key="tag"
@close="handleClose(tag)" @close="handleClose(tag)"
> >
{{tag.name}} {{tag.name}}

32
packages/menu/src/menu-item.vue
View File

@ -9,32 +9,32 @@
mixins: [emitter], mixins: [emitter],
props: { props: {
key: { index: {
type: String, type: String,
required: true required: true
},
disabled: {
type: Boolean,
required: false
} }
}, },
data() {
return {
active: false
};
},
computed: { computed: {
keyPath() { indexPath() {
return this.$parent.keyPath ? this.$parent.keyPath.concat(this.key) : [this.key]; return this.$parent.indexPath ? this.$parent.indexPath.concat(this.index) : [this.index];
},
activeIndex() {
return this.$parent.activeIndex;
},
active() {
return this.index === this.activeIndex;
} }
}, },
methods: { methods: {
handleClick() { handleClick() {
if (!this.active) { if (!this.active) {
this.dispatch('menu', 'select-key', [this.key, this.keyPath]); this.dispatch('menu', 'select-key', [this.index, this.indexPath]);
} }
} }
},
events: {
'select-key': function(key) {
this.active = key === this.key;
}
} }
}; };
</script> </script>
@ -47,6 +47,8 @@
'is-disabled': disabled 'is-disabled': disabled
}"> }">
<slot></slot> <slot></slot>
<span class="el-menu-item__bar" v-if="active" transition="zoom-x"></span> <transition name="fade" mode="out-in">
<span class="el-menu-item__bar" v-if="active"></span>
</transition>
</li> </li>
</template> </template>

38
packages/menu/src/menu.vue
View File

@ -23,10 +23,11 @@
type: String, type: String,
default: '' default: ''
}, },
activeKey: { defaultActive: {
type: String type: String,
default: ''
}, },
openedKeys: { defaultOpeneds: {
type: Array, type: Array,
default() { default() {
return []; return [];
@ -39,35 +40,42 @@
uniqueOpend: Boolean, uniqueOpend: Boolean,
router: Boolean router: Boolean
}, },
ready() { data() {
this.broadcast('menu-item', 'select-key', this.activeKey); return {
this.broadcast('submenu', 'open-menu', this.openedKeys); activeIndex: this.defaultActive,
openedMenus: this.defaultOpeneds
};
}, },
events: { methods: {
'expand-menu': function(key, keyPath) { handleMenuExpand(key, keyPath) {
this.openedKeys.push(key); this.openedMenus.push(key);
if (this.uniqueOpend) { if (this.uniqueOpend) {
this.broadcast('submenu', 'close-menu', keyPath); this.broadcast('submenu', 'close-menu', keyPath);
this.openedKeys = this.openedKeys.filter((key) => { this.openedMenus = this.openedMenus.filter((key) => {
return keyPath.indexOf(key) !== -1; return keyPath.indexOf(key) !== -1;
}); });
} }
this.$emit('open', key, keyPath); this.$emit('open', key, keyPath);
}, },
'collapse-menu': function(key, keyPath) { handleMenuCollapse(key, keyPath) {
this.openedKeys.$remove(key); this.openedMenus.splice(this.openedMenus.indexOf(key), 1);
this.$emit('close', key, keyPath); this.$emit('close', key, keyPath);
}, },
'select-key': function(key, keyPath) { handleSelect(key, keyPath) {
this.activeKey = key; this.activeIndex = key;
this.broadcast('menu-item', 'select-key', key);
this.$emit('select', key, keyPath); this.$emit('select', key, keyPath);
if (this.router) { if (this.router) {
this.$route.router.go(key); this.$route.router.go(key);
} }
} }
},
mounted() {
this.broadcast('submenu', 'open-menu', this.openedMenus);
this.$on('expand-menu', this.handleMenuExpand);
this.$on('collapse-menu', this.handleMenuCollapse);
this.$on('select-key', this.handleSelect);
} }
}; };
</script> </script>

27
packages/menu/src/submenu.vue
View File

@ -9,7 +9,7 @@
mixins: [emitter], mixins: [emitter],
props: { props: {
key: { index: {
type: String, type: String,
required: true required: true
} }
@ -20,32 +20,35 @@
}; };
}, },
computed: { computed: {
keyPath() { indexPath() {
return this.$parent.keyPath ? this.$parent.keyPath.concat(this.key) : [this.key]; return this.$parent.indexPath ? this.$parent.indexPath.concat(this.index) : [this.index];
},
activeIndex() {
return this.$parent.activeIndex;
} }
}, },
methods: { methods: {
handleClick() { handleClick() {
if (!this.opened) { if (!this.opened) {
this.dispatch('menu', 'expand-menu', [this.key, this.keyPath]); this.dispatch('menu', 'expand-menu', [this.index, this.indexPath]);
this.opened = true; this.opened = true;
} else { } else {
this.dispatch('menu', 'collapse-menu', [this.key, this.keyPath]); this.dispatch('menu', 'collapse-menu', [this.index, this.indexPath]);
this.opened = false; this.opened = false;
} }
} }
}, },
events: { mounted() {
'close-menu': function(openedKeys) { this.$on('close-menu', (openedIndexs) => {
if (openedKeys && openedKeys.indexOf(this.key) === -1) { if (openedIndexs && openedIndexs.indexOf(this.index) === -1) {
this.opened = false; this.opened = false;
} }
}, });
'open-menu': function(keysArray) { this.$on('open-menu', (IndexsArray) => {
if (keysArray && keysArray.indexOf(this.key) !== -1) { if (IndexsArray && IndexsArray.indexOf(this.index) !== -1) {
this.opened = true; this.opened = true;
} }
} });
} }
}; };
</script> </script>

20
packages/tag/src/tag.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<span <transition :name="closeTransition ? '' : 'md-fade-center'">
class="el-tag" <span
:class="[type ? 'el-tag--' + type : '', {'is-hit': hit}]" class="el-tag"
:transition="closeTransition ? '' : 'md-fade-center'"> :class="[type ? 'el-tag--' + type : '', {'is-hit': hit}]">
<slot></slot> <slot></slot>
<i <i class="el-tag__close el-icon-close"
class="el-tag__close el-icon-close" v-if="closable"
v-if="closable" @click="handleClose"></i>
@click="handleClose"></i> </span>
</span> </transition>
</template> </template>
<script> <script>
export default { export default {

24
packages/theme-default/src/common/transition.css
View File

@ -18,17 +18,19 @@
opacity: 0; opacity: 0;
} }
.md-fade-center-transition { .md-fade-center-enter-active,
opacity: 1; .md-fade-center-leave-active {
transform: scaleY(1); transition: all .3s cubic-bezier(.55,0,.1,1);
transition: var(--md-fade-transition);
transform-origin: center center;
} }
.md-fade-center-enter, .md-fade-center-enter,
.md-fade-center-leave { .md-fade-center-leave {
opacity: 0; opacity: 0;
transform: scaleY(0); transform: scaleY(0);
} }
.md-fade-center-leave-active {
opacity: 0;
transform: scaleY(0);
}
.md-fade-bottom-transition { .md-fade-bottom-transition {
opacity: 1; opacity: 1;
@ -79,14 +81,12 @@
transform: scaleX(0); transform: scaleX(0);
} }
.zoom-x-transition { .fade-enter-active, .fade-leave-active {
transform: scaleX(1); transition: opacity .3s cubic-bezier(.645,.045,.355,1);
transition: var(--md-fade-transition);
transform-origin: center center;
} }
.zoom-x-enter, .fade-enter,
.zoom-x-leave { .fade-leave {
transform: scaleX(0); opacity: 0;
} }
.slide-in-bottom-enter { .slide-in-bottom-enter {

34
packages/theme-default/src/menu.css
View File

@ -11,16 +11,6 @@
margin: 0; margin: 0;
padding-left: 0; padding-left: 0;
@e active-bar {
position: absolute;
bottom: 0;
left: 0;
height: 5px;
background-color: var(--color-primary);
z-index: 1;
will-change: transform;
transition: transform .3s cubic-bezier(.645,.045,.355,1), width .3s cubic-bezier(.645,.045,.355,1);
}
@m vertical { @m vertical {
height: auto; height: auto;
@ -37,7 +27,7 @@
&:hover { &:hover {
background-color: #d3dce6; background-color: #d3dce6;
} }
&.is-active .el-menu-item__bar { & .el-menu-item__bar {
display: none; display: none;
} }
} }
@ -89,18 +79,18 @@
margin: 0 10px; margin: 0 10px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
transition: var(--md-fade-transition);
transform-origin: center center;
@when active { @e bar {
.el-menu-item__bar { content: '';
content: ''; width: 100%;
width: 100%; height: 5px;
height: 5px; background-color: var(--color-primary);
background-color: var(--color-primary); bottom: 0;
bottom: 0; left: 0;
left: 0; position: absolute;
position: absolute; display: block;
display: block;
}
} }
& [class^="el-icon-"] { & [class^="el-icon-"] {
vertical-align: baseline; vertical-align: baseline;

14
src/index.js
View File

@ -51,6 +51,8 @@ import Progress from '../packages/progress/index.js';
import Spinner from '../packages/spinner/index.js'; import Spinner from '../packages/spinner/index.js';
const install = function(Vue) { const install = function(Vue) {
if (install.installed) return;
Vue.component(Group.name, Group); Vue.component(Group.name, Group);
Vue.component(SelectDropdown.name, SelectDropdown); Vue.component(SelectDropdown.name, SelectDropdown);
Vue.component(Pagination.name, Pagination); Vue.component(Pagination.name, Pagination);
@ -100,13 +102,13 @@ const install = function(Vue) {
Vue.component(Progress.name, Progress); Vue.component(Progress.name, Progress);
Vue.component(Spinner.name, Spinner); Vue.component(Spinner.name, Spinner);
Vue.use(Loading); // Vue.use(Loading);
Vue.prototype.$msgbox = MessageBox; // Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert; // Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm; // Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt; // Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification; // Vue.prototype.$notify = Notification;
}; };
// auto install // auto install