临时工找工作网站做美缝,深圳最新消息,trswcm网站建设,网站建设立项说明书问题描述 做需求的时候需要封装一个popup的组件#xff0c;需求是页面进来的时候需要请求接口获取到popup的内容#xff0c;然后进行展示弹框#xff0c;但是这里就有一个问题#xff0c;因为popup是一个组件#xff0c;接口又是异步操作的#xff0c;父组件进来的时候就…问题描述 做需求的时候需要封装一个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--
templateviewu-popup :showshow closeclose :round30 openopenview classcontentview classcontent_titleview classcontent_title_imageimage src/assets/image/insure/logo.png modewidthFix/image/viewview classcontent_title_company 由{{ insureName }}提供保险经纪服务{{ tenantName }}承保 /view/viewview classcontent_substanceNotes/Notes/viewview classcontent_btn click$emit(controlPopup) 我知道了 /view/view/u-popup/view
/templatescript 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: 获取服务公司和承保公司
/scriptstyle langscss scoped
import ./InsuranceNotice.scss;
/style
view v-ifcontrollIsShowNoticeInsuranceNotice :showinsuranceNoticeShow controlPopuponControlInsuranceNoticePopup/InsuranceNotice
/view解决方案2 使用组件异步加载的方式进行操作也就是vue中的defineAsyncComponent方法当我们判断接口数据已经返回的时候进行加载该组件即可但是这个方法在uniapp中是不被支持的所以如果在小程序中使用的话是不适用的小程序中使用第一个方法比较合适。 解决方案3 通过transition 添加name的方式进行css 添加对应的效果但是这个有一些bug具体的因为我很少用所以这里就不做评论个人不太推荐这个方案。 官网
