问题描述
做需求的时候需要封装一个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>解决方案2
使用组件异步加载的方式进行操作，也就是vue中的defineAsyncComponent方法，当我们判断接口数据已经返回的时候，进行加载该组件即可，但是这个方法在uniapp中是不被支持的，所以如果在小程序中使用的话是不适用的，小程序中使用第一个方法比较合适。
解决方案3
通过transition 添加name的方式进行css 添加对应的效果，但是这个有一些bug，具体的因为我很少用，所以这里就不做评论，个人不太推荐这个方案。
