update Message
Message add closable func, and update params
This commit is contained in:
Aresn
parent
e993204310
commit
e0bd31a64c
6 changed files with 97 additions and 17 deletions
|
|
@ -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('这是一条成功的提示');
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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: ''
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -71,7 +71,8 @@ function notice (type, options) {
|
|||
transitionName: 'move-notice',
|
||||
content: content,
|
||||
onClose: onClose,
|
||||
closable: true
|
||||
closable: true,
|
||||
type: 'notice'
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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} {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue