开发者社区> 微笑de向阳> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

自定义指令

简介:
+关注继续查看
<body>
<div id="app">
<!-- 自定义的指令在使用时需添加v-前缀 -->
<div v-drag="123" id="box">helloworld</div>
<p v-drag>段落</p>
</div>
</body>
<script src="vue.js"></script>
<script>

// Vue.directive,用于全局注册一个指令,第一个参数是指令名字,第二个参数是指令的配置对象
Vue.directive("drag",{
// 指令配置对象中inserted方法,当指令被插入到元素中时指令,一般用于设置指令的具体功能。
// inserted函数中,第一个参数是指令所在的元素对象,第二个参数是指令信息。
inserted(el,dir){
// console.log(el);

el.style.position = "relative";
el.style.left = "0px";
el.style.top = "0px";

// console.log("指令被识别了");

function mv(e){
let offX = e.pageX - prevX;
let offY = e.pageY - prevY;

el.style.left = parseInt(el.style.left)+offX+"px";
el.style.top = parseInt(el.style.top)+offY+"px";

prevX = e.pageX;
prevY = e.pageY;
}
let prevX = 0;
let prevY = 0;

el.addEventListener("mousedown",function(e){
prevX = e.pageX;
prevY = e.pageY;
document.addEventListener("mousemove",mv)
})

document.addEventListener("mouseup",function(){
document.removeEventListener("mousemove",mv);
});


}
})

new Vue({
el:"#app",
data:{

}
})
</script>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
vue自定义指令
自定义指令需要注册后才能使用,vue 提供了两个注册方式全局注册和局部注册。全局注册使用 Vue.directive()方法来注册一个全局自定义指令,该方法接受两个参数,第一个参数是指令的 ID;第二个参数是一个定义对象或者函数对象,指令要实现的功能在这个对象中定义。
12 0
2022年了!用过Vue的自定义指令吗?
前言 如今Vue占据了国内前端市场的大壁江山,在前端求职过程中,Vue的相关面试题也是越来越多。之所以Vue如此火热,很大部分原因就是它的渐进式、组件化、指令式等思想,让普通开发人员非常好上手。 指令是一个Vue项目用的最多的东西之一了,今天我们就来讲解Vue指令中的一个分支:自定义指令。
28 0
冇事来学系--Vue2.0中自定义指令
什么是自定义指令 vue官方提供了v-text、v-for、v-if、v-model等指令,此外vue还允许开发者自定义指令
10 0
都用Vue3了吧?自定义指令用过没!
前言 Vue提供了各种各样的指令供我们使用,比如v-model、v-bind等等,可以说指令是Vue的重要功能点之一。除了Vue内置的一些指令外,Vue还允许我们自己定义指令,相信学过Vue的小伙伴应该都或多或少知道自定义指令,自定义指令在有些场景下非常的好用,它可以为我们省去超过工作量。 但是Vue3和Vue2中的自定义指令有一些区别,今天我们就重点学习一下Vue3中自定义指令如何使用?
45 0
vue初体验-自定义指令
vue初体验-自定义指令
15 0
Vue(四)绑定样式、自定义指令
Vue(四)绑定样式、自定义指令
57 0
自定义滚动条
DOCTYPE> JavaScript 优雅,是一种岁月,它是历经生命种种而呈现出的一种淡若不惊,褪去了少时的稚嫩,而呈现出的一种成熟的韵味。一个优雅的人,一定有着独特的魅力,和饱满的,恬淡而丰盈的灵魂。
856 0
AngularJS-自定义指令
AngularJS的内置指令总归是有限的,特别是我们需要操纵dom时,就需要自己编写directive。有这样一个场景,管理系统中切换状态,见图1. 图1 切换状态时的确认框效果 那么就可以定义指令“ng-confirm-click”,js: html: <td> <a ctrip-confirm-click ng-show="item.statu
876 0
+关注
微笑de向阳
一只普普通通的码农
17
文章
165
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载