Vue自定义指令- v-loading封装

最新推荐文章于 2024-08-19 11:25:56 发布
最新推荐文章于 2024-08-19 11:25:56 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Forever_Hopeful/article/details/132471253
版权
本文介绍了Vue自定义指令的概念和两种注册方式，并详细讲解了如何封装一个v-loading指令，用于实现数据请求时的加载效果。通过自定义指令的值传递参数，动态控制loading状态的开启和关闭，利用CSS实现蒙层效果。
摘要由CSDN通过智能技术生成

Vue自定义指令- v-loading封装

文章目录

01-自定义指令

什么是自定义指令？

  • 自定义指令：自己定义的指令，可以封装一些dom操作，扩展额外功能。

1、例如：完成自动聚焦的功能：

自定义指令的两种注册语法：
  • 全局注册-语法：
// 全局注册指令
Vue.directive('focus',{
   
  // inserted会在 指令所在的元素，被插入到页面中的时候触发
了解本专栏 订阅专栏 解锁全文 超级会员免费看
脱发使我稳重
关注
专栏目录
订阅专栏
基于antdesign的vuejsloading组件
08-12
1. **Vue.js基础知识**：理解Vue.js的核心概念，如Vue实例、组件、指令、数据绑定、计算属性、生命周期钩子等。这是使用任何Vue插件的基础。 2. **Ant Design Vue**：熟悉Ant Design Vue的组件体系，包括其设计原则...
【Vue】自定义指令-v-loading指令的封装
qq_39921135的博客
06-06 1262
使用伪元素添加的好处就是添加和移除会方便一些，如果准备dom元素，则添加和移除需要把这个节点添加和移除。// 接口地址：http://hmajax.itheima.net/api/news。2.开启关闭 loading状态（添加移除蒙层），本质只需要添加移除类即可。实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于。1.准备一个 loading类，通过伪元素定位，设置宽高，实现蒙层。添加或移除类名，实现loading蒙层的添加移除。数据请求中，开启loading状态，添加蒙层。
封装v-loading全局自定义指令
hmxs_hmbb的博客
11-08 4395
v-loading自定义指令封装
自定义v-loading指令
最新发布
Kylincsg的博客
08-19 476
在使用vue框架中，自定义了一系列的指令，如：v-loading，v-html、v-for等，但有些展示性的指令样式能修改的局限性比较大，所以自己可以自定义一个！代码持续更新，若有更好的方法，欢迎各位道友评论区留言探讨！背景颜色可以在css中自定义，我用的是黑色透明的，用的是白色透明的，根据个人喜好来。没有华丽的文采，直接上代码哈。中(该文件见之前自定义。
vue自定义指令v-loading（vue2和vue3)
热门推荐
weixin_58031521的博客
02-16 1万+
vue实现自定义指令v-loading（包含vue2及vue3的写法）
记录--Vue自定义指令实现加载中效果v-load（不使用Vue.extend）
林恒的博客
03-09 922
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 网站效果演示：ashuai.work:8888/#/myLoad GitHub仓库地址代码：github.com/shuirongshu… 加载中思路分析 实现加载中效果，一般有两种方式: 第一种是：搞一个load组件，然后使用Vue.extend()方法去继承一个加载组件去使用，比如笔者的这篇文章：juejin.c...
Vue自定义指令（含常用8种指令封装）
qq_22187895的专栏
02-24 831
基本概念一、自定义指令是用来操作dom的，尽管vue推崇数据驱动试图的理念，但并非所又情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅仅可用于定义任何dom操作，并且是可以复用的‘比如谷歌图片的加载做的非常优雅，在图片未完成加载前，用随机的背景色占位背景图片加载晚成后才直接渲染出来。用自定义只能怪可以非常方便的实现这个功能。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。
vue中加全局loading并添加自定义加载语
weixin_37582804的博客
04-02 3542
首先在模板页最外层标签添加绑定 < template v-loading=“loading”> 导入 import {Loading} from ‘element-ui’ 定义字段初始值： loading: false 加载调用 startLoading() { this.loading =Loading.service({ lock: true, // text: ‘加载中倒计时：...
vue-typescript-template:Vue + TypeScript + Elment-ui + Axios + WebSocket + animate.css + mockjs 的 Vue 项目模版
05-04
常见指令的封装（动画指令、图片懒加载、复制指令等） Web Workers 的引入（开启一个线程、分担主线程的计算压力、在处理特别耗时的任务中特别有用） WebSocket 的嵌入（双向通讯） 多页面配置 Element-ui(表格、...
vue2,vue-cli3 PC版项目模板，公司项目如有需要可直接套用此模板，下载即可运行，无需另外下载。可先查看本人所传视频。
09-22
上传组件封装，通用弹窗表格封装，表单案例，表格分页器，echarts常用图表类型封装，echarts地图案例，twaver代码封装，瓦片图使用案例，使用promise二次封装axios兼容所有请求格式，模块加载loading封装，...
vue-skeleton
05-19
4. **条件渲染**：Vue 的 `v-if` 和 `v-show` 指令用于控制元素的显示和隐藏，这对于实现骨架屏至关重要。当数据未加载时，我们展示骨架屏；一旦数据就绪，立即切换至实际内容。 5. **异步数据获取**：在实际项目中...
vue实现自定义H5视频播放器的方法步骤
10-16
通过以上步骤，我们可以创建一个功能完善的Vue自定义H5视频播放器。在实际开发中，还可以根据项目需求添加更多的功能，比如字幕支持、倍速播放、视频截图等。同时，考虑到性能和用户体验，需要注意视频资源的优化，...
vue 全局自定义指令(loading)
weixiao_ni的博客
03-12 2481
vue 封装自定义指令 (loading) 注册 在 main.js 文件中 导入封装好的 loading 方法对象 使用 Vue.directive('loading', loadingDirective) 注册全局指令 封装 Loading 指令 import vue from 'vue' import loading from './loading.vue' const loadingRelative = 'loading-relative' const loadingDirectiv
vue3+elementUI 动态修改Loading中提示文字
weixin_45658815的博客
08-23 3491
使用elementUI加载组件loading时 需要将循环中的值动态展示在加载遮罩层上，发现了element-loading-text属性可以自定义提示文字，于是写出如下代码。中的值却是一直在变化的，可是element-loading-text中似乎无法检测到，看了网上几篇文章似乎写的不是很详细，第一次用看得有点懵懵的，解决之后在此记录一下。结果发现loadingText的值并不会动态变化，但是处于。
vue.js中 v-loading指令和封装
qq_42087317的博客
04-07 1098
在上面的示例中，v-loading 指令绑定了一个名为 loading 的变量，该变量控制着加载状态的显示与隐藏。当 loading 的值为 true 时，加载状态会显示，当值为 false 时，加载状态会隐藏。需要注意的是，v-loading 指令本身并不是 Vue.js 的内置指令，而是根据业务需求自行实现的一个自定义指令。在上述代码中，我们通过 v-loading 指令控制了加载状态的显示和隐藏。通常情况下，我们会将加载状态的显示和隐藏封装成一个指令，以便在需要的地方进行复用。
element的遮罩层v-loading，隐藏上面的文字和图标，添加自定义内容
qq_42376171的博客
05-05 3632
element的遮罩层v-loading，隐藏上面的文字和图标，添加自定义内容 之前有个需求是想要一个遮罩层，项目组件用的是element，想用v-loading，但是上面的图标和文字格式不是我想要的 效果图 思路如下： 1）隐藏自带的文字和图标 2）设置一个div，把该div的图层设置得比v-loading的层级高 页面代码：（把 element-loading-text和element-loading-spinner都设置为空） <span class="dingYue" v-show="loa
Vue自定义指令钩子函数 Vue.use用法
weixin_45746923的博客
05-19 546
钩子函数 指令定义函数提供了几个钩子函数（可选）： bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。 update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind:
vue命令式组件封装以及使用
interest_ing_的博客
07-16 1392
这是一个类似于element弹窗组件的命令式组件封装以及使用，还有js文件里书写html和css。
手写 vue 自定义指令(directive) v-loading 加载,项目实战
酱子
10-11 2335
手写 vue 自定义指令 v-loading 目标效果： 在vue项目的标签里面使用 v-loading="true" ，如同element-ui里面使用v-loading一样 会展示loading 效果。 在这里我做两个laoding效果： 一个全屏的loading效果，用于进入页面的时候使用loaidng 一个局部的load 效果，用户分页或者加载部分内容的时候load效果 目录结构 > 多余的文件夹就不展示了 > loading里面的5个文件创建好，把代码复制进去，然后在ma
vue-lazyload 再封装自定义图片指令
05-18
接下来，我们可以封装一个自定义指令，来简化 `v-lazy` 的使用。 ```js import Vue from 'vue' import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, { loading: require('@/assets/loading.gif') }) ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

脱发使我稳重

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值