【Vue】Vue 判断插槽内容是否加载完成

需求

现有一个 ArticleList 组件，里面有个插槽用来展示各个文章项目，还有个分页组件用来获取文章分页数据。文章项目的数据通过网络请求获取到然后传入 ArticleList，这期间会有一段时间的空白。为了提升用户体验，现在需要在这段时间显示一个占位内容。

ArticleList.vue 的示意代码：

<template><div><slot></slot><my-pagination /></div>
</template>

分析

如果没有分页组件，可以直接用默认插槽的占位显示占位内容，有分页组件的话，就需要判断插槽的子元素是否存在，如果不存在则显示另一端内容。

实现

这里用 Vue2 的 Options API 作为演示，Vue3 的 setup 里面可以通过结构 setup 的第二个参数获取 $slots 对象，script setup 中可以使用 useSlots() 获取 $slots 对象。

通过 $slots.插槽名() 可以获取到插槽的 VNode 列表，在这里我们获取默认插槽，即 $slots.default()，通过判断这个 VNode 列表中的 children 项是否有内容即可实现判断插槽内容是否加载完成。

<template><div v-if="isDefaultSlotLoaded"><slot></slot><my-pagination /></div><div v-else><!-- 显示占位内容 --><p>Now Loading...</p></div>
</template><script>
export default {computed: {isDefaultSlotLoaded() {return this.$slots.default()[0].children.length > 0}}
}
</script>

【Vue】Vue 判断插槽内容是否加载完成相关推荐

vue项目结构及启动文件加载过程分析
vue项目结构及启动文件加载过程分析一.vue项目结构 1.导入项目准备好开发工具Visual Studio Code,导入生成的项目案例.我的Vue版本: 2.项目目录及文件说明 2.1.项目主 ...
上拉加载_如何用Vue + Mint UI实现上拉加载更多
引言: 上拉加载更多在移动端不论是在 app 里面还是在页面中都是必不可少的,以下是 mint-ui 中上拉加载更多的总结. 一.在项目中使用 mint-ui 需要先安装查看官网 (1)安装:npm ...
vue高德、谷歌地图动态加载
vue高德.谷歌地图动态加载前言引入地图资源页面使用完整map.js 前言因为我们这个项目,做的是国际化项目,考虑的是,在国内使用高德地图,在国外使用谷歌地图,所以在这里做了个动态引入地图, ...
html5 循环加载图片,解决vue的 v-for 循环中图片加载路径问题
先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要 ...
html5 语音包,在vue中使用vue-i18n按需加载语言包
1.新建目录结构如下: . ├── App.vue ├── assets │ └── langs │ ├── en │ │ └── index.js │ ├── zh │ │ └── inde ...
解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题
解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题参考文章: (1)解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题 (2)https://www.cnblogs.com/jiah ...
vue的v-for循环中图片加载路径问题
vue的v-for循环中图片加载路径问题产品要求要求图片和它的名字一一对应, vue中的img的src可以动态绑定到一个变量上 <template> <div><ul ...
Vue之鼠标悬停显示页面加载时间
效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
vue项目实现路由按需加载(路由懒加载)的3种方式
vue项目实现路由按需加载(路由懒加载)的3种方式 1.vue异步组件 2.es提案的import() 3.webpack的require,ensur *1.vue异步组件技术 ==== 异步加载 v ...

【Vue】Vue 判断插槽内容是否加载完成

需求

分析

实现

【Vue】Vue 判断插槽内容是否加载完成相关推荐

最新文章

热门文章