手写 vue 自定义指令(directive) v-loading 加载,项目实战

编程语言 2021-10-12 15:17:08 阅读次数: 0

手写 vue 自定义指令(directive) v-loading 加载,项目实战

目标：

  1. 在vue项目的标签里面使用 v-loading="true" ，如同element-ui里面使用v-loading="true"一样 会展示loading 效果。
  2. 学会后可以直接复制到你的项目中实战，工作中vue项目肯定是会用到v-loading，一次引入全局使用，超级方便

在这里我做两个laoding效果：

  1. 全屏的loading效果，用于进入页面的时候使用loaidng
  2. 局部的load 效果，用户分页或者加载部分内容的时候load效果

展示效果：

全屏加载：<div v-loading="true"></div> 请添加图片描述

局部加载：<div v-load="true"></div> 在这里插入图片描述

目录结构

> 多余的文件夹就不展示了
> loading里面的5个文件创建好，把代码复制进去，然后在main.js里面use一下就可以使用了
> 文章底部有使用案例，不会操作可以留言

|-- src
    |-- App.vue
    |-- main.js				// 需要用到
    |-- components
    |   |-- HelloWorld.vue
    |-- directive			// 需要用到
    |   |-- loading
    |       |-- index.js 
    |       |-- load.js			// 局部load
    |       |-- load.vue		// 局部load
    |       |-- loading.js		// 全局loading
    |       |-- loading.vue	    // 全局loading
    
复制代码

1. 创建文件

directive文件夹下创建loading文件夹，在创建：index.js、loading.js 、loading.vue 、load.js 、load.vue index.js文件用来暴露安装插件接口，这个下面会有说明。有了 Vue.directive这个方法就可以在页面中使用自定义指令 v-loading了

loading/index.js

import load from './load';
import loading from './loading';
export default {
  install(Vue) {
    Vue.directive("load", load), 	  // 局部load
    Vue.directive("loading", loading) // 全局loading
  }
}
复制代码

loading/loading.vue

是一个组件，用来插入到自定义指令的目标元素中，这里可以写一些loading样式

// directive/loading/loading.vue
<template>
  <div v-show="visible" class="loading-wrap">
    <div class="loading-box">
      <div class="loading-add"></div>
      <div class="loading-txt">全局加载中...</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
};
</script>
<style scoped>
.loading-wrap {
  position: absolute;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}
.loading-box {
  user-select: none;
  font-size: 16px;
  white-space: nowrap;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-add {
  width: 16px;
  height: 4px;
  background-color: #eee;
  display: inline-block;
  margin-right: 4px;
  position: relative;
  animation: add 1s 0s linear infinite forwards;
  border-radius: 4px;
}
.loading-add::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 4px;
  background-color: #eee;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 4px;
  transform: translate(-50%, -50%) rotateZ(90deg);
}

@keyframes add {
  0% {
    transform: rotateZ(0);
  }

  100% {
    transform: rotateZ(360deg);
  }
}
.loading-txt {
  color: #eee;
  animation: fontColor 3s 0s linear infinite reverse;
  display: inline-block;
}

@keyframes fontColor {
  0% {
    color: rgba(238, 238, 238, 0.85);
  }
  25% {
    color: rgba(135, 207, 235, 0.85);
  }
  50% {
    color: rgba(255, 0, 0, 0.85);
  }
  75% {
    color: rgba(51, 51, 51, 0.85);
  }
  100% {
    color: rgba(255, 255, 0, 0.85);
  }
}
</style>
复制代码

loading/loading.js

// directive/loading/loading.js
import Vue from 'vue'
import Loading from './loading.vue'

const Mask = Vue.extend(Loading)

const toggleLoading = (el, binding) => {
    if (binding.value) {
        Vue.nextTick(() => {
            // 控制loading组件显示
            el.instance.visible = true
            // 插入到目标元素
            insertDom(el, el, binding)
        })
    } else {
        el.instance.visible = false
    }
}

const insertDom = (parent, el) => {
    parent.appendChild(el.mask)
}

export default {
    bind: function (el, binding, vnode) {
        const mask = new Mask({
            el: document.createElement('div'),
            data() { }
        })
        el.instance = mask
        el.mask = mask.$el
        el.maskStyle = {}
        binding.value && toggleLoading(el, binding)
    },
    update: function (el, binding) {
        if (binding.oldValue !== binding.value) {
            toggleLoading(el, binding)
        }
    },
    unbind: function (el, binding) {
        el.instance && el.instance.$destroy()
    }
}
复制代码

loading/load.js

// directive/loading/load.js
import Vue from 'vue';
import Load from './load.vue';

const Mask = Vue.extend(Load);

