mirror of https://github.com/ElemeFE/element
update msgbox
Leopoldthecoder
parent
67ea53062e
commit
08fd95571f
|
|
@ -65,11 +65,11 @@
|
|||
</script>
|
||||
|
||||
## 基本用法
|
||||
<el-button @click="open">打开 Alert</el-button>
|
||||
<el-button @click.native="open">打开 Alert</el-button>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button @click="open">打开 Message Box</el-button>
|
||||
<el-button @click.native="open">打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -85,11 +85,11 @@
|
|||
|
||||
## 返回 Promise
|
||||
|
||||
<el-button @click="open2">打开 alert</el-button>
|
||||
<el-button @click.native="open2">打开 alert</el-button>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button @click="open4">打开 alert</el-button>
|
||||
<el-button @click.native="open2">打开 alert</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -105,11 +105,11 @@
|
|||
</script>
|
||||
```
|
||||
|
||||
<el-button @click="open3">打开 confirm</el-button>
|
||||
<el-button @click.native="open3">打开 confirm</el-button>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button @click="open5">打开 confirm</el-button>
|
||||
<el-button @click.native="open3">打开 confirm</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -132,11 +132,11 @@
|
|||
}
|
||||
</script>
|
||||
```
|
||||
<el-button @click="open4">打开 prompt</el-button>
|
||||
<el-button @click.native="open4">打开 prompt</el-button>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button @click="open6">打开 prompt</el-button>
|
||||
<el-button @click.native="open4">打开 prompt</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -157,11 +157,11 @@
|
|||
</script>
|
||||
```
|
||||
|
||||
<el-button @click="open5">打开 Message Box</el-button>
|
||||
<el-button @click.native="open5">打开 Message Box</el-button>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button @click="open3">打开 Message Box</el-button>
|
||||
<el-button @click.native="open5">打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -183,11 +183,11 @@
|
|||
|
||||
## 更多配置项
|
||||
|
||||
<el-button @click="open6">打开 Message Box</el-button>
|
||||
<el-button @click.native="open6">打开 Message Box</el-button>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-button @click="open2">打开 Message Box</el-button>
|
||||
<el-button @click.native="open6">打开 Message Box</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@
|
|||
"author": "elemefe",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"vue-popup": "^0.1.8"
|
||||
"vue-popup": "^0.2.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ var showNextMsg = function() {
|
|||
initInstance();
|
||||
}
|
||||
|
||||
if (!instance.visible || instance.closeTimer) {
|
||||
if (!instance.value || instance.closeTimer) {
|
||||
if (msgQueue.length > 0) {
|
||||
currentMsg = msgQueue.shift();
|
||||
|
||||
|
|
@ -98,10 +98,15 @@ var showNextMsg = function() {
|
|||
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(() => {
|
||||
instance.visible = true;
|
||||
instance.value = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -188,7 +193,7 @@ MessageBox.prompt = function(message, title, options) {
|
|||
};
|
||||
|
||||
MessageBox.close = function() {
|
||||
instance.visible = false;
|
||||
instance.value = false;
|
||||
msgQueue = [];
|
||||
currentMsg = null;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,23 +1,25 @@
|
|||
<template>
|
||||
<div class="el-message-box__wrapper">
|
||||
<div class="el-message-box" v-if="rendered" v-show="visible" transition="msgbox-bounce">
|
||||
<div class="el-message-box__header" v-if="title !== ''">
|
||||
<div class="el-message-box__title">{{ title }}</div>
|
||||
<i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i>
|
||||
</div>
|
||||
<div class="el-message-box__content" v-if="message !== ''">
|
||||
<div class="el-message-box__status {{ typeClass }}"></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">
|
||||
<input type="text" v-model="inputValue" :placeholder="inputPlaceholder" v-el:input />
|
||||
<div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{editorErrorMessage}}</div>
|
||||
<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__title">{{ title }}</div>
|
||||
<i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i>
|
||||
</div>
|
||||
<div class="el-message-box__content" v-if="message !== ''">
|
||||
<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__input" v-show="showInput">
|
||||
<input type="text" v-model="inputValue" :placeholder="inputPlaceholder" ref="input" />
|
||||
<div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{editorErrorMessage}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-message-box__btns">
|
||||
<el-button :class="[ cancelButtonClasses ]" v-show="showCancelButton" @click.native="handleAction('cancel')">{{ cancelButtonText }}</el-button>
|
||||
<el-button :class="[ confirmButtonClasses ]" v-show="showConfirmButton" @click.native="handleAction('confirm')" type="primary">{{ confirmButtonText }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-message-box__btns">
|
||||
<el-button class="{{ cancelButtonClasses }}" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</el-button>
|
||||
<el-button class="{{ confirmButtonClasses }}" v-show="showConfirmButton" @click="handleAction('confirm')" type="primary">{{ confirmButtonText }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -34,8 +36,6 @@
|
|||
import Popup from 'vue-popup';
|
||||
|
||||
export default {
|
||||
name: 'el-message-box',
|
||||
|
||||
mixins: [ Popup ],
|
||||
|
||||
props: {
|
||||
|
|
@ -68,12 +68,27 @@
|
|||
},
|
||||
|
||||
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) {
|
||||
if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) {
|
||||
return;
|
||||
}
|
||||
var callback = this.callback;
|
||||
this.visible = false;
|
||||
this.value = false;
|
||||
callback(action);
|
||||
},
|
||||
|
||||
|
|
@ -109,11 +124,11 @@
|
|||
}
|
||||
},
|
||||
|
||||
visible(val) {
|
||||
value(val) {
|
||||
if (val && this.$type === 'prompt') {
|
||||
setTimeout(() => {
|
||||
if (this.$els.input) {
|
||||
this.$els.input.focus();
|
||||
if (this.$refs.input) {
|
||||
this.$refs.input.focus();
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
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);
|
||||
animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue