diff --git a/packages/plugins/fullscreen/index.js b/packages/plugins/fullscreen/index.js new file mode 100644 index 0000000..e69de29 diff --git a/packages/plugins/loading/index.js b/packages/plugins/loading/index.js index e69de29..446c861 100644 --- a/packages/plugins/loading/index.js +++ b/packages/plugins/loading/index.js @@ -0,0 +1,41 @@ +import { h, Transition, onMounted } from 'vue' +import { Spin } from 'ant-design-vue' +import { createReactivePlugin, createGlobalNode, createChildApp } from '../../utils/create' + +let uid = 0 + +const defaults = { + group: '__default_group__', + delay: 0 +} + +const Plugin = createReactivePlugin({ + isActive: false +}, { + show (options) { + Plugin.isActive = true + const el = createGlobalNode('pro-loading') + const app = createChildApp({ + setup () { + function onAfterLeave () { + + } + + return () => { + const props = { + onAfterLeave: onAfterLeave + } + return h(Transition, props, Spin) + } + } + }) + }, + hide () { + + }, + install () { + + } +}) + +export default Plugin diff --git a/packages/plugins/screen/index.js b/packages/plugins/screen/index.js index 25096ea..4cd0801 100644 --- a/packages/plugins/screen/index.js +++ b/packages/plugins/screen/index.js @@ -3,13 +3,12 @@ import { addClass, getWindowSize, removeClass } from '../../utils/dom' import { addEvt } from '../../utils/event' import { debounce, pick } from 'lodash-es' -const SIZE_LIST = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] - const BaseKey = Symbol('Screen') export function createScreen (options) { const { sizes = {}, delay = 16, classes } = options || {} + const SIZE_LIST = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] const baseSizes = { xs: 0, sm: 576, diff --git a/packages/utils/create.js b/packages/utils/create.js new file mode 100644 index 0000000..4f35eea --- /dev/null +++ b/packages/utils/create.js @@ -0,0 +1,50 @@ +import { createApp, reactive } from 'vue' +import { omit } from 'lodash-es' + +const bodyNode = document.body +const nodes = [] + +export function createChildApp (rootComponent, parentApp) { + const appContext = omit(parentApp._context, ['reload']) + + const app = createApp(rootComponent) + app.config.globalProperties = parentApp.config.globalProperties + + Object.assign(app._context, appContext) + return app +} + +export function createGlobalNode (id, className) { + const el = document.createElement('div') + if (className !== undefined) { + el.className = className + } + el.id = id + bodyNode.appendChild(el) + nodes.push(el) + return el +} + +export function removeGlobalNode (el) { + const index = nodes.indexOf(el) + nodes.splice(index, 1) + el.remove() +} + +export function createReactivePlugin (state, plugin) { + const pluginState = reactive(state) + + for (const name in pluginState) { + Object.defineProperty(plugin, name, { + enumerable: true, + get () { + return pluginState[name] + }, + set (value) { + pluginState[name] = value + } + }) + } + + return plugin +}