Vue进阶(幺陆肆):自定义指令之拖拽指令_vue 自定义拖拽指令 循环dom,

+ [二、定义全局拖拽指令](#_7)
+ - [2.1 新建 drag.js 文件](#21__dragjs__10)
	- [2.2 在 main.js 中引入该文件即可,不需要vue.use();](#22__mainjs_vueuse_42)
	- [2.3 在页面中直接调用](#23__48)
+ [三、定义局部拖拽指令](#_52)
+ [四、拓展阅读](#_55)

一、前言

在博文《Vue进阶(九十一):自定义指令》中讲解了Vue自定义指令(局部、全局)的创建方法,及指令相关的钩子函数。此篇博文在此基础上实现vue自定义拖动指令。

二、定义全局拖拽指令

定义全局指令,需要在main.js中写入vue.directive('drag',{});即可。但是一般会先在项目中新建一个drag.js文件,在js文件内部实现拖拽逻辑,最后在dom代码中调用该指令。

2.1 新建 drag.js 文件
import Vue from 'vue';
//使用Vue.directive()定义一个全局指令;
//1.参数一:指令的名称,定义时指令前面不需要写v-;
//2.参数二:是一个对象,该对象中有相关的操作函数;
//3.在调用的时候必须写v-;
const drag = Vue.directive('drag',{
  //1.指令绑定到元素上会立刻执行bind函数,只执行一次;
  //2.每个函数中第一个参数永远是el,表示绑定指令的元素,el参数是原生js对象;
  //3.通过el.focus()是无法获取焦点的,因为只有插入DOM后才生效;
  bind:function(el){},
  //inserted表示一个元素,插入到DOM中会执行inserted函数,只触发一次
  inserted:function(el){
    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;
      }
    }
  },
  //当VNode更新的时候会执行updated,可以触发多次
  updated:function(el) {}
})
export default drag;

2.2 在 main.js 中引入该文件即可,不需要vue.use();
// 引入自定义拖拽指令
import drag from './directive/drag'

2.3 在页面中直接调用
### 自学几个月前端,为什么感觉什么都没学到??

----------------------------------------------------------------------------------

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的,会踩很多的坑,学习的过程中是比较的迷茫的。

最重要的是,在学习的过程中,不知道每个部分该学哪些知识点,学到什么程度才算好,学了能做什么。

很多自学的朋友往往都是自己去找资料学习的,资料上有的或许就学到了,资料上没有的或许就没有学到。



这就会给人一个错误的信息就是,我把资料上的学完了,估计也-就差不多的了。

但是真的是这样的吗?非也,因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线,你可以参考。



![](https://img-blog.csdnimg.cn/img_convert/15be8206a9f6e5bd9e8e930303b613ee.png)



还有很多的同学在学习的过程中一味的追求学的速度,很快速的刷视频,写了后面忘了前面,最后什么都没有学到,什么都知道,但是什么都不懂,要具体说,也说不出个所以然。



所以学习编程一定要注重实践操作,练习敲代码的时间一定要多余看视频的时间。
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值