diff --git a/examples/routers/message.vue b/examples/routers/message.vue
index 4ff90ec..19644db 100644
--- a/examples/routers/message.vue
+++ b/examples/routers/message.vue
@@ -1,5 +1,6 @@
<template>
<div>
+ <i-button @click.native="info">显示普通提示</i-button>
<i-button @click.native="success">显示成功提示</i-button>
<i-button @click.native="warning">显示警告提示</i-button>
<i-button @click.native="error">显示错误提示</i-button>
@@ -9,6 +10,17 @@
<script>
export default {
methods: {
+ info () {
+// this.$Message.info('这是一条普通提示');
+ this.$Message.success({
+ content: '这是一条普通提示2',
+ duration: 500,
+ onClose () {
+ console.log(123)
+ },
+ closable: true
+ })
+ },
success () {
this.$Message.success('这是一条成功的提示');
},
diff --git a/src/components/base/notification/notice.vue b/src/components/base/notification/notice.vue
index dfa0c65..bec1f2f 100644
--- a/src/components/base/notification/notice.vue
+++ b/src/components/base/notification/notice.vue
@@ -1,10 +1,20 @@
<template>
<transition :name="transitionName">
<div :class="classes" :style="styles">
- <div :class="[baseClass + '-content']" ref="content" v-html="content"></div>
- <a :class="[baseClass + '-close']" @click="close" v-if="closable">
- <i class="ivu-icon ivu-icon-ios-close-empty"></i>
- </a>
+ <template v-if="type === 'notice'">
+ <div :class="[baseClass + '-content']" ref="content" v-html="content"></div>
+ <a :class="[baseClass + '-close']" @click="close" v-if="closable">
+ <i class="ivu-icon ivu-icon-ios-close-empty"></i>
+ </a>
+ </template>
+ <template v-if="type === 'message'">
+ <div :class="[baseClass + '-content']" ref="content">
+ <div :class="[baseClass + '-content-text']" v-html="content"></div>
+ <a :class="[baseClass + '-close']" @click="close" v-if="closable">
+ <i class="ivu-icon ivu-icon-ios-close-empty"></i>
+ </a>
+ </div>
+ </template>
</div>
</transition>
</template>
@@ -19,6 +29,9 @@
type: Number,
default: 1.5
},
+ type: {
+ type: String
+ },
content: {
type: String,
default: ''
diff --git a/src/components/base/notification/notification.vue b/src/components/base/notification/notification.vue
index 9695b55..f3750f6 100644
--- a/src/components/base/notification/notification.vue
+++ b/src/components/base/notification/notification.vue
@@ -5,6 +5,7 @@
:key="notice.name"
:prefix-cls="prefixCls"
:styles="notice.styles"
+ :type="notice.type"
:content="notice.content"
:duration="notice.duration"
:closable="notice.closable"
diff --git a/src/components/message/index.js b/src/components/message/index.js
index 3b9847e..60d012b 100644
--- a/src/components/message/index.js
+++ b/src/components/message/index.js
@@ -28,7 +28,7 @@ function getMessageInstance () {
return messageInstance;
}
-function notice (content, duration = defaultDuration, type, onClose) {
+function notice (content = '', duration = defaultDuration, type, onClose = function () {}, closable = false) {
if (!onClose) {
onClose = function () {
@@ -52,7 +52,9 @@ function notice (content, duration = defaultDuration, type, onClose) {
<span>${content}</span>
</div>
`,
- onClose: onClose
+ onClose: onClose,
+ closable: closable,
+ type: 'message'
});
// 用于手动消除
@@ -66,20 +68,50 @@ function notice (content, duration = defaultDuration, type, onClose) {
}
export default {
- info (content, duration, onClose) {
- return notice(content, duration, 'info', onClose);
+ info (options) {
+ const type = typeof options;
+ if (type === 'string') {
+ options = {
+ content: options
+ };
+ }
+ return notice(options.content, options.duration, 'info', options.onClose, options.closable);
},
- success (content, duration, onClose) {
- return notice(content, duration, 'success', onClose);
+ success (options) {
+ const type = typeof options;
+ if (type === 'string') {
+ options = {
+ content: options
+ };
+ }
+ return notice(options.content, options.duration, 'success', options.onClose, options.closable);
},
- warning (content, duration, onClose) {
- return notice(content, duration, 'warning', onClose);
+ warning (options) {
+ const type = typeof options;
+ if (type === 'string') {
+ options = {
+ content: options
+ };
+ }
+ return notice(options.content, options.duration, 'warning', options.onClose, options.closable);
},
- error (content, duration, onClose) {
- return notice(content, duration, 'error', onClose);
+ error (options) {
+ const type = typeof options;
+ if (type === 'string') {
+ options = {
+ content: options
+ };
+ }
+ return notice(options.content, options.duration, 'error', options.onClose, options.closable);
},
- loading (content, duration, onClose) {
- return notice(content, duration, 'loading', onClose);
+ loading (options) {
+ const type = typeof options;
+ if (type === 'string') {
+ options = {
+ content: options
+ };
+ }
+ return notice(options.content, options.duration, 'loading', options.onClose, options.closable);
},
config (options) {
if (options.top) {
diff --git a/src/components/notice/index.js b/src/components/notice/index.js
index 1392774..d6104d6 100644
--- a/src/components/notice/index.js
+++ b/src/components/notice/index.js
@@ -71,7 +71,8 @@ function notice (type, options) {
transitionName: 'move-notice',
content: content,
onClose: onClose,
- closable: true
+ closable: true,
+ type: 'notice'
});
}
diff --git a/src/styles/components/message.less b/src/styles/components/message.less
index 7196d63..6e706f1 100644
--- a/src/styles/components/message.less
+++ b/src/styles/components/message.less
@@ -14,6 +14,18 @@
vertical-align: middle;
position: absolute;
left: 50%;
+
+ &-close {
+ position: absolute;
+ right: 4px;
+ top: 9px;
+ color: #999;
+ outline: none;
+
+ i.@{icon-prefix-cls}{
+ .close-base(-3px);
+ }
+ }
}
&-notice-content {
@@ -25,6 +37,15 @@
box-shadow: @shadow-base;
background: #fff;
display: block;
+ &-text{
+ display: inline-block;
+ }
+ }
+
+ &-notice-closable{
+ .@{message-prefix-cls}-notice-content-text{
+ padding-right: 32px;
+ }
}
&-success .@{icon-prefix-cls} {
--
libgit2 0.21.4