ivue-material-plus
Version:
A high quality UI components Library with Vue.js
1 lines • 10.8 kB
Source Map (JSON)
{"version":3,"file":"notice.mjs","sources":["../../../../../src/components/ivue-notice/notice.ts"],"sourcesContent":["import { createVNode, VNode, render } from 'vue';\r\nimport { transferIndex, transferIncrease } from '../../utils/transfer-queue';\r\n\r\nimport Notice from './index.vue';\r\n\r\n// type\r\nimport type { Type, Position, Options } from './types/notice';\r\n\r\nconst prefixKey = 'ivue_notice_key_';\r\nlet name = 1;\r\n\r\n// 队列\r\nconst notifications = {\r\n 'top-left': [],\r\n 'top-right': [],\r\n 'bottom-left': [],\r\n 'bottom-right': [],\r\n};\r\n\r\n// 每个通知之间的间隙大小\r\nconst GAP_SIZE = 16;\r\n\r\nlet offset: number;\r\nlet defaultDuration: number;\r\n\r\n// 存储自定义的通知id列表\r\nconst notificationsId: Record<string, boolean> = {};\r\n\r\nfunction notice(type: Type, options: Options = {}) {\r\n // 自定义id\r\n const customizeId = options.id;\r\n // 每一个的id\r\n const id = customizeId || `${prefixKey}${name}`;\r\n\r\n // 通知列表开启了自定义id,不重复创建\r\n if (notificationsId[customizeId]) {\r\n return;\r\n }\r\n\r\n // 标题\r\n options.title = options.title || '';\r\n // 描述\r\n options.desc = options.desc || '';\r\n\r\n // onclose\r\n options.onClose = options.onClose || function () {};\r\n\r\n // duration\r\n options.duration = defaultDuration || options.duration;\r\n\r\n // 没有id\r\n if (!customizeId) {\r\n name++;\r\n }\r\n\r\n // 偏移距离\r\n let verticalOffset = offset || options.offset || 0;\r\n // 偏移方向\r\n const position = options.position || 'top-right';\r\n\r\n notifications[position].forEach(({ vm }) => {\r\n verticalOffset += (vm.el.offsetHeight || 0) + GAP_SIZE;\r\n });\r\n\r\n verticalOffset += GAP_SIZE;\r\n\r\n // 获取Index\r\n const handleGetIndex = () => {\r\n transferIncrease();\r\n return transferIndex;\r\n };\r\n\r\n // 当前index\r\n const tIndex = handleGetIndex();\r\n // 用户设置的关闭回调\r\n const userOnClose = options.onClose;\r\n\r\n options = {\r\n // default options end\r\n ...options,\r\n type,\r\n onClose: () => {\r\n close(id, position, userOnClose);\r\n },\r\n offset: verticalOffset,\r\n id: id,\r\n zIndex: 1010 + tIndex,\r\n };\r\n\r\n const vm: VNode = createVNode(Notice, options);\r\n const container = document.createElement('div');\r\n\r\n // 有自定义id\r\n if (customizeId) {\r\n notificationsId[customizeId] = true;\r\n }\r\n\r\n // 清除通知元素防止内存泄漏\r\n vm.props.onDestroy = () => {\r\n render(null, container);\r\n };\r\n\r\n notifications[position].push({ vm });\r\n\r\n // 当 close 函数被调用时,实例将删除此项。\r\n // 所以我们不需要担心。\r\n render(vm, container);\r\n\r\n document.body.appendChild(container.firstElementChild);\r\n\r\n return {\r\n close,\r\n };\r\n}\r\n\r\n/**\r\n * 当用户点击`x` 按钮或按下`esc` 或时间达到其限制时,将调用此函数。\r\n * 由transition@before-leave 事件发出,以便我们可以获取当前的notification.offsetHeight,如果它被调用\r\n * 通过@after-leave DOM 元素将从页面中删除,因此我们无法再获取 offsetHeight。\r\n * @param {String} id 要关闭的通知 id\r\n * @param {Position} 定位策略\r\n * @param {Function} userOnClose 用户关闭时调用的回调\r\n */\r\nconst close = (\r\n id: string,\r\n position: Position = 'top-right',\r\n userOnClose?: (vm: VNode) => void\r\n): void => {\r\n // 将 vm 插入通知列表时存储索引\r\n const orientedNotifications = notifications[position];\r\n\r\n // 当前的下标\r\n const idx = orientedNotifications.findIndex(({ vm }) => {\r\n if (!vm) {\r\n return;\r\n }\r\n\r\n return vm.component.props.id === id;\r\n });\r\n\r\n if (idx === -1) {\r\n return;\r\n }\r\n\r\n // vm\r\n const { vm } = orientedNotifications[idx];\r\n\r\n if (!vm) {\r\n return;\r\n }\r\n\r\n // 在通知从 DOM 中移除之前调用用户的关闭函数。\r\n userOnClose?.(vm);\r\n\r\n // 请注意,这称为@before-leave,这就是我们能够获取此属性的原因。\r\n const removedHeight = vm.el.offsetHeight;\r\n const verticalPos = position.split('-')[0];\r\n\r\n // 有自定义id删除\r\n if (notificationsId[id]) {\r\n // 隐藏自定义的通知\r\n orientedNotifications[idx].vm.component.proxy.data.visible = false;\r\n\r\n delete notificationsId[id];\r\n }\r\n\r\n // 移除当前通知\r\n notifications[position].splice(idx, 1);\r\n\r\n const len = notifications[position].length;\r\n\r\n if (len < 1) {\r\n return;\r\n }\r\n\r\n // 开始移除项\r\n for (let i = idx; i < len; i++) {\r\n // 新位置等于当前的 offsetTop 减去移除的高度加上 16px(每个项目之间的间隙大小)\r\n const { el, component } = orientedNotifications[i].vm;\r\n const pos = parseInt(el.style[verticalPos], 10) - removedHeight - GAP_SIZE;\r\n\r\n // 修改偏移位置触发向上移动动画\r\n component.props.offset = pos;\r\n }\r\n};\r\n\r\n// 关闭所有\r\nconst closeAll = (): void => {\r\n // 遍历所有方向,立即关闭它们。\r\n for (const key in notifications) {\r\n const orientedNotifications = notifications[key as Position];\r\n\r\n orientedNotifications.forEach(({ vm }) => {\r\n // same as the previous close method, we'd like to make sure lifecycle gets handle properly.\r\n vm.component.proxy.data.visible = false;\r\n });\r\n }\r\n};\r\n\r\nconst notification = {\r\n open(options: Options) {\r\n return notice('normal', options);\r\n },\r\n info(options: Options) {\r\n return notice('info', options);\r\n },\r\n warning(options: Options) {\r\n return notice('warning', options);\r\n },\r\n success(options: Options) {\r\n return notice('success', options);\r\n },\r\n error(options: Options) {\r\n return notice('error', options);\r\n },\r\n // 全局配置\r\n config(options: Options) {\r\n // 偏移位置\r\n if (options.offset) {\r\n offset = options.offset;\r\n }\r\n\r\n // 延迟时间\r\n if (options.duration > 0) {\r\n defaultDuration = options.duration;\r\n }\r\n },\r\n close,\r\n closeAll,\r\n};\r\n\r\nexport default notification;\r\n"],"names":["vm"],"mappings":";;;;AAQA,MAAM,SAAY,GAAA,kBAAA,CAAA;AAClB,IAAI,IAAO,GAAA,CAAA,CAAA;AAGX,MAAM,aAAgB,GAAA;AAAA,EACpB,YAAY,EAAC;AAAA,EACb,aAAa,EAAC;AAAA,EACd,eAAe,EAAC;AAAA,EAChB,gBAAgB,EAAC;AACnB,CAAA,CAAA;AAGA,MAAM,QAAW,GAAA,EAAA,CAAA;AAEjB,IAAI,MAAA,CAAA;AACJ,IAAI,eAAA,CAAA;AAGJ,MAAM,kBAA2C,EAAC,CAAA;AAElD,SAAS,MAAO,CAAA,IAAA,EAAY,OAAmB,GAAA,EAAI,EAAA;AAEjD,EAAA,MAAM,cAAc,OAAQ,CAAA,EAAA,CAAA;AAE5B,EAAM,MAAA,EAAA,GAAK,WAAe,IAAA,CAAA,EAAG,SAAY,CAAA,EAAA,IAAA,CAAA,CAAA,CAAA;AAGzC,EAAA,IAAI,gBAAgB,WAAc,CAAA,EAAA;AAChC,IAAA,OAAA;AAAA,GACF;AAGA,EAAQ,OAAA,CAAA,KAAA,GAAQ,QAAQ,KAAS,IAAA,EAAA,CAAA;AAEjC,EAAQ,OAAA,CAAA,IAAA,GAAO,QAAQ,IAAQ,IAAA,EAAA,CAAA;AAG/B,EAAQ,OAAA,CAAA,OAAA,GAAU,OAAQ,CAAA,OAAA,IAAW,WAAY;AAAA,GAAC,CAAA;AAGlD,EAAQ,OAAA,CAAA,QAAA,GAAW,mBAAmB,OAAQ,CAAA,QAAA,CAAA;AAG9C,EAAA,IAAI,CAAC,WAAa,EAAA;AAChB,IAAA,IAAA,EAAA,CAAA;AAAA,GACF;AAGA,EAAI,IAAA,cAAA,GAAiB,MAAU,IAAA,OAAA,CAAQ,MAAU,IAAA,CAAA,CAAA;AAEjD,EAAM,MAAA,QAAA,GAAW,QAAQ,QAAY,IAAA,WAAA,CAAA;AAErC,EAAA,aAAA,CAAc,UAAU,OAAQ,CAAA,CAAC,EAAE,EAAA,EAAAA,KAAS,KAAA;AAC1C,IAAmBA,cAAAA,IAAAA,CAAAA,GAAAA,CAAG,EAAG,CAAA,YAAA,IAAgB,CAAK,IAAA,QAAA,CAAA;AAAA,GAC/C,CAAA,CAAA;AAED,EAAkB,cAAA,IAAA,QAAA,CAAA;AAGlB,EAAA,MAAM,iBAAiB,MAAM;AAC3B,IAAiB,gBAAA,EAAA,CAAA;AACjB,IAAO,OAAA,aAAA,CAAA;AAAA,GACT,CAAA;AAGA,EAAA,MAAM,SAAS,cAAe,EAAA,CAAA;AAE9B,EAAA,MAAM,cAAc,OAAQ,CAAA,OAAA,CAAA;AAE5B,EAAU,OAAA,GAAA;AAAA,IAER,GAAG,OAAA;AAAA,IACH,IAAA;AAAA,IACA,SAAS,MAAM;AACb,MAAM,KAAA,CAAA,EAAA,EAAI,UAAU,WAAW,CAAA,CAAA;AAAA,KACjC;AAAA,IACA,MAAQ,EAAA,cAAA;AAAA,IACR,EAAA;AAAA,IACA,QAAQ,IAAO,GAAA,MAAA;AAAA,GACjB,CAAA;AAEA,EAAM,MAAA,EAAA,GAAY,WAAY,CAAA,MAAA,EAAQ,OAAO,CAAA,CAAA;AAC7C,EAAM,MAAA,SAAA,GAAY,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAG9C,EAAA,IAAI,WAAa,EAAA;AACf,IAAA,eAAA,CAAgB,WAAe,CAAA,GAAA,IAAA,CAAA;AAAA,GACjC;AAGA,EAAG,EAAA,CAAA,KAAA,CAAM,YAAY,MAAM;AACzB,IAAA,MAAA,CAAO,MAAM,SAAS,CAAA,CAAA;AAAA,GACxB,CAAA;AAEA,EAAA,aAAA,CAAc,QAAU,CAAA,CAAA,IAAA,CAAK,EAAE,EAAA,EAAI,CAAA,CAAA;AAInC,EAAA,MAAA,CAAO,IAAI,SAAS,CAAA,CAAA;AAEpB,EAAS,QAAA,CAAA,IAAA,CAAK,WAAY,CAAA,SAAA,CAAU,iBAAiB,CAAA,CAAA;AAErD,EAAO,OAAA;AAAA,IACL,KAAA;AAAA,GACF,CAAA;AACF,CAAA;AAUA,MAAM,KAAQ,GAAA,CACZ,EACA,EAAA,QAAA,GAAqB,aACrB,WACS,KAAA;AAET,EAAA,MAAM,wBAAwB,aAAc,CAAA,QAAA,CAAA,CAAA;AAG5C,EAAA,MAAM,MAAM,qBAAsB,CAAA,SAAA,CAAU,CAAC,EAAE,EAAA,EAAAA,KAAS,KAAA;AACtD,IAAA,IAAI,CAACA,GAAI,EAAA;AACP,MAAA,OAAA;AAAA,KACF;AAEA,IAAOA,OAAAA,GAAAA,CAAG,SAAU,CAAA,KAAA,CAAM,EAAO,KAAA,EAAA,CAAA;AAAA,GAClC,CAAA,CAAA;AAED,EAAA,IAAI,QAAQ,CAAI,CAAA,EAAA;AACd,IAAA,OAAA;AAAA,GACF;AAGA,EAAM,MAAA,EAAE,EAAG,EAAA,GAAI,qBAAsB,CAAA,GAAA,CAAA,CAAA;AAErC,EAAA,IAAI,CAAC,EAAI,EAAA;AACP,IAAA,OAAA;AAAA,GACF;AAGA,EAAc,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,EAAA,CAAA,CAAA;AAGd,EAAM,MAAA,aAAA,GAAgB,GAAG,EAAG,CAAA,YAAA,CAAA;AAC5B,EAAA,MAAM,WAAc,GAAA,QAAA,CAAS,KAAM,CAAA,GAAG,CAAE,CAAA,CAAA,CAAA,CAAA;AAGxC,EAAA,IAAI,gBAAgB,EAAK,CAAA,EAAA;AAEvB,IAAA,qBAAA,CAAsB,GAAK,CAAA,CAAA,EAAA,CAAG,SAAU,CAAA,KAAA,CAAM,KAAK,OAAU,GAAA,KAAA,CAAA;AAE7D,IAAA,OAAO,eAAgB,CAAA,EAAA,CAAA,CAAA;AAAA,GACzB;AAGA,EAAc,aAAA,CAAA,QAAA,CAAA,CAAU,MAAO,CAAA,GAAA,EAAK,CAAC,CAAA,CAAA;AAErC,EAAM,MAAA,GAAA,GAAM,cAAc,QAAU,CAAA,CAAA,MAAA,CAAA;AAEpC,EAAA,IAAI,MAAM,CAAG,EAAA;AACX,IAAA,OAAA;AAAA,GACF;AAGA,EAAA,KAAA,IAAS,CAAI,GAAA,GAAA,EAAK,CAAI,GAAA,GAAA,EAAK,CAAK,EAAA,EAAA;AAE9B,IAAA,MAAM,EAAE,EAAA,EAAI,SAAU,EAAA,GAAI,sBAAsB,CAAG,CAAA,CAAA,EAAA,CAAA;AACnD,IAAA,MAAM,MAAM,QAAS,CAAA,EAAA,CAAG,MAAM,WAAc,CAAA,EAAA,EAAE,IAAI,aAAgB,GAAA,QAAA,CAAA;AAGlE,IAAA,SAAA,CAAU,MAAM,MAAS,GAAA,GAAA,CAAA;AAAA,GAC3B;AACF,CAAA,CAAA;AAGA,MAAM,WAAW,MAAY;AAE3B,EAAA,KAAA,MAAW,OAAO,aAAe,EAAA;AAC/B,IAAA,MAAM,wBAAwB,aAAc,CAAA,GAAA,CAAA,CAAA;AAE5C,IAAA,qBAAA,CAAsB,OAAQ,CAAA,CAAC,EAAE,EAAA,EAAS,KAAA;AAExC,MAAG,EAAA,CAAA,SAAA,CAAU,KAAM,CAAA,IAAA,CAAK,OAAU,GAAA,KAAA,CAAA;AAAA,KACnC,CAAA,CAAA;AAAA,GACH;AACF,CAAA,CAAA;AAEA,MAAM,YAAe,GAAA;AAAA,EACnB,KAAK,OAAkB,EAAA;AACrB,IAAO,OAAA,MAAA,CAAO,UAAU,OAAO,CAAA,CAAA;AAAA,GACjC;AAAA,EACA,KAAK,OAAkB,EAAA;AACrB,IAAO,OAAA,MAAA,CAAO,QAAQ,OAAO,CAAA,CAAA;AAAA,GAC/B;AAAA,EACA,QAAQ,OAAkB,EAAA;AACxB,IAAO,OAAA,MAAA,CAAO,WAAW,OAAO,CAAA,CAAA;AAAA,GAClC;AAAA,EACA,QAAQ,OAAkB,EAAA;AACxB,IAAO,OAAA,MAAA,CAAO,WAAW,OAAO,CAAA,CAAA;AAAA,GAClC;AAAA,EACA,MAAM,OAAkB,EAAA;AACtB,IAAO,OAAA,MAAA,CAAO,SAAS,OAAO,CAAA,CAAA;AAAA,GAChC;AAAA,EAEA,OAAO,OAAkB,EAAA;AAEvB,IAAA,IAAI,QAAQ,MAAQ,EAAA;AAClB,MAAA,MAAA,GAAS,OAAQ,CAAA,MAAA,CAAA;AAAA,KACnB;AAGA,IAAI,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACxB,MAAA,eAAA,GAAkB,OAAQ,CAAA,QAAA,CAAA;AAAA,KAC5B;AAAA,GACF;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AACF;;;;"}