mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-06 12:17:13 +08:00
refactor: unify teleport
This commit is contained in:
parent
fe8b38eb42
commit
2216566210
@ -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'
|
||||
|
1
src/_base/teleport/index.js
Normal file
1
src/_base/teleport/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './src/Teleport.vue'
|
34
src/_base/teleport/src/Teleport.vue
Normal file
34
src/_base/teleport/src/Teleport.vue
Normal 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>
|
@ -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)
|
||||
|
@ -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)
|
||||
}
|
||||
}
|
@ -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
|
||||
}
|
@ -1 +1,2 @@
|
||||
export { warn } from './warn'
|
||||
export { warn, warnOnce } from './warn'
|
||||
export { debug } from './debug'
|
||||
|
@ -88,7 +88,7 @@ export default {
|
||||
},
|
||||
to: {
|
||||
type: [String, Object],
|
||||
default: 'body'
|
||||
default: undefined
|
||||
},
|
||||
visibilityHeight: {
|
||||
type: Number,
|
||||
|
@ -7,7 +7,7 @@ export default {
|
||||
props: {
|
||||
to: {
|
||||
type: [String, Object],
|
||||
default: 'body'
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
provide () {
|
||||
|
@ -109,7 +109,7 @@ export default {
|
||||
},
|
||||
to: {
|
||||
type: [String, Object],
|
||||
default: 'body'
|
||||
default: undefined
|
||||
},
|
||||
displayDirective: {
|
||||
validator (value) {
|
||||
|
@ -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()
|
||||
])
|
||||
}
|
||||
|
@ -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 () {
|
||||
|
@ -39,7 +39,7 @@ export default {
|
||||
},
|
||||
to: {
|
||||
type: [String, Object],
|
||||
default: 'body'
|
||||
default: undefined
|
||||
},
|
||||
displayDirective: {
|
||||
validator (value) {
|
||||
|
@ -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()
|
||||
])
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user