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

Merge branch 'next' of github.com:eleme/element-ui into next

pull/2/head
qingwei.li 2016-08-11 15:13:38 +08:00
parent 0d5bcfdd92 c6cf12ff12
commit 5c90dbd297
11 changed files with 111 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
examples/docs/message-box.md
View File

@ -65,11 +65,11 @@
</script> </script>
## 基本用法 ## 基本用法
<el-button @click="open">打开 Alert</el-button> <el-button @click.native="open">打开 Alert</el-button>
```html ```html
<template> <template>
<el-button @click="open">打开 Message Box</el-button> <el-button @click.native="open">打开 Message Box</el-button>
</template> </template>
<script> <script>
@ -85,11 +85,11 @@
## 返回 Promise ## 返回 Promise
<el-button @click="open2">打开 alert</el-button> <el-button @click.native="open2">打开 alert</el-button>
```html ```html
<template> <template>
<el-button @click="open4">打开 alert</el-button> <el-button @click.native="open2">打开 alert</el-button>
</template> </template>
<script> <script>
@ -105,11 +105,11 @@
</script> </script>
``` ```
<el-button @click="open3">打开 confirm</el-button> <el-button @click.native="open3">打开 confirm</el-button>
```html ```html
<template> <template>
<el-button @click="open5">打开 confirm</el-button> <el-button @click.native="open3">打开 confirm</el-button>
</template> </template>
<script> <script>
@ -132,11 +132,11 @@
} }
</script> </script>
``` ```
<el-button @click="open4">打开 prompt</el-button> <el-button @click.native="open4">打开 prompt</el-button>
```html ```html
<template> <template>
<el-button @click="open6">打开 prompt</el-button> <el-button @click.native="open4">打开 prompt</el-button>
</template> </template>
<script> <script>
@ -157,11 +157,11 @@
</script> </script>
``` ```
<el-button @click="open5">打开 Message Box</el-button> <el-button @click.native="open5">打开 Message Box</el-button>
```html ```html
<template> <template>
<el-button @click="open3">打开 Message Box</el-button> <el-button @click.native="open5">打开 Message Box</el-button>
</template> </template>
<script> <script>
@ -183,11 +183,11 @@
## 更多配置项 ## 更多配置项
<el-button @click="open6">打开 Message Box</el-button> <el-button @click.native="open6">打开 Message Box</el-button>
```html ```html
<template> <template>
<el-button @click="open2">打开 Message Box</el-button> <el-button @click.native="open6">打开 Message Box</el-button>
</template> </template>
<script> <script>

28
examples/docs/notification.md
View File

@ -74,12 +74,12 @@
## 基本用法 ## 基本用法
<div class="demo-box demo-notification"> <div class="demo-box demo-notification">
<el-button :plain="true" v-on:click="open">点击展示 Notification</el-button> <el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
</div> </div>
```html ```html
<template> <template>
<el-button :plain="true" v-on:click="open">点击展示 Notification</el-button> <el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
</template> </template>
<script> <script>
@ -99,18 +99,18 @@
## 带有 icon ## 带有 icon
<div class="demo-box demo-notification"> <div class="demo-box demo-notification">
<el-button :plain="true" v-on:click="open2">成功</el-button> <el-button :plain="true" v-on:click.native="open2">成功</el-button>
<el-button :plain="true" v-on:click="open3">警告</el-button> <el-button :plain="true" v-on:click.native="open3">警告</el-button>
<el-button :plain="true" v-on:click="open4">消息</el-button> <el-button :plain="true" v-on:click.native="open4">消息</el-button>
<el-button :plain="true" v-on:click="open5">错误</el-button> <el-button :plain="true" v-on:click.native="open5">错误</el-button>
</div> </div>
```html ```html
<template> <template>
<el-button :plain="true" v-on:click="open2">成功</el-button> <el-button :plain="true" v-on:click.native="open2">成功</el-button>
<el-button :plain="true" v-on:click="open3">警告</el-button> <el-button :plain="true" v-on:click.native="open3">警告</el-button>
<el-button :plain="true" v-on:click="open4">消息</el-button> <el-button :plain="true" v-on:click.native="open4">消息</el-button>
<el-button :plain="true" v-on:click="open5">错误</el-button> <el-button :plain="true" v-on:click.native="open5">错误</el-button>
</template> </template>
<script> <script>
@ -154,12 +154,12 @@
## 不会自动关闭 ## 不会自动关闭
<div class="demo-box demo-notification"> <div class="demo-box demo-notification">
<el-button :plain="true" v-on:click="open6">不会自动关闭的 Notification</el-button> <el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
</div> </div>
```html ```html
<template> <template>
<el-button :plain="true" v-on:click="open6">不会自动关闭的 Notification</el-button> <el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
</template> </template>
<script> <script>
@ -179,12 +179,12 @@
## 回调函数 ## 回调函数
<div class="demo-box demo-notification"> <div class="demo-box demo-notification">
<el-button :plain="true" v-on:click="open7">带有回调函数的 Notification</el-button> <el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
</div> </div>
```html ```html
<template> <template>
<el-button :plain="true" v-on:click="open7">带有回调函数的 Notification</el-button> <el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
</template> </template>
<script> <script>

