vue 自定义指令的使用案例
参考资料:
1. vue 自定义指令;
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 自定义指令的使用案例的更多相关文章
- vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- Vue自定义指令报错:Failed to resolve directive: xxx
Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...
- vue自定义指令clickoutside使用以及扩展用法
vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...
- vue自定义指令clickoutside扩展--多个元素的并集作为inside
都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...
- 每个人都能实现的vue自定义指令
前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...
- vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法
首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- Vue自定义指令使用方法详解 和 使用场景
Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definitio ...
随机推荐
- 阿里云服务器部署Office online注意事项
阿里云服务器部署Office online注意事项 一.参考配置 实例规格:4核8GB(IO优化) 网络带宽:5Mbps 系统盘:40G 存储盘:200G OS:Windows Server 2016 ...
- 简易仿ios菊花加载loading图
原文链接:https://mp.weixin.qq.com/s/wBbQgOfr59wntNK9ZJ5iRw 项目中经常会用到加载数据的loading显示图,除了设计根据app自身设计的动画loadi ...
- 如何给win7自带的截图工具设置快捷键
win7自带的截图工具很好,很强大,比从网上下载的截图工具好用多了,很少会出现问题.但是它能不能像QQ截图工具一样可以使用快捷键呢?今天小编和大家分享下心得,希望能够给你的工作带来快捷. 工具/原料 ...
- MongoDB 常用的数据备份梳理汇总
1.基于数据文件的备份 直接将原始的数据文件Copy至备份的地方,这个方法的优点是比较快,因为备份和恢复都不需要转换数据格式.缺点就是需要锁住数据库服务器,但是此方案通常备份是在从节点上进行,备份过程 ...
- 5.1Python数据处理篇之Sympy系列(一)---Sympy的大体认识
目录 目录 前言 目录 前言 sympy是python一个强大的数学符号运算第三方库,具体的功能请看下面操作 官网教程: https://docs.sympy.org/latest/tutorial/ ...
- flex布局justify-content属性和align-items属性设置
前言: flex最常用的就是justify-content和align-items了,这里把这两个属性介绍下,大家更多关于flex布局可以查看阮一峰的日志,写的非常清楚! 阮一峰flex布局的日志:h ...
- mysql partition分区
(转) 自5.1开始对分区(Partition)有支持 = 水平分区(根据列属性按行分)=举个简单例子:一个包含十年发票记录的表可以被分区为十个不同的分区,每个分区包含的是其中一年的记录. === 水 ...
- 文本分类实战(八)—— Transformer模型
1 大纲概述 文本分类这个系列将会有十篇左右,包括基于word2vec预训练的文本分类,与及基于最新的预训练模型(ELMo,BERT等)的文本分类.总共有以下系列: word2vec预训练词向量 te ...
- Linux笔记-nohup和&
nohup:忽略SIGHUP信号,当关闭shell之后,程序仍然执行,但是如果在shell中 ctrl+c,会结束程序 &:忽略SIGINT信号,程序后台执行,在shell中 ctrl+c,程 ...
- 面试必问Elasticsearch倒排索引原理
本文摘抄自我的微信公众号"程序员柯南",欢迎关注!原文阅读 倒排索引是目前搜索引擎公司对搜索引擎最常用的存储方式,也是搜索引擎的核心内容,在搜索引擎的实际应用中,有时需要按照关键字 ...