求解vue3,nextTick不顶用还得setTimeout老同志

529 阅读1分钟

需求是要写一个渲染函数,函数式调用抽屉控件。使用者调用后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()]
      )
  },
}