最近一段时间,在做h5的移动端项目,UI组件库使用的vant,vant组件中的loading实在难用,无法包裹某个块进行loading,也无法对非组件的标签进行loading,所以想着自定义写个指令,挂载全局,通过v-loading的方式实现控制加载,好了,话不多说,vue3的自定义指令实现,和vue2还是有区别的,下面进入正题 首先,写个loading组件: ...
自定义指令是Vue提供的一种强大工具,允许我们在Vue模板中附加自定义行为。通过自定义指令,我们可以轻松地创建可复用的、可配置的加载效果组件,并将其应用于任何需要显示加载状态的元素上。 演示效果图 新建index.vue文件 在components目录下新建loading目录,并在loading目录下新建index.vue文件 <template> 正在快马加...
在这个示例中,当按钮被点击时,showLoading会被设置为true,这将触发v-loading指令,并显示Loading组件。你可以根据需要自定义Loading组件的显示内容和样式。
v-loading的指令封装 二、自定义指令 1.指令介绍 内置指令:v-html、v-if、v-bind、v-on… 这都是Vue给咱们内置的一些指令,可以直接使用 自定义指令:同时Vue也支持让开发者,自己注册一些指令。这些指令被称为自定义指令 每个指令都有自己各自独立的功能 2.自定义指令 概念:自己定义的指令,可以封装一些DOM操作,...
以下是一些常用的Vue3自定义指令: 1. v-click-outside:该指令可以监听点击事件,并且判断点击的元素是否在指定的区域内。 2. v-loading:该指令可以在需要加载的元素上添加一个遮罩层或者一个loading图标,以提醒用户正在加载。 3. v-permission:该指令可以根据用户的权限控制某些元素是否显示。比如,只有管理员才能...
自定义指令: 指令封装: create-loading-like-directive.js import { createApp }from'vue'import { addClass, removeClass }from'@/assets/js/dom'constrelativeCls ='g-relative'exportdefaultfunction createLoadingLikeDirective(Comp) {return{ mounted(el, binding) { ...
接下来我们封装自定义指令。 我们的思路是: mounted 阶段,如果是 true,那么渲染组件,否则什么都不做。 update 阶段,如果 true 则重新渲染组件,如果 false 则渲染 vnode 为了可以应对更多场景,我们期望可以配置加载中的提示信息,不配置使用默认值,如果是 false ,那么仅展示 loading 图。所以参数类型如下: ...
vue3 封装loading指令 好的,下面为你提供基于Vue3封装 Loading指令的详细步骤: 1. 创建一个Loading组件,其中包含加载效果和提示文字。 2. 在模板中使用`v-loading`指令,将其值设置为一个布尔值,即可控制加载效果的显示和隐藏。 下面是具体实现代码: ```html <template> <!-- 在此处添加你的加载效果和提示文...
3 自定义指令-v-loading指令的封装 1.场景 实际开发过程中,发送请求需要时间,在请求的数据未回来时,页面会处于空白状态=> 用户体验不好 2.需求 封装一个 v-loading 指令,实现加载中的效果 3.分析 1.本质 loading效果就是一个蒙层,盖在了盒子上