需求是要写一个渲染函数,函数式调用抽屉控件。使用者调用后mounted后立即显示抽屉组件。 问题是: 1、onMounted 用nextTick 则控件本身的动画效果没了,界面还会卡顿和没有使用nextTick效果一样。 2、onMounted 用setTimeout 哪怕只是1ms,动画效果都是完整的。
求解-_-
const CustomDrawer = {
props: {
title: {
type: String,
default: '',
},
width: {
type: String,
default: '500px',
},
callback: {
type: Function,
},
},
setup(props, { slots }) {
const visible = ref(false)
onMounted(() => {
/*动画正常*/
setTimeout(() => {
visible.value = true
}, 1)
/* 无动画、卡顿 */
// nextTick(() => {
// visible.value = true
// })
/* 无动画、卡顿 */
// visible.value = true
})
return () =>
h(
TDrawer,
{
header: props.title,
visible: visible.value,
size: props.width,
cancelBtn: null,
confirmBtn: null,
onClose() {
visible.value = false
},
onCloseBtnClick() {
visible.value = false
},
},
() => [slots.default()]
)
},
}