From d296cfef05edb26fd0df89207a2dd778da75e911 Mon Sep 17 00:00:00 2001 From: JeremyWuuuuu <591449570@qq.com> Date: Wed, 5 Aug 2020 17:33:34 +0800 Subject: [PATCH] [WIP] address PR comments --- packages/notification/index.ts | 1 - packages/notification/src/index.vue | 34 +++----- .../src/notification.constants.ts | 14 ++-- packages/notification/src/notify.ts | 84 ++++++++++--------- 4 files changed, 64 insertions(+), 69 deletions(-) diff --git a/packages/notification/index.ts b/packages/notification/index.ts index a2b3d38bc6..395e0de457 100644 --- a/packages/notification/index.ts +++ b/packages/notification/index.ts @@ -4,5 +4,4 @@ import Notify from './src/notify' export default (app: App): void => { app.component(Notification.name, Notification) app.config.globalProperties.$notify = Notify - console.log(app.config.globalProperties) } diff --git a/packages/notification/src/index.vue b/packages/notification/src/index.vue index b05ccccf4a..79a5d142f6 100644 --- a/packages/notification/src/index.vue +++ b/packages/notification/src/index.vue @@ -80,35 +80,28 @@ export default defineComponent({ ...props, }) - const typeClass = computed(() => { - const { type } = data + data.typeClass = computed(() => { + const type = data.type return type && TypeMap[type] ? `el-icon-${TypeMap[type]}` : '' }) - const horizontalClass = computed(() => { - const { position } = data - return position.indexOf('right') > 1 ? 'right' : 'left' + data.horizontalClass = computed(() => { + return data.position.indexOf('right') > 1 ? 'right' : 'left' }) - const verticalProperty = computed(() => { - const { position } = data - return position.startsWith('top') ? 'top' : 'bottom' + data.verticalProperty = computed(() => { + return data.position.startsWith('top') ? 'top' : 'bottom' }) - const positionStyle = ref({ - [verticalProperty.value]: props.offset, + data.positionStyle = ref({ + [data.verticalProperty]: props.offset, }) - const visible = ref(true) + console.log(data.positionStyle) - return { - ...data, - visible, - typeClass, - horizontalClass, - verticalProperty, - positionStyle, - } + data.visible = ref(true) + + return data }, watch: { closed(newVal: boolean) { @@ -134,7 +127,7 @@ export default defineComponent({ // When using notification programmably, this is line of code is critical // to obtain the public component instance if (typeof this._init === 'function') { - this._init(this._idx, this) + // this._init(this._idx, this) } on(document, 'keydown', this.keydown) }, @@ -144,7 +137,6 @@ export default defineComponent({ methods: { destroyElement() { off(this.$el, 'transitionend', this.destroyElement) - this.$destroy(true) this.$el.parentNode.removeChild(this.$el) }, // start counting down to destroy notification instance diff --git a/packages/notification/src/notification.constants.ts b/packages/notification/src/notification.constants.ts index 88e4c612ad..0f2553a241 100644 --- a/packages/notification/src/notification.constants.ts +++ b/packages/notification/src/notification.constants.ts @@ -1,4 +1,4 @@ -import type { ComponentPublicInstance, VNode } from 'vue' +import type { VNode } from 'vue' export interface INotification

void> { (options: INotificationOptions): void @@ -25,12 +25,14 @@ export type INotificationOptions = { _init?: (idx: number, vm: NotificationVM) => void } -export type NotificationVM = ComponentPublicInstance +export type NotificationVM = VNode -export type NotificationQueue = Array<{ - vm: Nullable - container: HTMLElement -}> +type NotificationQueueItem = { + vm: NotificationVM + $el: HTMLElement +} + +export type NotificationQueue = Array export const defaultProps = { diff --git a/packages/notification/src/notify.ts b/packages/notification/src/notify.ts index c80f24bf39..c754ce43ea 100644 --- a/packages/notification/src/notify.ts +++ b/packages/notification/src/notify.ts @@ -1,16 +1,16 @@ -import { createApp, h, reactive } from 'vue' +import { reactive, createVNode, render } from 'vue' import NotificationConstructor from './index.vue' import type { INotificationOptions, INotification, NotificationQueue, NotificationVM } from './notification.constants' import isServer from '../../utils/isServer' import PopupManager from '../../utils/popup-manager' import { isVNode } from '../../utils/util' -const NotificationRenderer = (props: Record) => { - if (isVNode(props.message)) { - return h(NotificationConstructor, props, { default: () => h(props.message) }) - } - return h(NotificationConstructor, props) -} +// const NotificationRenderer = (props: Record) => { +// if (isVNode(props.message)) { +// return h(NotificationConstructor, props, { default: () => h(props.message) }) +// } +// return h(NotificationConstructor, props) +// } let vm: NotificationVM const notifications: NotificationQueue = [] @@ -23,6 +23,17 @@ const Notification: INotification = function(options: INotificationOptions): Not options.onClose = function() { close(id, userOnClose) } + + const position = options.position || 'top-right' + + let verticalOffset = options.offset || 0 + notifications + .filter(({ vm }) => vm.component.props.position === position) + .forEach(({ vm }) => { + verticalOffset += (vm.el.offsetHeight || 0) + 16 + }) + verticalOffset += 16 + const defaultOptions: INotificationOptions = { dangerouslyUseHTMLString: false, duration: 4500, @@ -30,37 +41,29 @@ const Notification: INotification = function(options: INotificationOptions): Not showClose: true, offset: 0, _idx: notifications.length, - _init: function(idx: number, vm: NotificationVM): void { - obtainInstance(idx, vm) - let verticalOffset = options.offset || 0 - notifications - .filter(item => item.vm.$props.position === position) - .forEach(({ vm }) => { - verticalOffset += (vm.$el.offsetHeight || 0) + 16 - }) - verticalOffset += 16 - this.offset = verticalOffset - }, + // _init: function(idx: number, vm: NotificationVM): void { + // obtainInstance(idx, vm) + + // }, } options = { ...defaultOptions, ...options, + offset: verticalOffset, id, } options = reactive(options) - const position = options.position || 'top-right' - const container = document.createElement('div') + container.className = `container_${id}` container.style.zIndex = String(PopupManager.nextZIndex()) - notifications.push({ vm: null, container }) - vm = createApp(NotificationRenderer, { ...options }).mount( - container, - ) as NotificationVM - - document.body.appendChild(container) + // notifications.push({ vm: null, container }) + vm = createVNode(NotificationConstructor, options) + render(vm, container) + notifications.push({ vm, $el: container }) + document.body.appendChild(container.firstElementChild) return vm }; @@ -81,31 +84,30 @@ export function close( id: string, userOnClose?: (vm: NotificationVM) => void, ): void { - const idx = notifications.findIndex(i => { - const { id: _id } = i.vm.$props + const idx = notifications.findIndex( ({ vm }) => { + const { id: _id } = vm.component.props return id === _id }) if (idx === -1) { return } - const notification = notifications[idx] - const { vm } = notification + const { vm, $el } = notifications[idx] if (!vm) return userOnClose?.(vm) - const removedHeight = vm.$el.offsetHeight - document.body.removeChild(notification.container) - notification.container = null + const removedHeight = vm.el.offsetHeight + // document.body.removeChild(notification.container) + render(null, $el) notifications.splice(idx, 1) const len = notifications.length if (len < 1) return - const position = vm.$props.position + const position = vm.component.props.position for (let i = idx; i < len; i++) { - if (notifications[i].vm.$props.position === position) { - notifications[i].vm.$el.style[vm.verticalProperty] = + if (notifications[i].vm.component.props.position === position) { + notifications[i].vm.el.style[vm.component.ctx.verticalProperty] = parseInt( - notifications[i].vm.$el.style[vm.verticalProperty], + notifications[i].vm.el.style[vm.component.ctx.verticalProperty], 10, ) - removedHeight - @@ -117,12 +119,12 @@ export function close( export function closeAll(): void { for (let i = notifications.length - 1; i >= 0; i--) { - notifications[i].vm.onClose() + notifications[i].vm.component.ctx.onClose() } } -function obtainInstance(idx: number, vm: NotificationVM): void { - notifications[idx].vm = vm -} +// function obtainInstance(idx: number, vm: NotificationVM): void { +// notifications[idx] = vm +// } export default Notification