12
packages/alert/src/main.vue
View File

@ -1,12 +1,14 @@
<template> <template>
<div class="el-alert el-alert--{{ type }}" transition="el-alert-fade" v-show="visible"> <transition name="el-alert-fade">
<i class="el-alert__icon {{ iconClass }} {{ isBigIcon }}" v-if="showIcon"></i> <div class="el-alert" :class="[ typeClass ]" v-show="visible">
<i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
<div class="el-alert__content"> <div class="el-alert__content">
<span class="el-alert__title {{ isBoldTitle }}" v-if="title">{{ title }}</span> <span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title">{{ title }}</span>
<p class="el-alert__description" v-if="description">{{ description }}</p> <p class="el-alert__description" v-if="description">{{ description }}</p>
<i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i> <i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
</div> </div>
</div> </div>
</transition>
</template> </template>
<script type="text/babel"> <script type="text/babel">
@ -60,6 +62,10 @@
}, },
computed: { computed: {
typeClass() {
return `el-alert--${ this.type }`;
},
iconClass() { iconClass() {
return TYPE_CLASSES_MAP[this.type] || 'el-icon-information'; return TYPE_CLASSES_MAP[this.type] || 'el-icon-information';
}, },

2
packages/message-box/package.json
View File

@ -12,6 +12,6 @@
"author": "elemefe", "author": "elemefe",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"vue-popup": "^0.1.8" "vue-popup": "^0.2.1"
} }
} }

13
packages/message-box/src/main.js
View File

@ -88,7 +88,7 @@ var showNextMsg = function() {
initInstance(); initInstance();
} }
if (!instance.visible || instance.closeTimer) { if (!instance.value || instance.closeTimer) {
if (msgQueue.length > 0) { if (msgQueue.length > 0) {
currentMsg = msgQueue.shift(); currentMsg = msgQueue.shift();
@ -98,10 +98,15 @@ var showNextMsg = function() {
instance[prop] = options[prop]; instance[prop] = options[prop];
} }
} }
instance.$appendTo(document.body); ['modal', 'showClose', 'closeOnClickModal', 'closeOnPressEscape'].forEach(prop => {
if (instance[prop] === undefined) {
instance[prop] = true;
}
});
document.body.appendChild(instance.$el);
Vue.nextTick(() => { Vue.nextTick(() => {
instance.visible = true; instance.value = true;
}); });
} }
} }
@ -188,7 +193,7 @@ MessageBox.prompt = function(message, title, options) {
}; };
MessageBox.close = function() { MessageBox.close = function() {
instance.visible = false; instance.value = false;
msgQueue = []; msgQueue = [];
currentMsg = null; currentMsg = null;
}; };

37
packages/message-box/src/main.vue
View File

@ -1,23 +1,25 @@
<template> <template>
<div class="el-message-box__wrapper"> <div class="el-message-box__wrapper">
<div class="el-message-box" v-if="rendered" v-show="visible" transition="msgbox-bounce"> <transition name="msgbox-bounce">
<div class="el-message-box" v-show="value">
<div class="el-message-box__header" v-if="title !== ''"> <div class="el-message-box__header" v-if="title !== ''">
<div class="el-message-box__title">{{ title }}</div> <div class="el-message-box__title">{{ title }}</div>
<i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i> <i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i>
</div> </div>
<div class="el-message-box__content" v-if="message !== ''"> <div class="el-message-box__content" v-if="message !== ''">
<div class="el-message-box__status {{ typeClass }}"></div> <div class="el-message-box__status" :class="[ typeClass ]"></div>
<div class="el-message-box__message" :style="{ 'margin-left': type ? '50px' : '0' }"><p>{{ message }}</p></div> <div class="el-message-box__message" :style="{ 'margin-left': type ? '50px' : '0' }"><p>{{ message }}</p></div>
<div class="el-message-box__input" v-show="showInput"> <div class="el-message-box__input" v-show="showInput">
<input type="text" v-model="inputValue" :placeholder="inputPlaceholder" v-el:input /> <input type="text" v-model="inputValue" :placeholder="inputPlaceholder" ref="input" />
<div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{editorErrorMessage}}</div> <div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{editorErrorMessage}}</div>
</div> </div>
</div> </div>
<div class="el-message-box__btns"> <div class="el-message-box__btns">
<el-button class="{{ cancelButtonClasses }}" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</el-button> <el-button :class="[ cancelButtonClasses ]" v-show="showCancelButton" @click.native="handleAction('cancel')">{{ cancelButtonText }}</el-button>
<el-button class="{{ confirmButtonClasses }}" v-show="showConfirmButton" @click="handleAction('confirm')" type="primary">{{ confirmButtonText }}</el-button> <el-button :class="[ confirmButtonClasses ]" v-show="showConfirmButton" @click.native="handleAction('confirm')" type="primary">{{ confirmButtonText }}</el-button>
</div> </div>
</div> </div>
</transition>
</div> </div>
</template> </template>
@ -34,8 +36,6 @@
import Popup from 'vue-popup'; import Popup from 'vue-popup';
export default { export default {
name: 'el-message-box',
mixins: [ Popup ], mixins: [ Popup ],
props: { props: {
@ -68,12 +68,27 @@
}, },
methods: { methods: {
doClose() {
this.value = false;
this._closing = true;
this.onClose && this.onClose();
if (this.modal) {
document.body.style.overflow = this.bodyOverflow;
}
if (!this.transition) {
this.doAfterClose();
}
},
handleAction(action) { handleAction(action) {
if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) { if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) {
return; return;
} }
var callback = this.callback; var callback = this.callback;
this.visible = false; this.value = false;
callback(action); callback(action);
}, },
@ -109,11 +124,11 @@
} }
}, },
visible(val) { value(val) {
if (val && this.$type === 'prompt') { if (val && this.$type === 'prompt') {
setTimeout(() => { setTimeout(() => {
if (this.$els.input) { if (this.$refs.input) {
this.$els.input.focus(); this.$refs.input.focus();
} }
}, 500); }, 500);
} }

5
packages/notification/src/main.js
View File

@ -19,7 +19,8 @@ var Notification = function(options) {
}); });
instance.id = id; instance.id = id;
instance.vm = instance.$mount(); instance.vm = instance.$mount();
instance.vm.$appendTo('body'); document.body.appendChild(instance.vm.$el);
instance.vm.visible = true;
instance.dom = instance.vm.$el; instance.dom = instance.vm.$el;
var topDist = 0; var topDist = 0;
@ -46,7 +47,7 @@ Notification.close = function(id, userOnClose) {
if (len > 1) { if (len > 1) {
for (i = index; i < len - 1 ; i++) { for (i = index; i < len - 1 ; i++) {
instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 10 + 'px'; instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 16 + 'px';
} }
} }
}; };

