vue自定义指令-加载指令v-loading和占位图指令v-showimg
2024-06-22 16:13:07
了解自定义指令的钩子函数
bind(){}：每当指令绑定到元素上的时候，就会立刻执行bind这个函数。只调用一次。
和css相关的操作，可以放在这个钩子函数中。inserted(){}：元素插入到DOM中的时候，会执行inserted函数。只调用一次。update(){}当数据跟新的时候，就会执行updated,可能会触发多次
可以通过 bing.value(新值) !== bing.oldValue(旧值) 来判断跟新的时候做的处理componentUpdated(){}指令所在组件的 VNode 及其子 VNode 全部更新后调用unbind(){}：只调用一次，指令与元素解绑时调用所有的钩子函数的参数都有以下：
el：指令所绑定的元素，可以用来直接操作 DOM
binding：一个对象
注册成为全局指令
//main.js文件中
Vue.directive("color", {钩子函数
})
需求描述
做一个加载动画
在我们请求接口的时候，显示加载动画。
当我们请求成功后，移除加载动画。
我们将会通过自定义指令 v-loading="isLoadFlag"来控制加载动画的开启和移除。
我们将会在页面中使用 ListCom.vue 列表组件。
加载动画组件 LoadingCom.vue。
自定义钩子 loading.js
列表组件 ListCom.vue
<template><div class="combox"><div v-for="(item,index) in listArr" :key="index">人物{{ item.name }}---- 描述 {{ item.dec}}</div></div>
</template>
<script> export default {props: {listArr: {type: Array,default: () => []}, },} </script>
加载动画组件 LoadingCom.vue
<template><div class="loadingcssbox"><img src="../../assets/loading.gif"/></div>
</template>
钩子函数 loading.js
import Vue from 'vue'
//引入加载动画组件
import LoadingCom from './LoadingCom.vue'
const loadingDirectiive = {inserted(el, bing) { // el ==>表示被绑定了指令的那个元素，这个el是一个原生的js对象。// bing ==> 指令相关的信息// 得到一个组件的构造函数const loadingCtor = Vue.extend(LoadingCom)// 得到实例loadingCompconst loadingComp = new loadingCtor()// 获取实例的htmlconst htmlLoading = loadingComp.$mount().$el// 将html放在el的实例上面去el.myHtml = htmlLoadingif (bing.value) { appendHtml(el)}},update(el, bing) { // bing.value 是v-loading绑定的那个值； true 要显示加载动画//新值 bing.value与旧值bing.oldValue是否相等if (bing.value !== bing.oldValue ) { bing.value ? appendHtml(el) : removeHtml(el)}}
}function appendHtml(el) { el.appendChild(el.myHtml)
}function removeHtml(el) { el.removeChild(el.myHtml)
}
export default loadingDirectiive
分析上面的代码
// 得到一个组件的构造函数
const loadingCtor = Vue.extend(LoadingCom)// 得到实例loadingComp
const loadingComp = new loadingCtor()// 获取实例的html。将html放在el的实例上面去。
// 放在el实例上的优势是方便访问。
// $el是可以访问加载动画的html。
// 这样就可以将它添加到某一个节点上。同时也方便移除
const htmlLoading = loadingComp.$mount().$el
el.myHtml = htmlLoading
main.js 中 注册成为全局指令
import loadingDirectiive from './components/loading/loading'
Vue.directive('loading', loadingDirectiive)<!-- 全局指令的注册方式 -->
Vue.directive("color", {钩子函数
})
页面中使用加载动画指令 v-loading
<template><div class="box"><ListCom :listArr="listArr" v-loading="isLoadFlag"></ListCom></div>
</template>
<script> import ListCom from '../components/ListCom.vue'
export default {components: {ListCom},data() {return {listArr: [],//通过isLoadFlag来控制动画是否开启isLoadFlag:false,}},created() { this.sendAPi()},methods: {sendAPi() { this.isLoadFlag = true;//开启加载动画setTimeout(() => { this.listArr = [{ name: '齐玄帧', dec: '五百年前的吕祖', },{ name: '王仙芝', dec: '白帝转世' },{ name: '李淳罡', dec: '李淳罡当初的实力是绝对的天下第一的' },{ name: '邓太阿', dec: '徐凤年的舅舅' },{ name: '曹长卿', dec: '这位号称独占天象八斗风流，实力排进天下前三' }]//移除加载动画this.isLoadFlag = false},3000)}}
} </script>
占用图指令 v-showimg
当没有数据的时候，显示一个占位图。
我们将会通过自定义指令 v-showimg="showImgFlag"来控制是否显示占位图
占位图组件 ShowImgCom.vue。
自定义钩子 showimg.js
废话不多说，直接上代码。
占位图组件 ShowImgCom.vue
<template><div class="showimgbox"><img src="../../assets/nodata.png"/><p>暂无数据</p></div>
</template>
指令的书写 showimg.js
import Vue from 'vue'
import ShowImgCom from './ShowImgCom.vue'
const showimgDirectiive = {inserted(el, bing) {const showimgCtor = Vue.extend(ShowImgCom)const showImgComp = new showimgCtor()const htmlSHowPic = showImgComp.$mount().$elel.myHtml = htmlSHowPicif (bing.value) {appendHtml(el)}},update(el, bing) {if (bing.value !== bing.oldValue) {bing.value ? appendHtml(el) : removeHtml(el)}}
}function appendHtml(el) {el.appendChild(el.myHtml)
}function removeHtml(el) {el.removeChild(el.myHtml)
}
export default showimgDirectiive
main.js注册
import showimgDirectiive from './components/ShowImg/showimg'
Vue.directive('showimg', showimgDirectiive)
指令的使用v-showimg指令
<template><div class="box" v-showimg="showImgFlag"><ListCom :listArr="listArr" v-loading="isLoadFlag"></ListCom></div>
</template>
<script> import ListCom from '../components/ListCom.vue'
export default {components: {ListCom},data() {return {listArr: [],isLoadFlag: false,showImgFlag:false}},created() { this.sendAPi()},methods: {sendAPi() { this.isLoadFlag = true;//加载中setTimeout(() => { this.listArr = []this.isLoadFlag = false //是否显示占位图if (this.listArr && this.listArr.length === 0) {this.showImgFlag = true} else { this.showImgFlag =false}},3000)}}
} </script>
最后
为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
有需要的小伙伴，可以点击下方卡片领取，无偿分享
vue自定义指令-加载指令v-loading和占位图指令v-showimg相关推荐
- 微信小程序image加载成功前显示默认占位图
在微信小程序中,我们使用Image组件来展示图片,图片源可以是本地资源,也可以是服务器资源.但是为了内容的动态展示,我们绝大多数情况下,会使用服务器资源来展现作为image的图片源.既然是服务器资源, ...
- 自定义JS加载等待动画loading
闲话少说,上代码:如下为加载数据时的等待css动画,效果如图:. Trust ancho ...
- vue 路由懒加载 报错 Loading chunk * failed 组件加载不出来
跳转对应的路由,无法跳转,打开控制太发现报错,查看网络发现对应的组件没有获取到,而且获取时间只有4ms就停止获取了,谷歌不会报这样的错误,但是edge会, 解决方法(不一定有用):给请求代码套个try ...
- 【Cocos2d-html5游戏引擎学习笔记(6)】自定义Cocos2d-html5加载资源Loading界面
这一篇其实本该放在后面写的,只是今天正好把这个整出来了,所以为了防止后面忘记,就在这里先写了. 在运行index.html文件的时候,引擎首先会把资源进行加载,这是为了让游戏在运行时更为流畅,避免了在 ...
- vue图片img加载失败显示自定义默认图片(缺省图)
vue图片img加载失败显示自定义默认图片(缺省图) 1.图片加载示例 2.加载失败显示默认图片 3.加载失败默认图片代码处理 <div class="book-img" ...
- vue跳转页面增加等待_vue-router懒加载时添加loading效果
近期在做一个微信公众号的项目,在页面跳转时发现页面会闪一下,用户体验很不好,而且如果网慢时页面是没有数据的样式会乱很丑.于是乎,就百度看了前人的各种解决方案,个人觉得以下链接中的方案还是很好的,代码简 ...
- vue 组件延时加载_为什么以及如何延迟加载角组件
vue 组件延时加载 "Before software can be reusable it first has to be usable." "在软件可重用之前,首先必 ...
- c语言反编译_Gacrux：基于C语言的可自定义PE加载恶意软件
写在前面的话 近期,我对这款名为Gacrux的恶意软件样本进行了分析.考虑到这两个样本文件的来源,我无法直接跟大家共享文件的哈希或直接公开样本文件,不过根据本文所提供的信息,大家可以轻松识别出这款恶意 ...
最新文章
- mybatis更新Blob类型字段要用updateByPrimaryKeyWithBLOBs
- jsp 9对象4作用域
- dbnetlib sqlserver不存在或拒绝访问_部署IIS+PHP+SQL server环境
- 【CMAKE系列】cmake中CMakeLists.txt脚本的常用语法
- 串讲-解释篇：作用域，作用域链，执行环境，变量对象，活动对象，闭包
- java数据结构编写二叉树_java 数据结构与算法 BinaryTree二叉树编写
- 定时执行自动化脚本-（一）导入保存jmeter参数至文件的jar包
- 几个病毒代码（c++）
- 怎样才算是优质的Scratch作品？
- x509证书验证示例
- 微信小程序 自定义导航栏
- 实数系与实数定理（上）
- mac设置共享屏幕 苹果mac屏幕共享设置详细教程
- 服务器上传文件出现500错误，但是其他不涉及文件的接口均正常
- ImportError: libopencv_imgcodecs.so.4.3: cannot open shared object file: No such file or directory报错
- web前端期末大作业网页设计与制作 ——汉口我的家乡旅游景点 5页HTML+CSS+JavaScript
- Linux中的文本流
- 【 2021 MathorCup杯大数据挑战赛 A题 二手车估价】初赛复赛总结、方案代码及论文
- 好女人必看行为守则100条----男人也学学吧！
- ONVIF系列笔记-设备发现机制