vue自定义指令拖动div
钩子函数
一个指令定义对象可以提供如下几个钩子函数:
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的更多相关文章
- vue 自定义指令(directive)实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
- vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
- vue 自定义指令的使用案例
参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- vue自定义指令clickoutside使用以及扩展用法
vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...
- vue自定义指令clickoutside扩展--多个元素的并集作为inside
都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- Vue自定义指令使用方法详解 和 使用场景
Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definitio ...
- 使用Vue自定义指令实现Select组件
完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="i ...
随机推荐
- 用StringBuilder来实现经典的反转问题
import java.util.Scanner; public class Practise03 { public static void main(String[] args) { //键盘录入一 ...
- Linux 控制台/终端/tty/shell
一.简介 使用linux已经有一段时间,却一直弄不明白这几个概念之间的区别.这些概念本身有着非常浓厚的历史气息,随着时代的发展,他们的含义也在发生改变,它们有些已经失去了最初的含义,但是它们的名字却被 ...
- Luogu 2467 [SDOI2010]地精部落
挺有意思的题. 优质题解: https://www.luogu.org/blog/user55639/solution-p2467 题意为求长度为n,取值为$[1, n]$的波动序列的个数. 首先需要 ...
- python(二):可变参数
python中的函数定义: def func(参数, 默认参数, 可变参数) ... 可变参数有两种定义方式: def func(*args): ... 调用方式为func(arg1, arg2, a ...
- C#中关于换行符的记录
最近在做一个练习的时候,从其他数据库提出来数据装到自己的数据表中,发现同是编辑器的内容却在页面上显示不出来,但是在数据库中又确实存在,经过一番折腾之后发现是 换行符 的问题.在我的编辑器中是以 ‘\r ...
- NPOI读取Excel文件
public class ExcelOperator { public static List<DataTable> Read(string fileName) { List<Dat ...
- Unobrusive Ajax使用
mark一下:[ASP.NET MVC 小牛之路]14 - Unobtrusive Ajax篇文章,果断记下来,网址: http://www.cnblogs.com/willick/p/3418517 ...
- MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框
1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...
- symbol访问法及symbor注册表
symbol主要作用是防止对象属性名冲突 在ES6之前,对象的属性名只能是字符串,这样很容易造成字符串的冲突. 例:假设person对象是从外部库引入的一个对象 let person = { name ...
- sqlserver高版本还原到低版本方法
想要将Sqlserver2014高版本备份的数据还原到低版本SqlServer2008R2上去,但是这在SqlServer中是没法直接还原数据库的,通过以下方法可以顺利还原. 通过高版本生成sql脚本 ...