make Message and Notice support render
This commit is contained in:
zhigang.li
parent
8a0cb3ce80
commit
b24be35a7e
8 changed files with 99 additions and 16 deletions
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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 ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ Notification.newInstance = properties => {
|
|||
const _props = properties || {};
|
||||
|
||||
const Instance = new Vue({
|
||||
data: _props,
|
||||
render (h) {
|
||||
return h(Notification, {
|
||||
props: _props
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue