Vue.directive自定义指令的使用详解_网络技术_宿州市腾雀网络科技有限公司

Vue.directive自定义指令的使用详解

发布时间 - 2026-01-11 00:06:23 点击率：次

很多教程都是在讲自定义指令的概念和语法,看的相当蛋疼.本文不讲语法和概念,只讲用法.

自定义指令基本就是用来操作DOM的,虽然官方推荐数据驱动视图,有时候还是需要自定义指令来操作DOM,指令可复用.

1. 自定义指令实现拖拽

HTML:

 <div v-drag>我可以拖拽</div>

JS:

Vue.directive('drag', 
 inserted:function(el){ //inserted 钩子函数:当元素被插入父元素时触发,可省略
  let oDiv=el; //el --> 触发的DOM元素
  oDiv.onmousedown=function(e){
    let l=e.clientX-oDiv.offsetLeft;
    let t=e.clientY-oDiv.offsetTop;
    document.onmousemove=function(e){
      oDiv.style.left=e.clientX-l+'px';
      oDiv.style.top=e.clientY-t+'px';
    };
    oDiv.onmouseup=function(){
      document.onmousemove=null;
      oDiv.onmouseup=null;
    }
  }
})

自定义指令还可以引入第三方插件,之前都是用JQuery来构建项目.

自定义指令的好处就是不管之前是用什么写的JQuery还好或是原生js也好都可以直接拿来封装成自定义指令,不需要重写

例如这个拖拽:

Drag.js:

export default function(el){
  let oDiv=el;
  oDiv.onmousedown=function(e){
    let l=e.clientX-oDiv.offsetLeft;
    let t=e.clientY-oDiv.offsetTop;
    document.onmousemove=function(e){
      oDiv.style.left=e.clientX-l+'px';
      oDiv.style.top=e.clientY-t+'px';
    };
    oDiv.onmouseup=function(){
      document.onmousemove=null;
      oDiv.onmouseup=null;
    }
  }
}

Vue:

import drag from 'drag.js'
Vue.directive('drag',drag)

HTML:

<div v-drag>我可以拖拽</div>

2. 图片加载

图片在加载过程中,未加载完成时,使用一个随机的颜色占位,图片加载完后直接显示,可以使用自定义指令来完成

HTML:

  <img v-imgUrl="url"></img> //参数不可以直接填写url地址

  data () {
    url:'src/assets/logo.png'
  }

Vue:

  Vue.directive('imgUrl',function(el,binding){
    var color=Math.floor(Math.random()*1000000);//设置随机颜色
    el.style.backgroundColor='#'+color;

    var img=new Image();
    img.src=binding.value;// -->binding.value指的是指令后的参数
    img.onload=function(){
      el.style.backgroundColor='';
      el.src=binding.value;      
    }
  })

可以使用lodash.js工具库

vue更多的API整理-->GO

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue自定义指令 # vue2.0 # 自定义指令 # vue2 # vue使用自定义指令实现按钮权限展示功能 # vue全局自定义指令和局部自定义指令的使用 # 详解Vue自定义指令及使用 # vue使用自定义指令实现拖拽 # 使用vue自定义指令开发表单验证插件validate.js # vue自定义指令directive的使用方法 # vue 使用自定义指令实现表单校验的方法 # Vue自定义指令使用方法详解 # Vue自定义指令简介和基本使用示例 # 自定义 # 拖拽 # 加载 # 可以使用 # 都是 # 是在 # 还可以 # 不需要 # 不可以 # 可以直接 # 重写 # 第三方 # 指的是 # 来完成 # 完后 # 不讲 # 大家多多 # 过程中 # 复用 # 只讲

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：gii是yii框架的吗

下一篇：EF Core怎么在查询中使用变量 EF Core闭包查询变

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：gii是yii框架的吗

下一篇：EF Core怎么在查询中使用变量 EF Core闭包查询变