参考资料:

1. vue 自定义指令

2. vue 自定义指令实现 v-loading

  v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需要自己去写自定以指令。碰巧这段时间自己练习了编写组件,完成看看能不能实现一个自定义的这样一个指令。话不多说,上代码:

<div class="table" v-loadAnimation="loading">
...
</div> <script>
export default {
data() {
return {
...
}
},
directives: {
loadAnimation: {
bind: (el, binding) => {
// console.log('bind', el, binding)
// 遮罩层
const modal = document.createElement('div');
modal.className = 'modal-loading';
// 遮罩层动画
const animation = document.createElement('div');
animation.className = 'modal-loading-animation';
modal.appendChild(animation);
// 自定义的 loadingElement 属性/其他, 下面钩子函数可以使用;
el.loadingElement = modal; const curStyle = window.getComputedStyle(el);
const position = curStyle.position; if (position === 'absolute' || position === 'relative') {
el.style.position = position;
} else {
el.style.position = 'relative';
} if (binding.value) {
el.appendChild(modal)
}
},
update: (el, binding) => {
// console.log('update', el, binding)
if (binding.value) {
if (el.loadingElement.parentNode === null) {
el.appendChild(el.loadingElement);
}
} else {
if (el === el.loadingElement.parentNode) {
el.removeChild(el.loadingElement);
}
}
},
unbind: (el) => {
if (el.loadingElement.parentNode === el) {
el.removeChild(el.loadingElement);
}
el.loadingElement = null;
}
}
},
methods: {
...
}
}
</script> <style>
/* for loading animation */
.modal-loading {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 100;
background-color: rgba(255, 255, 255, 0.95);
overflow: hidden;
}
.modal-loading .modal-loading-animation {
width: 30px;
height: 30px;
border-radius: 50%;
border: 4px solid #1a7dff;
border-left-color: transparent;
animation: modal-loading-rotate 1s linear infinite;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
@keyframes modal-loading-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>

  注意:

    1.这个示例中,v-loadAnimation 是以局部指令的方式注册的,在写相关 css 的时候,style 标签中不能加入 scoped 字样,否则不会触发效果;

    2.关于指令的钩子函数以及相关参数,具体移步 官方文档

vue 自定义指令的使用案例的更多相关文章

  1. vue自定义指令

    Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...

  2. vue自定义指令(Directive中的clickoutside.js)的理解

    阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...

  3. Vue自定义指令报错:Failed to resolve directive: xxx

    Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...

  4. vue自定义指令clickoutside使用以及扩展用法

    vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...

  5. vue自定义指令clickoutside扩展--多个元素的并集作为inside

    都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...

  6. 每个人都能实现的vue自定义指令

    前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...

  7. vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法

    首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...

  8. Vue自定义指令使用场景

    当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...

  9. Vue自定义指令使用方法详解 和 使用场景

    Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definitio ...

随机推荐

  1. 零基础学Python--------第5章 字符串及正则表达式

    第5章 字符串及正则表达式 5.1 字符串常用操作 在Python开发过程中,为了实现某项功能,经常需要对某些字符串进行特殊处理,如拼接字符串.截取字符串.格式化字符串等.下面将对Python中常用的 ...

  2. PHP实现开心消消乐的算法示例

    本文主要介绍了关于PHP如何实现我们大家都知道的开心消消乐的算法,分享PHP教程出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.需求描述:      1.在一个8*8的矩阵方格中随机 ...

  3. Vue一个案例引发「内容分发slot」的最全总结

    今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做 ...

  4. SQL语句(理论)

    1.SQL已经成为关系数据库的标准语言 2.SQL是一个非过程化的语言,因为他一次处理一个记录 3.SQL命令比较简单,最高级的命令几天之内便可掌握. 有属下类型的命令: 查询数据. 在表中插入.修改 ...

  5. C#字符串转二进制、二进制转字符串

    最近公司要做一个操作日志的模块,如果将操作日志以字符串的形式存到后台数据库,非常浪费内存,不可取,特意写了字符串与二进制相互转换的函数. 1.字符串转二进制 private string String ...

  6. AXI-Lite总线及其自定义IP核使用分析总结

    ZYNQ的优势在于通过高效的接口总线组成了ARM+FPGA的架构.我认为两者是互为底层的,当进行算法验证时,ARM端现有的硬件控制器和库函数可以很方便地连接外设,而不像FPGA设计那样完全写出接口时序 ...

  7. 【转载】xilinx 高速收发器Serdes深入研究

    此篇文章深入浅出介绍了关于高速串行收发器的几个重要概念和注意事项,为方便知识点复习总结和后续查阅特此转载,原文标题及链接为:xilinx 高速收发器Serdes深入研究 - CSDN博客   http ...

  8. codeforces#410C Mike and gcd problem

    题目:Mike and gcd problem 题意:给一个序列a1到an ,如果gcd(a1,a2,...an)≠1,给一种操作,可以使ai和ai+1分别变为(ai+ai+1)和(ai-ai+1); ...

  9. MFC拖拽、选择目录、遍历文件

    1.选择目录 void CDecryptFileDlg::OnBnClickedSel() { std::wstring selectedDir; WCHAR szDir[MAX_PATH]; Zer ...

  10. Kafka 安装配置 windows 下

    Kafka 安装配置 windows 下 标签(空格分隔): Kafka Kafka 内核部分需要安装jdk, zookeeper. 安装JDK 安装JDK就不需要讲解了,安装完配置下JAVA_HOM ...