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

MessageBox: add 'message' support for VNode (#4550)

pull/4614/head
杨奕 2017-05-02 14:59:55 +08:00 committed by baiyaaaaa
parent 1e97585690
commit fb4a786249
7 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
examples/components/demo-block.vue
View File

@ -151,6 +151,7 @@
<script type="text/babel">
import compoLang from '../i18n/component.json';
import { version } from 'main/index.js';
export default {
data() {
@ -171,10 +172,10 @@
goJsfiddle() {
const { script, html, style } = this.jsfiddle;
const resourcesTpl = '<scr' + 'ipt src="//unpkg.com/vue/dist/vue.js"></scr' + 'ipt>' +
'\n<scr' + 'ipt src="//unpkg.com/element-ui/lib/index.js"></scr' + 'ipt>';
'\n<scr' + `ipt src="//unpkg.com/element-ui@${ version }/lib/index.js"></scr` + 'ipt>';
let jsTpl = (script || '').replace(/export default/, 'var Main =').trim();
let htmlTpl = `${resourcesTpl}\n<div id="app">\n${html.trim()}\n</div>`;
let cssTpl = `@import url("//unpkg.com/element-ui/lib/theme-default/index.css");\n${(style || '').trim()}\n`;
let cssTpl = `@import url("//unpkg.com/element-ui@${ version }/lib/theme-default/index.css");\n${(style || '').trim()}\n`;
jsTpl = jsTpl
? jsTpl + '\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount(\'#app\')'
: 'new Vue().$mount(\'#app\')';

12
examples/docs/en-US/message-box.md
View File

@ -59,9 +59,13 @@
},
open4() {
const h = this.$createElement;
this.$msgbox({
title: 'Message',
message: 'This is a message',
message: h('p', null, [
h('span', null, 'Message can be '),
h('i', { style: 'color: teal' }, 'VNode')
]),
showCancelButton: true,
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
@ -219,9 +223,13 @@ Can be customized to show various content.
export default {
methods: {
open4() {
const h = this.$createElement;
this.$msgbox({
title: 'Message',
message: 'This is a message',
message: h('p', null, [
h('span', null, 'Message can be '),
h('i', { style: 'color: teal' }, 'VNode')
]),
showCancelButton: true,
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',

4
examples/docs/en-US/notification.md
View File

@ -6,7 +6,7 @@
this.$notify({
title: 'Title',
message: h('p', { style: 'color: red' }, 'This is a reminder')
message: h('i', { style: 'color: teal' }, 'This is a reminder')
});
},
@ -93,7 +93,7 @@ Displays a global notification message at the upper right corner of the page.
this.$notify({
title: 'Title',
message: h('p', { style: 'color: red' }, 'This is a reminder')
message: h('i', { style: 'color: teal' }, 'This is a reminder')
});
},

14
examples/docs/zh-CN/message-box.md
View File

@ -60,9 +60,13 @@
open4() {
const h = this.$createElement;
this.$msgbox({
title: '消息',
message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',
message: h('p', null, [
h('span', null, '内容可以是 '),
h('i', { style: 'color: teal' }, 'VNode')
]),
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
@ -216,9 +220,13 @@
export default {
methods: {
open4() {
const h = this.$createElement;
this.$msgbox({
title: '消息',
message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',
message: h('p', null, [
h('span', null, '内容可以是 '),
h('i', { style: 'color: teal' }, 'VNode')
]),
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
@ -268,7 +276,7 @@ import { MessageBox } from 'element-ui';
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| title | MessageBox 标题 | string | — | — |
| message | MessageBox 消息正文内容 | string | — | — |
| message | MessageBox 消息正文内容 | string / VNode | — | — |
| type | 消息类型，用于显示图标 | string | success/info/warning/error | — |
| customClass | MessageBox 的自定义类名 | string | — | — |
| callback | 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 | function(action, instance)，action 的值为'confirm'或'cancel', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法 | — | — |

4
examples/docs/zh-CN/notification.md
View File

@ -6,7 +6,7 @@
this.$notify({
title: '标题名称',
message: h('p', { style: 'color: red'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
});
},
@ -94,7 +94,7 @@
this.$notify({
title: '标题名称',
message: h('p', { style: 'color: red'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
});
},

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

@ -29,6 +29,7 @@ const defaults = {
import Vue from 'vue';
import msgboxVue from './main.vue';
import merge from 'element-ui/src/utils/merge';
import { isVNode } from 'element-ui/src/utils/vdom';
const MessageBoxConstructor = Vue.extend(msgboxVue);
@ -97,6 +98,10 @@ const showNextMsg = () => {
oldCb(action, instance);
showNextMsg();
};
if (isVNode(instance.message)) {
instance.$slots.default = [instance.message];
instance.message = null;
}
['modal', 'showClose', 'closeOnClickModal', 'closeOnPressEscape'].forEach(prop => {
if (instance[prop] === undefined) {
instance[prop] = true;

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

@ -8,7 +8,9 @@
</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': typeClass ? '50px' : '0' }"><p>{{ message }}</p></div>
<div class="el-message-box__message" :style="{ 'margin-left': typeClass ? '50px' : '0' }">
<slot><p>{{ message }}</p></slot>
</div>
<div class="el-message-box__input" v-show="showInput">
<el-input v-model="inputValue" @keyup.enter.native="handleAction('confirm')" :placeholder="inputPlaceholder" ref="input"></el-input>
<div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{ editorErrorMessage }}</div>