Vue.directive全局自定义指令案例
今天正好这个知识点有点淡忘了，就随笔一下吧：
Vue.directive(参数1，参数2)
参数1：指令名称，如"drag"
参数2：指令要实现的回调函数，其中回调函数中也有两个参数，其中：
参数1：指令绑定的元素，如 el
参数2：是一个对象，其中有两个参数（value,modifiers）
value:代表表达式要返回的结果
modifiers:指令的修饰符
话不多说，直接脑补一波实例：以拖拽为例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0;padding:0}
.box{
width:100px;
height: 100px;
background: red;
position: absolute;;
}
</style>
</head>
<body>
<div id="app"> <div class="box" v-drag.x="show"></div>
<div class="box" v-drag.y="show"></div>
</div>
</body>
</html>
<script src="vue.js"></script>
<script> Vue.directive("drag",(el,{modifiers,value})=>{
//ES6中新增的解构赋值
let {x,y} = modifiers
el.onmousedown = function(e){
var disX = e.offsetX;
var disY = e.offsetY;
e.preventDefault();
document.onmousemove = function(e){
var l = e.clientX - disX;
var t = e.clientY - disY;
//如果表达式的结果是false就不拖拽
if(!value)return; if(x){
el.style.left = l+"px";
} if(y){
el.style.top = t+"px";
} if((!x && !y)&&value){
el.style.left = l+"px";
el.style.top = t+"px";
} }
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null; }
}
}) var vm = new Vue({
el:"#app",
data:{
show:true
}
})
</script>
Vue.directive全局自定义指令案例的更多相关文章
- vue.js实现内部自定义指令和全局自定义指令------directive
在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东 directive 这个单词是我们写自定义指令的关键字哦 之定义指令为我们提供了几个钩 ...
- Vue.js：自定义指令
ylbtech-Vue.js:自定义指令 1.返回顶部 1. Vue.js 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 下面我们注册一 ...
- Vue笔记--通过自定义指令实现按钮操作权限
经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...
- vue组件、自定义指令、路由
1.vue组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...
- vue教程2-07 自定义指令
vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...
- vue全局自定义指令-元素拖拽
小白我用的是vue-cli的全家桶,在标签中加入v-drap则实现元素拖拽, 全局指令我是写在main.js中 Vue.directive('drag', { inserted: function ( ...
- 【Vue】通过自定义指令回顾 v-内置指令
Vue.js 的各种指令(Directives)更加方便我们去数据驱动 DOM,例如 v-bind.v-on.v-model.v-if.v-for.v-once 等内置指令,这些指令的职责就是当表达式 ...
- 在vue中创建自定义指令
原文:https://dev.to/ratracegrad/creating-custom-directives-in-vue-58hh 翻译:心上有杨 指令是带有 v- 前缀的特殊属性.指令的作用是 ...
- 在Vue中通过自定义指令获取元素
vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Eleme ...
随机推荐
- 阿里云 轻量应用服务器 上传一个HTML文件或者jsp文件 通过外网IP访问
我选择的是 宝塔Linux,现在就说一下如何往服务器里面传文件然后通过外网IP访问 1.打开宝塔Linux面板登录,安装tomcat,安装好后如图 2.点击tomcat有个文件标识处 3.出现如图 4 ...
- SQL Server日志处理及安全访问
1.点SQL SERVER错误日志,右键,配置,限定错误日志的数目,比如6个 限制日志增长数量 2.然后运行命令: EXEC sp_cycle_errorlog ; 这个命令的作用是将当前日志归档,然 ...
- PLC采集与控制，实现MES工序管理与品质管控，记录产品的加工数据，工厂生产装配流水线的一次成功应用
1.通过程序与PLC的采集与控制,实现MES工序管理,品质管控,历史数据追溯的目的 2.大概的流程图 3.有三个地方相关联来实现以上功能,首先是MES的工序管理,设置指定的产品有那些工序,上位机程序扫 ...
- mysql测试，配置环境 mysql' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
参考链接:https://www.cnblogs.com/ios9/p/9713388.html 1.设置一下环境变量: 右击我的电脑——>属性——>高级系统设置——> ...
- 【sql笔记】oracle 循环
=============================================== 2019/12/21_第1次修改 ccb_warlock = ...
- JDK8源码解析 --- Long 类型
最近都在看JDK8的源码,想把记录下来与大家一起共享,每天 积累一点,每天成长一点.看了装箱Long类型,有好多以前没有注意到或者不知道的内容,慢慢懂得.废话不多说,直接上代码讲解... 1.缓存区L ...
- bat命令复制文件
del HDT675.applicationdel setup.exedel publish.htmRD /S /Q "Application Files"xcopy /E \\1 ...
- Mars Sample 使用说明
Mars Sample 使用说明 https://github.com/Tencent/mars/wiki/Mars-sample-%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98 ...
- JS去除字符串中的中括号
var str = '这是一个字符串[html]语句;[html]字符串很常见'; alert(str.replace(/\[|]/g,''));//移除字符串中的所有[]括号(不包括其内容) //输 ...
- 浅谈HDFS（三）之DataNote
DataNode工作机制 一个数据块在DataNode上以文件形式存储在磁盘上,包括两个文件,一个是数据本身,一个是元数据包括数据块的长度,块数据的校验和,以及时间戳. DataNode启动后向Nam ...