Nuxt/packages/vue-app/template/components/nuxt-child.js

114 lines
2.6 KiB
JavaScript
Raw Normal View History

2018-10-24 13:46:06 +00:00
<%= isTest ? '// @vue/component' : '' %>
2016-12-16 16:45:47 +00:00
export default {
name: 'NuxtChild',
2016-12-16 16:45:47 +00:00
functional: true,
2018-10-24 13:46:06 +00:00
props: {
nuxtChildKey: {
type: String,
default: ''
},
keepAlive: Boolean,
2019-01-06 07:56:59 +00:00
keepAliveProps: {
type: Object,
default: undefined
}
2018-10-24 13:46:06 +00:00
},
render(h, { parent, data, props }) {
2016-12-16 16:45:47 +00:00
data.nuxtChild = true
const _parent = parent
const transitions = parent.<%= globals.nuxt %>.nuxt.transitions
const defaultTransition = parent.<%= globals.nuxt %>.nuxt.defaultTransition
2017-11-06 17:30:15 +00:00
2016-12-16 16:45:47 +00:00
let depth = 0
while (parent) {
if (parent.$vnode && parent.$vnode.data.nuxtChild) {
depth++
}
parent = parent.$parent
}
data.nuxtChildDepth = depth
const transition = transitions[depth] || defaultTransition
2018-10-24 13:46:06 +00:00
const transitionProps = {}
2016-12-16 16:45:47 +00:00
transitionsKeys.forEach((key) => {
if (typeof transition[key] !== 'undefined') {
transitionProps[key] = transition[key]
}
})
2018-10-24 13:46:06 +00:00
const listeners = {}
2016-12-16 16:45:47 +00:00
listenersKeys.forEach((key) => {
if (typeof transition[key] === 'function') {
listeners[key] = transition[key].bind(_parent)
2016-12-16 16:45:47 +00:00
}
})
// Add triggerScroll event on beforeEnter (fix #1376)
const beforeEnter = listeners.beforeEnter
listeners.beforeEnter = (el) => {
// Ensure to trigger scroll event after calling scrollBehavior
window.<%= globals.nuxt %>.$nextTick(() => {
window.<%= globals.nuxt %>.$emit('triggerScroll')
})
if (beforeEnter) {
return beforeEnter.call(_parent, el)
}
}
2017-09-08 10:42:00 +00:00
// make sure that leave is called asynchronous (fix #5703)
if (transition.css === false) {
const leave = listeners.leave
listeners.leave = (el, done) => {
if (leave) {
leave.call(_parent, el)
}
_parent.$nextTick(done)
}
}
let routerView = h('routerView', data)
2018-10-24 13:46:06 +00:00
if (props.keepAlive) {
routerView = h('keep-alive', { props: props.keepAliveProps }, [routerView])
}
2017-11-06 17:30:15 +00:00
return h('transition', {
2016-12-16 16:45:47 +00:00
props: transitionProps,
on: listeners
}, [routerView])
2016-12-16 16:45:47 +00:00
}
}
2017-10-07 14:59:36 +00:00
const transitionsKeys = [
'name',
'mode',
'appear',
'css',
'type',
'duration',
'enterClass',
'leaveClass',
'appearClass',
'enterActiveClass',
'enterActiveClass',
'leaveActiveClass',
'appearActiveClass',
'enterToClass',
'leaveToClass',
'appearToClass'
]
const listenersKeys = [
'beforeEnter',
'enter',
'afterEnter',
'enterCancelled',
'beforeLeave',
'leave',
'afterLeave',
'leaveCancelled',
'beforeAppear',
'appear',
'afterAppear',
'appearCancelled'
]