解决v-if作用下popup弹框滑动效果消失的问题

问题描述

做需求的时候需要封装一个popup的组件，需求是页面进来的时候需要请求接口获取到popup的内容，然后进行展示弹框，但是这里就有一个问题，因为popup是一个组件，接口又是异步操作的，父组件进来的时候就直接引入了该组件，这个时候很大可能接口还没有返回，所以组件里面其实是没有任何内容的，但是组件已经展示出来了，所以效果上其实是一个bug，为了解决这个问题，我就将popup使用v-if 进行了判断，如果接口的返回数据没有成功接收到之前是不展示的，接收到之后引入该组件，但是使用if的话就是比较生硬的效果了，毕竟if只是判断要不要显示，是没有任何的过渡动画的，这就是今天要说的问题 该问题适用于任何本身存在滑动效果但是因为v-if导致没有任何滑动效果的情况

解决方案1

POPUP本身是有滑动效果的，所以第一种方案是我们不进行对组件本身v-if判断，而是在外层添加一个templete非渲染元素标签，默认他是不显示的，里面popup还是正常的使用show进行判断展示，当数据拿到之后直接将template的状态改为true，关闭的时候只改变组件的show的boolean的值，而template的boolean值不进行操作

代码如下

<!--* @Description: 投保须知弹框* @author:clearlove* @createTime: 2023-08-16 14:50:29-->
<template><view><u-popup :show="show" @close="close" :round="30" @open="open"><view class="content"><view class="content_title"><view class="content_title_image"><image src="@/assets/image/insure/logo.png" mode="widthFix"></image></view><view class="content_title_company"> 由{{ insureName }}提供保险经纪服务，{{ tenantName }}承保 </view></view><view class="content_substance"><Notes></Notes></view><view class="content_btn" @click="$emit('controlPopup')"> 我知道了 </view></view></u-popup></view>
</template><script setup>
import { useCommonStore } from '@/stores/common.js'
const userStore = useCommonStore()
import Notes from './Notes.vue'
const props = defineProps({show: {type: Boolean,require: true,default: () => false}
})
const close = () => {}
const open = () => {}
const { insureName, tenantName } = userStore.insurePopupInfos // TODO: 获取服务公司和承保公司
</script><style lang="scss" scoped>
@import './InsuranceNotice.scss';
</style>

<view v-if="controllIsShowNotice"><InsuranceNotice :show="insuranceNoticeShow" @controlPopup="onControlInsuranceNoticePopup"></InsuranceNotice>
</view>