vue自定义加载指令v-loading占位图指令v-showimg

目录
  • 了解自定义指令的钩子函数
    • 注册成为全局指令
    • 需求描述
    • 列表组件 ListCom.vue
    • 加载动画组件 LoadingCom.vue
    • 钩子函数 loading.js
    • 分析上面的代码
  • main.js 中 注册成为全局指令
    • 页面中使用加载动画指令 v-loading
    • 占用图指令 v-showimg
    • 占位图组件 ShowImgCom.vue
    • 指令的书写 showimg.js
    • main.js注册
    • 指令的使用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

<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().$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>

以上就是vue自定义加载指令v-loading占位图指令v-showimg的详细内容,更多关于vue自定义加载占位图指令的资料请关注我们其它相关文章!

(0)

相关推荐

  • vue自定义组件如何通过v-model指令控制组件的隐藏、显示

    目录 通过v-model指令控制组件的隐藏.显示 1.新建一个叫child.vue的vue组件文件 2.将这个组件注册在全局 3.在父组件文件里面写入Child组件 在组件中实现v-model 1.v-model使用的属性和事件 2.自定义组件中输入框的v-model 3.通过v-model控制组件的显示 通过v-model指令控制组件的隐藏.显示 在开发项目的过程中,我们通常会有自定义组件的时候,那么在自定义组件后,我们如何去对组件进行类似于常用的UI组件库里面那些通过v-model来展示.隐

  • vue的自定义指令传参方式

    目录 自定义指令传参 指令 环境 传参方式 自定义指令动态参数 自定义指令传参 指令 在vue官网中,常用指令有v-model和v-bind,但是,如果我们需要对DOM元素进行底层操作,就需要用到自定义指令. 今天主要讲到传参的2种方式. 环境 vue2.3.3 node6.11.2 webpack2.6.1 传参方式 在main.js中定义一个指令. Vue.directive('zoom', {     bind: function (el, binding, vnode) {      

  • vue使用自定义指令实现按钮权限展示功能

    目录 一.在src下新建directive文件夹 二.定义index.js文件,在vue上注入自定义指令 三.编写自定义指令 四.使用 一.在src下新建directive文件夹 二.定义index.js文件,在vue上注入自定义指令 import hasBtn from './permission/hasBtn' const install = function (Vue) { Vue.directive('hasBtn', hasBtn) } if (window.Vue) { window

  • 如何在Vue3中实现自定义指令(超详细!)

    目录 前言 生命周期 钩子的参数 简化形式 对象字面量 在组件上使用指令 几个实用的自定义指令 自动聚焦v-focus 防抖v-debounce 节流v-throttle 弹窗隐藏v-hide 总结 在开发Vue项目时,大多数人都会使用到Vue内置的一些指令,例如v-model.v-if等,在使用的时候不知道有没有想过自己也来实现一个指令呢.本文就以Vue3项目为基础,从原理.方法到实际案例.注意事项,尽可能细致的讲解如何自定义指令. 前言 我们需要明白为什么需要自定义一个指令,其实就是想更加简

  • vue全局注册自定义指令防抖解析

    目录 全局注册自定义指令防抖 1.先建一个js文件 2.在mian.js里面注册 3.使用 vue防抖的使用 防抖函数 在vue中直接使用 vue中使用高阶组件 vue中自定义指令使用 全局注册自定义指令防抖 1.先建一个js文件 建一个debounce.js文件,放在src/directives文件夹里面 export default (vue) => {   /**    * 绑定方法    * @param {Object} el - The element the directive i

  • 在vue自定义组件中使用 v-model指令详情

    目录 一.前言 1.技术点提前知 二.在自定义的vue组件中使用v-model 1.效果演示图 2.自定义组件代码示例 3.在父组件使用自定义组件 三.优写时刻 一.前言 如何实现在自定义的vue组件中使用v-model,. 起先觉得挺简单,事实也挺简单,但似乎又没那么简单.因为深谈这涉及指令原理.数据绑定实现原理. 1.技术点提前知 要想在自定义组件中使用v-model,使用上其实就简单几步,这里以自定义input组件为例. 关键步骤: 1.props的使用.在自定义的vue文件中,声明父组件

  • vue自定义加载指令v-loading占位图指令v-showimg

    目录 了解自定义指令的钩子函数 注册成为全局指令 需求描述 列表组件 ListCom.vue 加载动画组件 LoadingCom.vue 钩子函数 loading.js 分析上面的代码 main.js 中 注册成为全局指令 页面中使用加载动画指令 v-loading 占用图指令 v-showimg 占位图组件 ShowImgCom.vue 指令的书写 showimg.js main.js注册 指令的使用v-showimg指令 了解自定义指令的钩子函数 bind(){}:每当指令绑定到元素上的时候

  • vue自定义加载指令最新详解

    目录 前言 创建加载组件 创建指令 指令文件 创建构造器 书写指令 开启函数 关闭函数 前言 用过element-ui的都应该知道,里面有一个loading组件,有两种调用方法:指令和服务.但是只有一种加载效果,为了丰富加载效果和方便使用,于是写了一个自定义loading指令. 创建加载组件 首先,需要创建loading组件,展示需要的加载效果,因人而异,不再赘述. 创建指令 指令文件 首先,创建一个js文件用于书写自定义指令,在这个文件中导入Vue和loading组件: import Vue

  • javascript自定义加载loading效果

    本文实例为大家分享了javascript自定义加载loading效果的具体代码,供大家参考,具体内容如下 加载中图片,底色为白色(看不到) 效果如图: 使用方法 this.tool.showLoading('加载中', this) this.tool.showLoading('合成中', this) this.tool.hideLoading() 引用文件 在App.vue中 <style scoped> @import './common.css'; </style> 在main

  • VUE DOM加载后执行自定义事件的方法

    最近想用vue做一个小东西,谁知道一开始就遇到了一个棘手的问题: 首先我想在页面加载前通过ajax请求页面展示所需要的信息,于是我在created钩子函数里面请求了我想要的数据 created:function(){ var url="/indexitem"; var _self=this; $.get(url,function(data){ _self.items=data; }); $.get('/banner',function(data){ _self.banners=data

  • vue.js加载新的内容(实例代码)

    vue是一种轻巧便捷的框架,那么如何进行对于数据加载的刷新呢?以下就是我对于vue.js数据加载的一点想法 源码: <div @scroll="onScroll($event)" style="height: 100%;overflow: auto;"> <ul class="shop-brand-index" v-show="sitems.length > 0" > <li v-for=&

  • js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】

    本文实例讲述了js实现的页面加载完毕之前loading提示效果.分享给大家供大家参考,具体如下: 一.JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px) var _LoadingTop =

  • Android自定义加载控件实现数据加载动画

    本文实例为大家分享了Android自定义加载控件,第一次小人跑动的加载效果眼前一亮,相比传统的PrograssBar高大上不止一点,于是走起,自定义了控件LoadingView去实现动态效果,可直接在xml中使用,具体实现如下 package com.*****.*****.widget; import android.content.Context; import android.graphics.drawable.AnimationDrawable; import android.util.

  • Android自定义加载圈动画效果

    本文实例为大家分享了Android自定义加载圈动画展示的具体代码,供大家参考,具体内容如下 实现如下效果: 该效果图主要有3个动画: 1.旋转动画 2.聚合动画 3.扩散动画 以上3个动画都是通过ValueAnimator来实现,配合自定义View的onDraw()方法实现不断的刷新和绘制界面. 具体代码如下: package blog.csdn.net.mchenys.myanimationloading; import android.animation.Animator; import a

  • vue页面加载闪烁问题的解决方法

    v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性. 也就是说,在使用v-if时,若值为false,那么页面将不会有这个html标签生成.而v-show:不论其值是false还是true,html元素都会存在,只是简单的切换css的display属性. 使用场景 一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗.因此,如果需要频繁切换 v-sho

  • vue异步加载高德地图的实现

    本文介绍了vue异步加载高德地图的实现,分享给大家,具体如下: 几种加载js的方式 同步加载 异步加载 延迟加载 同步加载 用的最多的一种方式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输出document内容.修改dom.重定向等行为,就会造成页面堵塞.所以一般建议把<script>标签放在<body>结尾处,这样尽可能减少页面阻塞. <script src="htt

随机推荐