Resuelva el problema de que el efecto deslizante del marco emergente desaparece bajo la acción de v-if

Descripción del problema

Al establecer requisitos, debe encapsular un componente emergente. El requisito es que cuando ingrese la página, debe solicitar la interfaz para obtener el contenido de la ventana emergente y luego mostrar el marco de la ventana emergente. Sin embargo, hay un problema aquí. , Debido a que la ventana emergente es un componente y la interfaz es una operación asincrónica. Sí, cuando entra el componente principal, el componente se introduce directamente. En este momento, es muy probable que la interfaz no haya regresado, por lo que en realidad no hay contenido en el componente, pero el componente ya se ha mostrado, por lo que el efecto es en realidad un error. Para resolver este problema, juzgué la ventana emergente usando v-if. Si los datos devueltos por la interfaz no se reciben correctamente, no se mostrará. Después de recibirlo, se introducirá el componente, pero si se usa, será un efecto relativamente contundente. Después de todo, si es solo para juzgar si se muestra o no, no hay animación de transición, este es el problema. Hablaré de hoy. Este problema es aplicable a cualquier situación en la que hay un efecto deslizante pero no hay efecto deslizante debido a v-if.

Solución 1

La ventana emergente en sí tiene un efecto deslizante, por lo que la primera solución es que no juzgamos el v-if del componente en sí, sino que agregamos una etiqueta de elemento de templo que no se representa en la capa exterior, que no se muestra de forma predeterminada, y la ventana emergente inside todavía se usa normalmente Mostrar jueces y pantallas. Cuando se obtienen los datos, el estado de la plantilla se cambia directamente a verdadero. Cuando se cierra, solo se cambia el valor booleano del show del componente y el valor booleano de la plantilla no se utiliza.

• El código se muestra a continuación.

<!--
  * @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>

Solución 2

Utilice el método de carga asincrónica de componentes para operar, es decir, el método defineAsyncComponent en vue. Cuando juzgamos que los datos de la interfaz han regresado, podemos cargar el componente, pero este método no es compatible con uniapp, por lo que si es pequeño El Las palabras utilizadas en el programa no son aplicables y el primer método es más adecuado para programas pequeños.

Solución 3

Agregue el efecto correspondiente a CSS agregando el nombre a través de la transición, pero esto tiene algunos errores, específicamente porque rara vez lo uso, así que no comentaré aquí, personalmente no recomiendo esta solución. página web oficial