钩子函数
一个指令定义对象可以提供如下几个钩子函数:
bind:只掉用一次,指令第一次绑定到元素是调用,在这里可以进行一次性的初始化设置
inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定被插入文档中)
update:所在组件的VNode更新是调用,但可能发生在其子VNode更新前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用
unbind:只调用一次,指令与元素解绑时调用 钩子函数参数
el:指令所绑定的元素,可以用来直接操作 DOM
binding:一个对象,包含以下属性:
  name:指令名,不包括v-前缀
  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 }
vnode:Vue 编译生成的虚拟节点
oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用
出来el之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的dataset来进行
在组件的directives选项中定义指令,下面定义一个拖拽div的指令
<div v-drag="greet"></div>
//这里要通过指令绑定函数讲当前元素的位置数据传出来

  

methods:{
  //接受传过来的位置数据
  greet(val){
    console.log(val)
  }
},
directives: {
drag: {//drag自定义指令
bind: function (el, binding) {
let odiv = el;//el 当前元素
odiv.onmousedown = (e) => {
e.preventDefault();
let disX = e.clientX - odiv.offsetLeft;
let disY = e.clientY - odiv.offsetTop;
let left = null;
let top = null; //将此时的位置传出去
binding.value({x: odiv.offsetLeft, y: odiv.offsetTop}) document.onmousemove = (e) => {
e.stopPropagation()
//用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
left = e.clientX - disX;
top = e.clientY - disY;
//移动当前元素
odiv.style.left = left + 'px';
odiv.style.top = top + 'px';
//将此时的位置传出去
// binding.value({x:left,y:top})
}
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
};
}
}
}

  


vue自定义指令拖动div的更多相关文章

  1. vue 自定义指令(directive)实例

    一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  v-bind:bb 2.v-on:用于监听DOM事件: 例 ...

  2. vue自定义指令

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

  3. vue 自定义指令的使用案例

    参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...

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

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

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

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

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

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

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

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

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

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

  9. 使用Vue自定义指令实现Select组件

    完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="i ...

随机推荐

  1. 用StringBuilder来实现经典的反转问题

    import java.util.Scanner; public class Practise03 { public static void main(String[] args) { //键盘录入一 ...

  2. Linux 控制台/终端/tty/shell

    一.简介 使用linux已经有一段时间,却一直弄不明白这几个概念之间的区别.这些概念本身有着非常浓厚的历史气息,随着时代的发展,他们的含义也在发生改变,它们有些已经失去了最初的含义,但是它们的名字却被 ...

  3. Luogu 2467 [SDOI2010]地精部落

    挺有意思的题. 优质题解: https://www.luogu.org/blog/user55639/solution-p2467 题意为求长度为n,取值为$[1, n]$的波动序列的个数. 首先需要 ...

  4. python(二):可变参数

    python中的函数定义: def func(参数, 默认参数, 可变参数) ... 可变参数有两种定义方式: def func(*args): ... 调用方式为func(arg1, arg2, a ...

  5. C#中关于换行符的记录

    最近在做一个练习的时候,从其他数据库提出来数据装到自己的数据表中,发现同是编辑器的内容却在页面上显示不出来,但是在数据库中又确实存在,经过一番折腾之后发现是 换行符 的问题.在我的编辑器中是以 ‘\r ...

  6. NPOI读取Excel文件

    public class ExcelOperator { public static List<DataTable> Read(string fileName) { List<Dat ...

  7. Unobrusive Ajax使用

    mark一下:[ASP.NET MVC 小牛之路]14 - Unobtrusive Ajax篇文章,果断记下来,网址: http://www.cnblogs.com/willick/p/3418517 ...

  8. MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框

    1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...

  9. symbol访问法及symbor注册表

    symbol主要作用是防止对象属性名冲突 在ES6之前,对象的属性名只能是字符串,这样很容易造成字符串的冲突. 例:假设person对象是从外部库引入的一个对象 let person = { name ...

  10. sqlserver高版本还原到低版本方法

    想要将Sqlserver2014高版本备份的数据还原到低版本SqlServer2008R2上去,但是这在SqlServer中是没法直接还原数据库的,通过以下方法可以顺利还原. 通过高版本生成sql脚本 ...