17
packages/notification/src/main.vue
View File

@ -1,12 +1,14 @@
<template> <template>
<div class="el-notification" transition="el-notification-fade" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()"> <transition name="el-notification-fade">
<i class="el-notification__icon el-icon-{{typeClass}}" v-if="type"></i> <div class="el-notification" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
<i class="el-notification__icon" :class="[ typeClass ]" v-if="type"></i>
<div class="el-notification__group" :style="{ 'margin-left': type ? '55px' : '0' }"> <div class="el-notification__group" :style="{ 'margin-left': type ? '55px' : '0' }">
<span>{{ title }}</span> <span>{{ title }}</span>
<p>{{ message }}</p> <p>{{ message }}</p>
<div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div> <div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div>
</div> </div>
</div> </div>
</transition>
</template> </template>
<script type="text/babel"> <script type="text/babel">
@ -18,10 +20,9 @@
}; };
export default { export default {
name: 'ElNotification',
data() { data() {
return { return {
visible: false,
title: '', title: '',
message: '', message: '',
duration: 4500, duration: 4500,
@ -36,14 +37,18 @@
computed: { computed: {
typeClass() { typeClass() {
return this.type ? typeMap[this.type] : ''; return this.type ? `el-icon-${ typeMap[this.type] }` : '';
} }
}, },
watch: { watch: {
closed(newVal) { closed(newVal) {
if (newVal) { if (newVal) {
this.visible = false;
this.$el.addEventListener('transitionend', () => {
this.$destroy(true); this.$destroy(true);
this.$el.parentNode.removeChild(this.$el);
});
} }
} }
}, },
@ -71,7 +76,7 @@
} }
}, },
ready() { mounted() {
if (this.duration > 0) { if (this.duration > 0) {
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
if (!this.closed) { if (!this.closed) {

7
packages/theme-default/src/alert.css
View File

@ -15,6 +15,7 @@
color: #fff; color: #fff;
opacity: 1; opacity: 1;
display: table; display: table;
transition: opacity .2s;
@modifier success { @modifier success {
background-color: #13ce66; background-color: #13ce66;
@ -78,12 +79,8 @@
} }
} }
.el-alert-fade-transition {
transition: opacity .2s;
}
.el-alert-fade-enter, .el-alert-fade-enter,
.el-alert-fade-leave { .el-alert-fade-leave-active {
opacity: 0; opacity: 0;
} }
} }

4
packages/theme-default/src/message-box.css
View File

@ -115,12 +115,12 @@
} }
} }
.msgbox-bounce-enter { .msgbox-bounce-enter-active {
-webkit-animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5); -webkit-animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5);
animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5); animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5);
} }
.msgbox-bounce-leave { .msgbox-bounce-leave-active {
-webkit-animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22); -webkit-animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22); animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
} }

2
packages/theme-default/src/notification.css
View File

@ -72,7 +72,7 @@
right: 0; right: 0;
} }
.el-notification-fade-leave { .el-notification-fade-leave-active {
opacity: 0; opacity: 0;
} }
} }