refactor: unify teleport

This commit is contained in:
07akioni 2020-10-07 14:31:51 +08:00
parent fe8b38eb42
commit 2216566210
14 changed files with 69 additions and 77 deletions

View File

@ -1,2 +1,4 @@
export { default as WindowResizeObserver } from './window-resize-observer'
export { default as ResizeObserver } from './resize-observer'
export { default as Teleport } from './teleport'
export { default as LazyTeleport } from './lazy-teleport'

View File

@ -0,0 +1 @@
export { default } from './src/Teleport.vue'

View File

@ -0,0 +1,34 @@
<template>
<teleport
:to="mergedTo"
:disabled="disabled"
>
<slot />
</teleport>
</template>
<script>
import { computed } from 'vue'
export default {
name: 'BaseTeleport',
props: {
to: {
type: [String, Object],
default: undefined
},
disabled: {
type: Boolean,
default: false
}
},
setup (props) {
return {
mergedTo: computed(() => {
const { to } = props
return to ?? 'body'
})
}
}
}
</script>

View File

@ -35,8 +35,6 @@ export default {
children: item.childItems ? this.createItems(item.childItems) : undefined,
group: item.group,
onClick: !(item.group && item.childItems) ? () => {
console.log('item click')
console.log(this.$router, item.path)
if (this.$router && item.path) {
Promise.resolve(
this.$router.push(item.path)

View File

@ -1,15 +0,0 @@
export default function (Vue) {
if (!Vue.options.components.PropsUnsafeTransition) {
const PropsUnsafeTransition = { ...(Vue.options.components.Transition) }
PropsUnsafeTransition.name = 'PropsUnsafeTransition'
PropsUnsafeTransition.props = {
name: {
validator: () => true
},
appear: {
validator: () => true
}
}
Vue.component(PropsUnsafeTransition.name, PropsUnsafeTransition)
}
}

View File

@ -1,33 +0,0 @@
function getComponentNameOf (vNode) {
/**
* Functional component
*/
if (vNode.fnOptions && vNode.fnOptions.name) {
return vNode.fnOptions.name
}
if (
vNode.componentOptions &&
vNode.componentOptions.Ctor &&
vNode.componentOptions.Ctor.extendOptions &&
vNode.componentOptions.Ctor.extendOptions.name
) {
return vNode.componentOptions.Ctor.extendOptions.name
}
return null
}
function getDefaultSlotOf (componentInstance) {
return getSlotOf(componentInstance, 'default')
}
function getSlotOf (componentInstance, slotName) {
if (componentInstance.$slots[slotName]) return componentInstance.$slots[slotName] || []
if (componentInstance.$slots[slotName]) return componentInstance.$slots[slotName]() || []
return []
}
export {
getSlotOf,
getDefaultSlotOf,
getComponentNameOf
}

View File

@ -1 +1,2 @@
export { warn } from './warn'
export { warn, warnOnce } from './warn'
export { debug } from './debug'

View File

@ -88,7 +88,7 @@ export default {
},
to: {
type: [String, Object],
default: 'body'
default: undefined
},
visibilityHeight: {
type: Number,

View File

@ -7,7 +7,7 @@ export default {
props: {
to: {
type: [String, Object],
default: 'body'
default: undefined
}
},
provide () {

View File

@ -109,7 +109,7 @@ export default {
},
to: {
type: [String, Object],
default: 'body'
default: undefined
},
displayDirective: {
validator (value) {

View File

@ -1,5 +1,6 @@
import { Fragment, Teleport, h } from 'vue'
import { Fragment, h, ref } from 'vue'
import { useIsMounted } from '../../_utils/composition'
import { Teleport } from '../../_base'
import NLoadingBar from './LoadingBar.vue'
export default {
@ -17,49 +18,50 @@ export default {
props: {
to: {
type: [String, Object],
default: 'body'
default: undefined
}
},
setup () {
return {
isMounted: useIsMounted()
isMounted: useIsMounted(),
loadingBarRef: ref(null)
}
},
methods: {
start () {
if (this.isMounted) {
this.$refs.loadingBar.start()
this.loadingBarRef.start()
} else {
this.$nextTick(() => {
this.$refs.loadingBar.start()
this.loadingBarRef.start()
})
}
},
error () {
if (this.isMounted) {
this.$refs.loadingBar.error()
this.loadingBarRef.error()
} else {
this.$nextTick(() => {
this.$refs.loadingBar.error()
this.loadingBarRef.error()
})
}
},
finish () {
if (this.isMounted) {
this.$refs.loadingBar.finish()
this.loadingBarRef.finish()
} else {
this.$nextTick(() => {
this.$refs.loadingBar.finish()
this.loadingBarRef.finish()
})
}
},
update (options) {
const { percent } = options
if (this.isMounted) {
this.$refs.loadingBar.update(percent)
this.loadingBarRef.update(percent)
} else {
this.$nextTick(() => {
this.$refs.loadingBar.update(percent)
this.loadingBarRef.update(percent)
})
}
}
@ -68,11 +70,11 @@ export default {
return h(Fragment, null, [
h(Teleport, {
to: this.to
}, [
h(NLoadingBar, {
ref: 'loadingBar'
}, {
default: () => h(NLoadingBar, {
ref: 'loadingBarRef'
})
]),
}),
this.$slots.default()
])
}

View File

@ -1,5 +1,6 @@
import { Fragment, Teleport, ref, h, reactive } from 'vue'
import { Fragment, ref, h, reactive } from 'vue'
import { createId, omit } from '../../_utils/vue'
import { Teleport } from '../../_base'
import MessageEnvironment from './MessageEnvironment.js'
export default {
@ -7,7 +8,7 @@ export default {
props: {
to: {
type: [String, Object],
default: 'body'
default: undefined
}
},
provide () {

View File

@ -39,7 +39,7 @@ export default {
},
to: {
type: [String, Object],
default: 'body'
default: undefined
},
displayDirective: {
validator (value) {

View File

@ -1,5 +1,6 @@
import { Fragment, h, Teleport, reactive, ref } from 'vue'
import { Fragment, h, reactive, ref } from 'vue'
import { createId, omit } from '../../_utils/vue'
import { Teleport } from '../../_base'
import NotificationContainer from './NotificationContainer.vue'
import NotificationEnvironment from './NotificationEnvironment'
@ -19,7 +20,7 @@ export default {
props: {
to: {
type: [String, Object],
default: 'body'
default: undefined
},
scrollable: {
type: Boolean,
@ -70,8 +71,8 @@ export default {
return h(Fragment, null, [
h(Teleport, {
to: this.to
}, [
this.notificationList.length ? h(NotificationContainer, {
}, {
default: () => this.notificationList.length ? h(NotificationContainer, {
scrollable: this.scrollable
}, {
default: () => {
@ -84,7 +85,7 @@ export default {
)
}
}) : null
]),
}),
this.$slots.default()
])
}