自定义指令

简介:
<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>
相关文章
|
云安全 安全 小程序
等保测评|全面理解渗透测试
在数字化转型的大潮中,企业和组织纷纷拥抱互联网以拓展市场和服务客户,这不仅促进了业务发展,也带来了网络安全的新挑战。为了保护在线的机密文件和知识产权不受黑客攻击,渗透测试成为一种关键的安全评估手段。它通过模拟攻击来查找系统漏洞,帮助企业提前修补安全缺口。本文将介绍渗透测试的概念、必要性及主要执行方式,并探讨如何选择合适的测试服务机构,以确保企业的数字资产安全无虞。
|
网络协议 Android开发 Python
Android 抓包工具r0capture使用
Android 抓包工具r0capture使用
1555 1
|
JavaScript 开发者
Vue组件生命周期钩子函数有哪些?它们分别在什么时候触发?
Vue组件生命周期钩子函数有哪些?它们分别在什么时候触发?
455 0
|
机器学习/深度学习 PyTorch 算法框架/工具
PyTorch应用实战一:实现卷积操作
PyTorch应用实战一:实现卷积操作
339 0
|
存储 运维 负载均衡
解析iptables原里及设置规则
【4月更文挑战第21天】本文就是针对对iptables了解不多,需要知道其基本原理,数据包处理流向及常用的配置设置等进行总结叙述,以达到在最短的时间内找到所需求的知识,进行常规配置操作。
327 4
解析iptables原里及设置规则
|
网络协议
Wireshark 捕获和显示过滤器
Wireshark 捕获和显示过滤器
337 0
|
10月前
|
缓存 负载均衡 网络协议
DNSSEC
【10月更文挑战第17天】
650 1
|
11月前
|
存储 JavaScript 前端开发
Flux 架构模式和 Redux 区别
Flux架构模式和Redux都是前端状态管理工具,Flux强调单向数据流,通过Dispatcher分发Action到Store,再由View更新;Redux则简化了这一流程,使用单一的全局Store,通过Reducer纯函数处理状态变更,使状态管理更加集中和可预测。
|
10月前
|
供应链 区块链 数据安全/隐私保护
区块链技术在供应链金融中的创新实践
区块链技术在供应链金融中的创新实践
290 0
|
11月前
|
机器学习/深度学习 算法 PyTorch
Pytorch-SGD算法解析
SGD(随机梯度下降)是机器学习中常用的优化算法,特别适用于大数据集和在线学习。与批量梯度下降不同,SGD每次仅使用一个样本来更新模型参数,提高了训练效率。本文介绍了SGD的基本步骤、Python实现及PyTorch中的应用示例。
625 0