vue中自定义指令的使用
vue中除了内置的指令(v-show,v-model)还允许我们自定义指令
想要创建自定义指令,就要注册指令(以输入框获取焦点为例)
一、注册全局指令:
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el,binding) {
// 当前指令绑定的dom元素
//console.log(el);
// 指令传入的参数、修饰符、值 v-指令名称:参数.修饰符=值
// console.log(binding)
// 聚焦元素
el.focus()
}
})
二、注册局部指令:
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
使用也很简单:直接在元素上面使用v-focus即可:
<input type="text" v-focus/>
下面再举一个自定义指令的小例子:拖拽
<template>
<div id="derective">
<div v-drag class="dragnode">拖拽1</div>
<div v-drag.limit class="dragnode">拖拽2</div>
</div>
</template>
<script>
export default {
name: "derective",
data() {
return {};
},
directives: {
// 指令的定义
drag: {
bind(el, binding) {
console.log('bind');
// 当前指令绑定的dom元素
console.log(el);
// 指令传入的参数、修饰符、值 v-指令名称:参数.修饰符=值
console.log(binding)
el.onmousedown = function(e) {
var e = e || event;
let disX = e.clientX - el.offsetLeft;
let disY = e.clientY - el.offsetTop; document.onmousemove = function(e) {
var e = e || event;
let L = e.clientX - disX;
let T = e.clientY - disY; if (binding.modifiers.limit) {
if (L < 0) {
L = 0;
}
} el.style.left = L + "px";
el.style.top = T + "px";
}; document.onmouseup = function() {
document.onmousemove = null;
}; return false;
};
}
}
}
};
</script>
<style scoped>
.dragnode{
width: 200px;
height: 200px;
background-color: #f00;
position: absolute;
}
</style>
使用也很简单,只用在元素上添加v-drag或者v-drag.limit
- <div id="div1" v-drag.limit></div>
- <div id="div2" v-drag></div>
返回目录
vue中自定义指令的使用的更多相关文章
- vue中自定义指令
//vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...
- vue中自定义指令vue.direvtive,自定义过滤器vue.filter(),vue过渡transition
自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...
- Vue中自定义指令的使用方法!
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 DOM ...
- 051——VUE中自定义指令:directive
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue怎么自定义指令??
最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...
- vue 通过自定义指令实现 置顶操作;
项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令 ...
- Vue.directive 自定义指令
一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在 ...
- Vue2.0 【第二季】第1节 Vue.directive自定义指令
目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...
- Vue 3自定义指令开发
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是指令(directive) 在Angular和Vue中都有Direct ...
随机推荐
- Ubuntu安装截图软件shutter
参考链接: Ubuntu 安装和配置shutter截图软件 解决shutter不能编辑的问题:https://itsfoss.com/shutter-edit-button-disabled/ 安装前 ...
- mybatis中foreach使用方法
作者:学无先后 达者为先 作者:偶尔记一下 foreach一共有三种类型,分别为List,[](array),Map三种. 下面表格是我总结的各个属性的用途和注意点. foreach属性 属性 描述 ...
- STM32调试利器之ITM
原创: Osprey 鱼鹰谈单片机 2月17日 STM32 有一个代码跟踪功能,即 ITM,这个调试功能非常强大,可以替代串口输入输出功能,而且只需要占用一根 I/O 线就可以实现.当然它的好处不仅 ...
- BZOJ 1188 / Luogu P3185 [HNOI2007]分裂游戏 (SG函数)
题意 有n个格子,标号为0 ~ n-1,每个格子上有若干石子,每次操作可以选一个0 ~ n-2的格子上的一颗石子,分裂为两颗,然后任意放在后面的两个格子内,这两个格子可以相同.求使先手必胜的第一步的方 ...
- 立即执行函数与For. . .in语句
㈠立即执行函数 ⑴定义:在函数定义完,立即被调用,这样的函数叫做立即执行函数 ⑵语法:函数对象() ⑶注意:立即执行函数往往只会执行一次 ⑷示例1: (function(){ alert(" ...
- while循环与do. . . while循环语句
㈠导入 向页面中输出连续的数字 var n = 1; document.write(n++ +"<br />"); ㈡while循环 ⑴循环语句:通过循环语句可以反复的 ...
- Java进阶知识11 Hibernate多对多单向关联(Annotation+XML实现)
1.Annotation 注解版 1.1.应用场景(Student-Teacher):当学生知道有哪些老师教,但是老师不知道自己教哪些学生时,可用单向关联 1.2.创建Teacher类和Student ...
- Intel Code Challenge Elimination Round (Div.1 + Div.2, combined) C 倒序并查集
C. Destroying Array time limit per test 1 second memory limit per test 256 megabytes input standard ...
- Flask-配置参数
Flask配置 Flask 是一个非常灵活且短小精干的web框架 , 那么灵活性从什么地方体现呢? 有一个神奇的东西叫 Flask配置 , 这个东西怎么用呢? 它能给我们带来怎么样的方便呢? 首先展示 ...
- nginx的ngx_str_t
在nginx里的ngx_tr_t结构是字符串定义如下 typedef struct { size_t len; u_char *data; }ngx_str_t; 在给这样的结构体赋值的时候,ngin ...