VUE001. 拖动div盒子(自定义指令v-directives)
拖动div是一个逻辑很简单的需求,监听容器的鼠标按下松开的事件,执行函数通过DOM改变标签的CSS偏移量。
在VUE构建的项目中,通过标签的 @mousedown 和 @mouseup 赋予行为事件,便可以通过原生JS实现这一需求。
但VUE提供了更加方便的途径
自定义指令 节选自官方文档
“ 除了核心功能默认内置的指令 (v-model
和 v-show
),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 ”
可以看到 v-model 和 v-show 都是通过这一功能实现的,足以见得其内核的强大与便利。
于是我们就可以赋予标签一个自定义指令 v-drag ,来为任何想要拖动交互的盒子添加拖动事件。
以下为参考 vue实现拖动div元素 的代码
<div v-drag></div>
.drag{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background-color: red;
}
// 自定义指令 —— 拖动div
directives: {
drag(el, bindings) {
el.onmousedown = function(e) {
var disx = e.pageX - el.offsetLeft
var disy = e.pageY - el.offsetTop
document.onmousemove = function(e) {
el.style.left = e.pageX - disx + 'px'
el.style.top = e.pageY - disy + 'px'
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null
}
}
}
},
比起原生JS的好处是,不用再为标签添加多个事件和臃肿的执行函数,只需要在标签上增加自定义指令: v-xxx ( 自定义指令名称 ) ,函数体直接绑定了div的虚拟DOM —— $el 对象,再通过DOM本身的监听事件对其赋予行为处理,简单又省事,且可以轻易复用
不得不说VUE还是有东西的,同样需要复用应用场景的函数也推荐使用自定义指令,如官网举例的input自动聚焦,多用用别人的东西就是自己的了,家人们快用起来
- END -
VUE001. 拖动div盒子(自定义指令v-directives)的更多相关文章
- directives 自定义指令
钩子函数 一个指令定义对象可以提供如下几个钩子函数 (均为可选): bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置.基本数据类型如果发生改变,不会触发,但是引用数据 ...
- vue 基础-->进阶 教程(2): 指令、自定义指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- vue2.0 自定义指令
Vue指令 Vue的指令以v-开头,作用在HTML元素上,将指令绑定在元素上,给绑定的元素添加一些特殊行为. 例如: <h1 v-if="yes">Yes</h1 ...
- 在vue中创建自定义指令
原文:https://dev.to/ratracegrad/creating-custom-directives-in-vue-58hh 翻译:心上有杨 指令是带有 v- 前缀的特殊属性.指令的作用是 ...
- vue自定义指令拖动div
钩子函数一个指令定义对象可以提供如下几个钩子函数:bind:只掉用一次,指令第一次绑定到元素是调用,在这里可以进行一次性的初始化设置inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不 ...
- [vue]vue条件渲染v-if(template)和自定义指令directives
条件渲染: v-if/template <div id="app"> <h1>v-show: display: none</h1> <di ...
- AngularJS自定义指令(Directives)在IE8下的一个坑
在项目中,由于要兼容到IE8,我使用1.2.8版本的angularJS.这个版本是支持自定义指令的.我打算使用自定义指令将顶部的header从其他页面分离.也就是实现在需要header的页面只用在&l ...
- Vue API(directives) 自定义指令
前言:除了vue的内置指令以外,我们可以定义自定义指令.内置指令表相见:https://www.cnblogs.com/ilovexiaoming/p/6840383.html 我们定义一个最简单的 ...
随机推荐
- Java程序设计(2021春)——第四章接口与多态笔记与思考
Java程序设计(2021春)--第四章接口与多态笔记与思考 本章概览: 4.1 接口(接口的概念和声明接口.实现接口的语法) 4.2 类型转换 4.3 多态的概念 4.4 多态的应用 4.5 构造方 ...
- 还怕问源码?Github上神级Android三方源码解析手册,已有7.6 KStar
或许对于许多Android开发者来说,所谓的Android工程师的工作"不过就是用XML实现设计师的美术图,用JSON解析服务器的数据,再把数据显示到界面上"就好了,源码什么的,看 ...
- tomcat启动时启动窗口出现乱码一招搞定
先来看看问题(图示),在tomcat的启动窗口打印的启动信息中包含了大量的中文乱码,虽然这些对tomcat本身的使用没有任何影响,但却非常碍眼,影响视觉效果! tomcat启动时启动窗口出现乱码的解决 ...
- MOOC大学计算机课程推荐
转自:https://zhuanlan.zhihu.com/p/30659834 这个是大佬总结的, 大学计算机课程 以下课程是我在MOOC上找到的所有我认为讲的好的. 主要是中国大学MOOC,学堂 ...
- Pytest+Allure 示例
0. 前言 简介 Allure 框架是一个灵活的.轻量级的.支持多语言的测试报告工具,它不仅以 Web 的方式展示了简介的测试结果,而且允许参与开发过程的每个人可以从日常执行的测试中,最大限度地提取有 ...
- 痞子衡嵌入式:其实i.MXRT下改造FlexSPI driver同样支持AHB方式去写入NOR Flash
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRT下改造FlexSPI driver以AHB方式去写入NOR Flash. 痞子衡前段时间写过一篇 <串行NAND Fl ...
- flutter中将widget转为base64
flutter中可以通过RepaintBoundary widget中的toImage方法将页面中的widget转为base64. 如何使用? 首先要在全局定义一个global key,分配给Repa ...
- COM笔记-动态链接
在实现了IUnknown之后,组件和客户之间只是一种非常松散的连接,这使用组件和客户各自可以发生变化而不会对对方造成什么影响. 下面讨论如何将组件放入到动态链接库(dll)中. 关于DLL更多内容可以 ...
- qt 中回调函数的实现
在QT中回调函数主要可以实现多态性,通过回调函数可以动态处理一些操作.在多线程中,当同时需要处理多个事务的时候,显然你会去创建多个线程类然后实例化,这显然会增加开发工作,当我们在线程类中加入一个回调函 ...
- WPF简易聊天室
一.聊天界面如下