diff --git a/examples/routers/message.vue b/examples/routers/message.vue
index df768d4..ecde42f 100644
--- a/examples/routers/message.vue
+++ b/examples/routers/message.vue
@@ -13,12 +13,19 @@
info () {
// this.$Message.info('这是一条普通提示');
this.$Message.success({
- content: '这是一条普通提示2',
+ // content: '这是一条普通提示2',
duration: 500,
onClose () {
// console.log(123)
},
- closable: true
+ closable: true,
+ render (h) {
+ return h('Button',{
+ props: {
+ type: 'primary'
+ }
+ }, '这是render出来的');
+ }
})
},
success () {
diff --git a/examples/routers/notice.vue b/examples/routers/notice.vue
index d09dd08..31b0125 100644
--- a/examples/routers/notice.vue
+++ b/examples/routers/notice.vue
@@ -1,6 +1,7 @@
<template>
<div>
<p>带描述信息</p>
+ <Button @click="normal(false)">普通</Button>
<Button @click="info(false)">消息</Button>
<Button @click="success(false)">成功</Button>
<Button @click="warning(false)">警告</Button>
@@ -16,15 +17,30 @@
<script>
export default {
methods: {
+ normal (nodesc) {
+ this.$Notice.open({
+ title: 'google',
+ duration: 0,
+ desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述',
+ render (h) {
+ return h('span', {}, 'sdsdfsdf');
+ }
+ });
+ },
info (nodesc) {
this.$Notice.info({
- title: '这是通知标题',
- desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
+ // title: '这是通知标题',
+ duration: 0,
+ desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述',
+ render (h) {
+ return h('span', {}, 'sdsdfsdf');
+ }
});
},
success (nodesc) {
this.$Notice.success({
title: '这是通知标题',
+ duration: 0,
desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
});
},
diff --git a/src/components/base/notification/index.js b/src/components/base/notification/index.js
index 0c06aa2..134c036 100644
--- a/src/components/base/notification/index.js
+++ b/src/components/base/notification/index.js
@@ -5,7 +5,6 @@ Notification.newInstance = properties => {
const _props = properties || {};
const Instance = new Vue({
- data: _props,
render (h) {
return h(Notification, {
props: _props
diff --git a/src/components/base/notification/notice.vue b/src/components/base/notification/notice.vue
index 2a52d39..39e60a5 100644
--- a/src/components/base/notification/notice.vue
+++ b/src/components/base/notification/notice.vue
@@ -2,7 +2,12 @@
<transition :name="transitionName" @enter="handleEnter" @leave="handleLeave">
<div :class="classes" :style="styles">
<template v-if="type === 'notice'">
- <div :class="[baseClass + '-content']" ref="content" v-html="content"></div>
+ <div :class="contentClasses" ref="content" v-html="content"></div>
+ <div :class="contentWithIcon" ref="content">
+ <render-cell
+ :render="renderFunc"
+ ></render-cell>
+ </div>
<a :class="[baseClass + '-close']" @click="close" v-if="closable">
<i class="ivu-icon ivu-icon-ios-close-empty"></i>
</a>
@@ -10,6 +15,11 @@
<template v-if="type === 'message'">
<div :class="[baseClass + '-content']" ref="content">
<div :class="[baseClass + '-content-text']" v-html="content"></div>
+ <div :class="[baseClass + '-content-text']">
+ <render-cell
+ :render="renderFunc"
+ ></render-cell>
+ </div>
<a :class="[baseClass + '-close']" @click="close" v-if="closable">
<i class="ivu-icon ivu-icon-ios-close-empty"></i>
</a>
@@ -19,7 +29,11 @@
</transition>
</template>
<script>
+ import RenderCell from '../render';
export default {
+ components: {
+ RenderCell
+ },
props: {
prefixCls: {
type: String,
@@ -36,6 +50,10 @@
type: String,
default: ''
},
+ withIcon: Boolean,
+ render: {
+ type: Function
+ },
styles: {
type: Object,
default: function() {
@@ -71,6 +89,9 @@
baseClass () {
return `${this.prefixCls}-notice`;
},
+ renderFunc () {
+ return this.render || function () {};
+ },
classes () {
return [
this.baseClass,
@@ -82,7 +103,22 @@
];
},
contentClasses () {
- return `${this.baseClass}-content`;
+ return [
+ `${this.baseClass}-content`,
+ this.render !== undefined ? `${this.baseClass}-content-with-render` : ''
+ ];
+ },
+ contentWithIcon () {
+ return [
+ this.withIcon ? `${this.prefixCls}-content-with-icon` : '',
+ this.render && !this.title && this.withIcon ? `${this.prefixCls}-content-with-render-notitle` : ''
+ ];
+ },
+ messageClasses () {
+ return [
+ `${this.baseClass}-content`,
+ this.render !== undefined ? `${this.baseClass}-content-with-render` : ''
+ ];
}
},
methods: {
@@ -124,7 +160,8 @@
// check if with desc in Notice component
if (this.prefixCls === 'ivu-notice') {
- this.withDesc = this.$refs.content.querySelectorAll(`.${this.prefixCls}-desc`)[0].innerHTML !== '';
+ let desc = this.$refs.content.querySelectorAll(`.${this.prefixCls}-desc`)[0];
+ this.withDesc = this.render ? true : (desc ? desc.innerHTML !== '' : false);
}
},
beforeDestroy () {
diff --git a/src/components/base/notification/notification.vue b/src/components/base/notification/notification.vue
index f3750f6..70afd06 100644
--- a/src/components/base/notification/notification.vue
+++ b/src/components/base/notification/notification.vue
@@ -8,6 +8,8 @@
:type="notice.type"
:content="notice.content"
:duration="notice.duration"
+ :render="notice.render"
+ :withIcon="notice.withIcon"
:closable="notice.closable"
:name="notice.name"
:transition-name="notice.transitionName"
diff --git a/src/components/message/index.js b/src/components/message/index.js
index 563a527..31ba4a6 100644
--- a/src/components/message/index.js
+++ b/src/components/message/index.js
@@ -31,7 +31,7 @@ function getMessageInstance () {
return messageInstance;
}
-function notice (content = '', duration = defaults.duration, type, onClose = function () {}, closable = false) {
+function notice (content = '', duration = defaults.duration, type, onClose = function () {}, closable = false, render = function () {}) {
const iconType = iconTypes[type];
// if loading
@@ -50,6 +50,7 @@ function notice (content = '', duration = defaults.duration, type, onClose = fun
<span>${content}</span>
</div>
`,
+ render: render,
onClose: onClose,
closable: closable,
type: 'message'
@@ -89,7 +90,7 @@ export default {
content: options
};
}
- return notice(options.content, options.duration, type, options.onClose, options.closable);
+ return notice(options.content, options.duration, type, options.onClose, options.closable, options.render);
},
config (options) {
if (options.top || options.top === 0) {
diff --git a/src/components/notice/index.js b/src/components/notice/index.js
index 7736222..a03dd22 100644
--- a/src/components/notice/index.js
+++ b/src/components/notice/index.js
@@ -33,6 +33,7 @@ function notice (type, options) {
const desc = options.desc || '';
const noticeKey = options.name || `${prefixKey}${name}`;
const onClose = options.onClose || function () {};
+ const render = options.render;
// todo const btn = options.btn || null;
const duration = (options.duration === 0) ? 0 : options.duration || defaultDuration;
@@ -42,9 +43,12 @@ function notice (type, options) {
let content;
- const with_desc = desc === '' ? '' : ` ${prefixCls}-with-desc`;
+ let withIcon;
+
+ const with_desc = (options.render && !title) ? '' : desc === '' ? '' : ` ${prefixCls}-with-desc`;
if (type == 'normal') {
+ withIcon = false;
content = `
<div class="${prefixCls}-custom-content ${prefixCls}-with-normal${with_desc}">
<div class="${prefixCls}-title">${title}</div>
@@ -53,6 +57,7 @@ function notice (type, options) {
`;
} else {
const iconType = iconTypes[type];
+ withIcon = true;
content = `
<div class="${prefixCls}-custom-content ${prefixCls}-with-icon ${prefixCls}-with-${type}${with_desc}">
<span class="${prefixCls}-icon ${prefixCls}-icon-${type}">
@@ -63,13 +68,14 @@ function notice (type, options) {
</div>
`;
}
-
instance.notice({
name: noticeKey.toString(),
duration: duration,
styles: {},
transitionName: 'move-notice',
content: content,
+ withIcon: withIcon,
+ render: render,
onClose: onClose,
closable: true,
type: 'notice'
diff --git a/src/styles/components/notice.less b/src/styles/components/notice.less
index 651e7c4..34b4e20 100644
--- a/src/styles/components/notice.less
+++ b/src/styles/components/notice.less
@@ -11,10 +11,17 @@
position: fixed;
z-index: @zindex-notification;
+ &-content-with-icon{
+ margin-left: 51px;
+ }
+ &-with-desc&-with-icon &-title{
+ margin-left: 51px;
+ }
+
&-notice {
margin-bottom: @notice-margin-bottom;
padding: @notice-padding;
- //border: 1px solid @border-color-split;
+ border: 1px solid @border-color-split;
border-radius: @border-radius-small;
box-shadow: @shadow-base;
background: #fff;
@@ -34,6 +41,12 @@
}
}
+ &-content-with-render{
+ .ivu-notice-desc{
+ display: none;
+ }
+ }
+
&-with-desc{
.@{notice-prefix-cls}-notice-close{
top: 11px;
@@ -41,8 +54,13 @@
}
}
+ &-content-with-render-notitle{
+ margin-left: 26px;
+ }
+
&-title {
font-size: @font-size-base;
+ line-height: @font-size-base + 3; //fixed the bug that the bottom of some letters were hidden just like 'g'
color: @title-color;
padding-right: 10px;
overflow: hidden;
@@ -53,9 +71,6 @@
font-weight: bold;
margin-bottom: 8px;
}
- &-with-desc&-with-icon &-title{
- margin-left: 51px;
- }
&-desc {
font-size: 12px;
--
libgit2 0.21.4