mirror of https://github.com/ElemeFE/element
commit
fc92846ed2
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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}}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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
14
src/index.js
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue