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

update menu, tag, button, progress

pull/2/head
baiyaaaaa 2016-07-29 16:41:14 +08:00
parent 8de3a3158c
commit 153220215f
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}}
Vue.use(Loading);
// Vue.use(Loading);
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
// Vue.prototype.$msgbox = MessageBox;
// Vue.prototype.$alert = MessageBox.alert;
// Vue.prototype.$confirm = MessageBox.confirm;
// Vue.prototype.$prompt = MessageBox.prompt;
// Vue.prototype.$notify = Notification;
};
// auto install

140
examples/docs/menu.md
View File

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

3
examples/docs/tag.md
View File

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

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

@ -9,32 +9,32 @@
mixins: [emitter],
props: {
key: {
index: {
type: String,
required: true
},
disabled: {
type: Boolean,
required: false
}
},
data() {
return {
active: false
};
},
computed: {
keyPath() {
return this.$parent.keyPath ? this.$parent.keyPath.concat(this.key) : [this.key];
indexPath() {
return this.$parent.indexPath ? this.$parent.indexPath.concat(this.index) : [this.index];
},
activeIndex() {
return this.$parent.activeIndex;
},
active() {
return this.index === this.activeIndex;
}
},
methods: {
handleClick() {
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>
@ -47,6 +47,8 @@
'is-disabled': disabled
}">
<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>
</template>

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

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

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

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

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

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

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

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

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

@ -11,16 +11,6 @@
margin: 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 {
height: auto;
@ -37,7 +27,7 @@
&:hover {
background-color: #d3dce6;
}
&.is-active .el-menu-item__bar {
& .el-menu-item__bar {
display: none;
}
}
@ -89,18 +79,18 @@
margin: 0 10px;
cursor: pointer;
position: relative;
transition: var(--md-fade-transition);
transform-origin: center center;
@when active {
.el-menu-item__bar {
content: '';
width: 100%;
height: 5px;
background-color: var(--color-primary);
bottom: 0;
left: 0;
position: absolute;
display: block;
}
@e bar {
content: '';
width: 100%;
height: 5px;
background-color: var(--color-primary);
bottom: 0;
left: 0;
position: absolute;
display: block;
}
& [class^="el-icon-"] {
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';
const install = function(Vue) {
if (install.installed) return;
Vue.component(Group.name, Group);
Vue.component(SelectDropdown.name, SelectDropdown);
Vue.component(Pagination.name, Pagination);
@ -100,13 +102,13 @@ const install = function(Vue) {
Vue.component(Progress.name, Progress);
Vue.component(Spinner.name, Spinner);
Vue.use(Loading);
// Vue.use(Loading);
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
// Vue.prototype.$msgbox = MessageBox;
// Vue.prototype.$alert = MessageBox.alert;
// Vue.prototype.$confirm = MessageBox.confirm;
// Vue.prototype.$prompt = MessageBox.prompt;
// Vue.prototype.$notify = Notification;
};
// auto install