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

何处锦绣不灰堆

发布于 2023-10-18 17:42:10

1770

发布于 2023-10-18 17:42:10

问题描述

做需求的时候需要封装一个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>