const toggleLoading = (el, binding) => {
    if (binding.value) {
        Vue.nextTick(() => {
            el.instance.visible = true// 控制loading组件显示
            insertDom(el, el, binding)// 插入到目标元素
        })
    } else {
        el.instance.visible = false
    }
}

const insertDom = (parent, el) => {
    parent.appendChild(el.mask)
}

export default {
    // bind(){}当绑定指令的时候出发
    bind: function (el, binding, vnode) {
        const mask = new Mask({
            el: document.createElement('div'),
            data() { }
        })
        el.instance = mask
        el.mask = mask.$el
        el.maskStyle = {}
        binding.value && toggleLoading(el, binding)
    },
    // update(){}当数据更新时候会触发该函数
    update: function (el, binding) {
        if (binding.oldValue !== binding.value) {
            toggleLoading(el, binding)
        }
    },
    // unbind(){}解绑的时候触发该函数
    unbind: function (el, binding) {
        el.instance && el.instance.$destroy()
    }
}
复制代码

loading/load.vue

// directive/loading/load.vue
<template>
  <div v-show="visible" class="load-wrap">
    <div class="loading-box">
      <div class="loading-add"></div>
      <div class="loading-txt">加载中...</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
};
</script>
<style scoped>
.load-wrap {
  white-space: nowrap;
}
.loading-box {
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-add {
  width: 16px;
  height: 4px;
  background-color: #eee;
  display: inline-block;
  margin-right: 4px;
  position: relative;
  animation: add 1s 0s linear infinite reverse;
  border-radius: 4px;
}
.loading-add::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 4px;
  background-color: #eee;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 4px;
  transform: translate(-50%, -50%) rotateZ(90deg);
}

@keyframes add {
  0% {
    transform: rotateZ(0);
  }

  100% {
    transform: rotateZ(-360deg);
  }
}
.loading-txt {
  color: #eee;
  display: inline-block;
  font-size: 16px;
  animation: fontColor 3s 0s linear infinite reverse forwards;
}
@keyframes fontColor {
  0% {
    color: rgba(238, 238, 238, 0.85);
  }
  25% {
    color: rgba(135, 207, 235, 0.85);
  }
  50% {
    color: rgba(255, 0, 0, 0.85);
  }
  75% {
    color: rgba(51, 51, 51, 0.85);
  }
  100% {
    color: rgba(255, 255, 0, 0.85);
  }
}
</style>

复制代码
  • Vue.extend 接受参数并返回一个构造器，new 该构造器可以返回一个组件实例。
  • 当我们 new Mask() 的时候，把该组件实例挂载到一个 div 上，但是这时候这个 div 还没有挂载到页面中。把它打印出来。
  • 然后用一个变量接住mask实例 el.instance = mask
  • 接下来判断 value 是否为 true ，如果是 true 则执行 toggleLoading ，toggleLoading 方法用来控制是否显示 loading.vue 组件中的 visible变量，并且如果 value是true则插入到目标元素

函数属性

  • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
  • inserted：被绑定元素插入父节点时调用
  • update：所在组件的 VNode 更新时调用，
  • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
  • unbind：只调用一次，指令与元素解绑时调用。

函数参数

  • el：指令所绑定的元素，可以用来直接操作 DOM。
  • binding： 里面包含事件信息
  • vnode：Vue 编译生成的虚拟节点。
  • oldNode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

binding包含内容:

  • name：指令名
  • value：绑定的值 例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • oldValue：绑定前的值。仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg 传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

案例使用教学：

按照上面的目录结构，把对应文件的代码复制进去，即可使用

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' 

// 引入loading （里面包含了全局loading和局部load）
import loading from './directive/loading' 
Vue.use(loading);

Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
复制代码

src/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- 全局loading  true-展示  false-隐藏 -->
    <div v-loading="true"> </div>

 	<!-- 局部load  	 true-展示  false-隐藏 -->
    <div v-load="false"> </div>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
};
</script>
<style scoped></style>	
复制代码

全局loading：

在这里插入图片描述 在这里插入图片描述

局部load：

在这里插入图片描述

在这里插入图片描述

猜你喜欢

转载自juejin.im/post/7017738225796005918
今日推荐
周排行
win7之session理解
如何快速上手 AB Testing ？阿里技术专家秘方公开
数据库自助查询平台
【CCF 2017-12-2】游戏问题
Fire!(BFS)
修复GRUB引导故障
老倪祖膏药分销系统
MySQL慢查询日志-捕获慢SQL
批归一化(Batch Normalization)
ssm整合问题-------一
每日归档
更多
2025-03-02(0)
2025-03-01(0)
2025-02-28(0)
2025-02-27(0)
2025-02-26(0)
2025-02-25(0)
2025-02-24(0)
2025-02-23(0)
2025-02-22(0)
2025-02-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022