first commit
This commit is contained in:
编码猿
1
iview/src/components/base/notification/.pydio
Normal file
1
iview/src/components/base/notification/.pydio
Normal file
@@ -0,0 +1 @@
|
||||
a2ac206e-b712-4562-8bcd-1e0af0c1e475
|
||||
36
iview/src/components/base/notification/index.js
Normal file
36
iview/src/components/base/notification/index.js
Normal file
@@ -0,0 +1,36 @@
|
||||
import Notification from './notification.vue';
|
||||
import Vue from 'vue';
|
||||
|
||||
Notification.newInstance = properties => {
|
||||
const _props = properties || {};
|
||||
|
||||
const Instance = new Vue({
|
||||
render (h) {
|
||||
return h(Notification, {
|
||||
props: _props
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const component = Instance.$mount();
|
||||
document.body.appendChild(component.$el);
|
||||
const notification = Instance.$children[0];
|
||||
|
||||
return {
|
||||
notice (noticeProps) {
|
||||
notification.add(noticeProps);
|
||||
},
|
||||
remove (name) {
|
||||
notification.close(name);
|
||||
},
|
||||
component: notification,
|
||||
destroy (element) {
|
||||
notification.closeAll();
|
||||
setTimeout(function() {
|
||||
document.body.removeChild(document.getElementsByClassName(element)[0]);
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
export default Notification;
|
||||
172
iview/src/components/base/notification/notice.vue
Normal file
172
iview/src/components/base/notification/notice.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<transition :name="transitionName" @enter="handleEnter" @leave="handleLeave" appear>
|
||||
<div :class="classes" :style="styles">
|
||||
<template v-if="type === 'notice'">
|
||||
<div :class="contentClasses" ref="content" v-html="content"></div>
|
||||
<div :class="contentWithIcon">
|
||||
<render-cell
|
||||
:render="renderFunc"
|
||||
></render-cell>
|
||||
</div>
|
||||
<a :class="[baseClass + '-close']" @click="close" v-if="closable">
|
||||
<i class="ivu-icon ivu-icon-ios-close"></i>
|
||||
</a>
|
||||
</template>
|
||||
<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"></i>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
import RenderCell from '../render';
|
||||
export default {
|
||||
components: {
|
||||
RenderCell
|
||||
},
|
||||
props: {
|
||||
prefixCls: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 1.5
|
||||
},
|
||||
type: {
|
||||
type: String
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
withIcon: Boolean,
|
||||
render: {
|
||||
type: Function
|
||||
},
|
||||
hasTitle: Boolean,
|
||||
styles: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
right: '50%'
|
||||
};
|
||||
}
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
className: {
|
||||
type: String
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
onClose: {
|
||||
type: Function
|
||||
},
|
||||
transitionName: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
withDesc: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
baseClass () {
|
||||
return `${this.prefixCls}-notice`;
|
||||
},
|
||||
renderFunc () {
|
||||
return this.render || function () {};
|
||||
},
|
||||
classes () {
|
||||
return [
|
||||
this.baseClass,
|
||||
{
|
||||
[`${this.className}`]: !!this.className,
|
||||
[`${this.baseClass}-closable`]: this.closable,
|
||||
[`${this.baseClass}-with-desc`]: this.withDesc
|
||||
}
|
||||
];
|
||||
},
|
||||
contentClasses () {
|
||||
return [
|
||||
`${this.baseClass}-content`,
|
||||
this.render !== undefined ? `${this.baseClass}-content-with-render` : ''
|
||||
];
|
||||
},
|
||||
contentWithIcon () {
|
||||
return [
|
||||
this.withIcon ? `${this.prefixCls}-content-with-icon` : '',
|
||||
!this.hasTitle && this.withIcon ? `${this.prefixCls}-content-with-render-notitle` : ''
|
||||
];
|
||||
},
|
||||
messageClasses () {
|
||||
return [
|
||||
`${this.baseClass}-content`,
|
||||
this.render !== undefined ? `${this.baseClass}-content-with-render` : ''
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearCloseTimer () {
|
||||
if (this.closeTimer) {
|
||||
clearTimeout(this.closeTimer);
|
||||
this.closeTimer = null;
|
||||
}
|
||||
},
|
||||
close () {
|
||||
this.clearCloseTimer();
|
||||
this.onClose();
|
||||
this.$parent.close(this.name);
|
||||
},
|
||||
handleEnter (el) {
|
||||
if (this.type === 'message') {
|
||||
el.style.height = el.scrollHeight + 'px';
|
||||
}
|
||||
},
|
||||
handleLeave (el) {
|
||||
if (this.type === 'message') {
|
||||
// 优化一下，如果当前只有一个 Message，则不使用 js 过渡动画，这样更优美
|
||||
if (document.getElementsByClassName('ivu-message-notice').length !== 1) {
|
||||
el.style.height = 0;
|
||||
el.style.paddingTop = 0;
|
||||
el.style.paddingBottom = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.clearCloseTimer();
|
||||
|
||||
if (this.duration !== 0) {
|
||||
this.closeTimer = setTimeout(() => {
|
||||
this.close();
|
||||
}, this.duration * 1000);
|
||||
}
|
||||
|
||||
// check if with desc in Notice component
|
||||
if (this.prefixCls === 'ivu-notice') {
|
||||
let desc = this.$refs.content.querySelectorAll(`.${this.prefixCls}-desc`)[0];
|
||||
this.withDesc = this.render ? true : (desc ? desc.innerHTML !== '' : false);
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.clearCloseTimer();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
114
iview/src/components/base/notification/notification.vue
Normal file
114
iview/src/components/base/notification/notification.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div :class="classes" :style="wrapStyles">
|
||||
<Notice
|
||||
v-for="notice in notices"
|
||||
:key="notice.name"
|
||||
:prefix-cls="prefixCls"
|
||||
:styles="notice.styles"
|
||||
:type="notice.type"
|
||||
:content="notice.content"
|
||||
:duration="notice.duration"
|
||||
:render="notice.render"
|
||||
:has-title="notice.hasTitle"
|
||||
:withIcon="notice.withIcon"
|
||||
:closable="notice.closable"
|
||||
:name="notice.name"
|
||||
:transition-name="notice.transitionName"
|
||||
:on-close="notice.onClose">
|
||||
</Notice>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Notice from './notice.vue';
|
||||
|
||||
import { transferIndex, transferIncrease } from '../../../utils/transfer-queue';
|
||||
|
||||
const prefixCls = 'ivu-notification';
|
||||
let seed = 0;
|
||||
const now = Date.now();
|
||||
|
||||
function getUuid () {
|
||||
return 'ivuNotification_' + now + '_' + (seed++);
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { Notice },
|
||||
props: {
|
||||
prefixCls: {
|
||||
type: String,
|
||||
default: prefixCls
|
||||
},
|
||||
styles: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {
|
||||
top: '65px',
|
||||
left: '50%'
|
||||
};
|
||||
}
|
||||
},
|
||||
content: {
|
||||
type: String
|
||||
},
|
||||
className: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
notices: [],
|
||||
tIndex: this.handleGetIndex()
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${this.prefixCls}`,
|
||||
{
|
||||
[`${this.className}`]: !!this.className
|
||||
}
|
||||
];
|
||||
},
|
||||
wrapStyles () {
|
||||
let styles = Object.assign({}, this.styles);
|
||||
styles['z-index'] = 1010 + this.tIndex;
|
||||
|
||||
return styles;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add (notice) {
|
||||
const name = notice.name || getUuid();
|
||||
|
||||
let _notice = Object.assign({
|
||||
styles: {
|
||||
right: '50%'
|
||||
},
|
||||
content: '',
|
||||
duration: 1.5,
|
||||
closable: false,
|
||||
name: name
|
||||
}, notice);
|
||||
|
||||
this.notices.push(_notice);
|
||||
this.tIndex = this.handleGetIndex();
|
||||
},
|
||||
close (name) {
|
||||
const notices = this.notices;
|
||||
for (let i = 0; i < notices.length; i++) {
|
||||
if (notices[i].name === name) {
|
||||
this.notices.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
closeAll () {
|
||||
this.notices = [];
|
||||
},
|
||||
handleGetIndex () {
|
||||
transferIncrease();
|
||||
return transferIndex;
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user