vue2自定义指令-加载指令v-loading和占位图指令v-showimg
了解自定义指令的钩子函数
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)
// 得到实例loadingComp
const loadingComp = new loadingCtor()
// 获取实例的html
const htmlLoading = loadingComp.$mount().$el
// 将html放在el的实例上面去
el.myHtml = htmlLoading
if (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
暂无数据
```
指令的书写 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().$el
el.myHtml = htmlSHowPic
if (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>
vue2自定义指令-加载指令v-loading和占位图指令v-showimg的更多相关文章
- Flex 4 自定义预加载器
本示例的目的是在Flash Professional里创建自定义预加载器SWC,并扩展SparkDownloadProgressBar类在Flex 4应用程序中使用. 预加载器显示加载进度百分比 ...
- js spin 加载动画(loading)
js spin 加载动画 最近做页面ajax加载是又用到loading动画,还好有一个spin.js 具体的包大家可以去http://fgnass.github.com/spin.js/下载, 如果想 ...
- js图片未加载完显示loading效果
<html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...
- vue2组件懒加载浅析
vue2组件懒加载浅析 一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大, ...
- 【SpringBoot 基础系列】实现一个自定义配置加载器(应用篇)
[SpringBoot 基础系列]实现一个自定义配置加载器(应用篇) Spring 中提供了@Value注解,用来绑定配置,可以实现从配置文件中,读取对应的配置并赋值给成员变量:某些时候,我们的配置可 ...
- adnroid 自定义ProgressDialog加载中
用来记录自己所用到的知识 前两天在做项目的时候发现有时候在访问网络数据的时候由于后台要做的工作较多,给我们返回数据的时间较长,所以老大叫我加了一个加载中的logo图用来提高用户体验. 于是就在网上找了 ...
- JS实现页面加载完毕之前loading提示效果
1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.docu ...
- Egret白鹭开发小游戏之自定义load加载界面
刚接触不久就遇到困难------自定义loading.想和其他获取图片方式一样获取加载界面的图片,结果发现资源还没加载就需要图片,在网上百度了许多,都没有找到正确的方式,通过自己的摸索,终于,,,我成 ...
- js实现的页面加载完毕之前loading提示效果
页面加载readyState的五种状态 原文如下: 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loadin ...
随机推荐
- 145_Power BI Report Server自定义Form登录
博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 1.背景 很久没有更新Power BI Report Server了,发现自己机器还是2021年1月版本的,现在更新了20 ...
- Flask_WTF实现表单
Flask_WTF实现表单可分为六个步骤: ①导入FlaskForm扩展包(from flask_wtf import FlaskForm) ②导入StringField,PasswordField, ...
- ptorch常用代码梯度篇(梯度裁剪、梯度累积、冻结预训练层等)
梯度裁剪(Gradient Clipping) 在训练比较深或者循环神经网络模型的过程中,我们有可能发生梯度爆炸的情况,这样会导致我们模型训练无法收敛. 我们可以采取一个简单的策略来避免梯度的爆炸,那 ...
- java-去除html中的标签或者元素属性(正则表达式/jsoup)
业务场景: 如一篇使用富文本编辑器编辑的新闻稿,需要在列表页面截取前200字作为摘要,此时需要去除html标签,截取真正的文本部分. /** * 删除Html标签 */public static St ...
- Flink中如何实现一个自定义MetricReporter
什么是 Metrics 在 flink 任务运行的过程中,用户通常想知道任务运行的一些基本指标,比如吞吐量.内存和 cpu 使用情况.checkpoint 稳定性等等.而通过 flink metric ...
- Java - happens-before
Java - happens-before JSR-133对 happens-before 关系的定义如下: 如果一个操作 happens-before 另一个操作,那么第一个操作的执行结果将对第二个 ...
- 001 手把手用Git,Git从入门到上传本地项目到Github,看这篇就够了
安装git 下载Git 下载好后,一路next即可 安装好后,打开Git bash,进行配置 首先配置自己的身份 git config --global user.name "Name&qu ...
- Markdown常见基本语法
标题 -方式一:使用警号 几个警号就是几级标题,eg: # 一级标题 -方式二: 使用快捷键 ctrl+数字 几级标题就选其对应的数字, eg: ctrl+2(二级标题) 子标题 -方式一: 使用星号 ...
- c++可视化性能测试
阅读前注意 本文所有代码贴出来的目的是帮助大家理解,并非是要引导大家跟写,许多环境问题文件问题没有详细说明,代码也并不全面,达不到跟做的效果.建议直接阅读全文即可,我在最后会给出详细代码地址,对源代码 ...
- Idea创建文件夹自动合成一个
在idea中创建文件夹时,它们总是自动合成一个,如下图: 文件夹自动折叠真的很影响效率,可能会引发一些不经意的失误 解决方法: 取消这个地方的勾选 这样就可以正常创建文件夹了