当前位置: 首页 > news >正文

vue实现悬浮窗拖动的自定义指令

 首先在自己的项目根目录下建一个 src --> config --> drag.js

然后在main.js中全局引入

//鼠标拖动
import drag from '@/config/drag';
Vue.use(drag);

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) {//子元素的id里面只要包含字符串title都可以捕捉到if (el.firstChild.id.indexOf("floatTitle") != -1) {el.firstChild.onmousedown = function (e) {var disx = e.pageX - el.offsetLeft;var disy = e.pageY - el.offsetTop;// console.log(e.pageX,el.offsetLeft);document.onmousemove = function (e) {// el.style.cursor = 'move';el.style.left = e.pageX - disx + 'px';el.style.top = e.pageY - disy + 'px';// console.log(el.style.left,el.style.top);}document.onmouseup = function () {// el.style.cursor = 'default';document.onmousemove = document.onmouseup = null;}}} else {el.onmousedown = function (e) {var disx = e.pageX - el.offsetLeft;var disy = e.pageY - el.offsetTop;// console.log(e.pageX,el.offsetLeft);document.onmousemove = function (e) {// el.style.cursor = 'move';el.style.left = e.pageX - disx + 'px';el.style.top = e.pageY - disy + 'px';// console.log(el.style.left,el.style.top);}document.onmouseup = function () {// el.style.cursor = 'default';document.onmousemove = document.onmouseup = null;}}}},//当VNode更新的时候会执行updated,可以触发多次//   updated: function (el) {}
});
export default drag;

在组件中使用

<div v-drag class="outerContain"><div class="floatLayer" id="floatTitle"></div>
</div>

http://www.lryc.cn/news/261077.html

相关文章:

  • gitee(ssh)同步本地
  • Redis新数据类型-Bitmaps
  • web前端之vue组件传参、各种传参的不同写法、语法糖
  • 基于Nexus搭建Maven私服基础入门
  • JavaScript自执行函数:用途、好处
  • Git使用无法拉取
  • 来聊聊CAS
  • 【EventBus】EventBus源码浅析
  • Buck电源设计常见的一些问题(二)MOS管炸机问题
  • Javascript高频面试题
  • 锁--07_2---- index merge(索引合并)引起的死锁
  • 后端打印不了trace等级的日志?-SpringBoot日志打印-Slf4j
  • 声明式编程Declarative Programming
  • 人工智能与天文:技术前沿与未来展望
  • JeecgBoot 框架升级至 Spring Boot3 的实战步骤
  • 论文阅读——Semantic-SAM
  • gitlab下载,离线安装
  • 【SpringBoot篇】Interceptor拦截器 | 拦截器和过滤器的区别
  • conan入门(三十六):在set_version方法中从pom.xml中读取版本号实现动态版本定义
  • 为什么 GAN 不好训练
  • select、poll、epoll 区别有哪些
  • 大模型下开源文档解析工具总结及技术思考
  • 【华为数据之道学习笔记】5-4 数据入湖方式
  • Vue3-03-reactive() 响应式基本使用
  • OpenAI开源超级对齐方法:用GPT-2,监督、微调GPT-4
  • TeeChart.NET 2023.11.17 Crack
  • 计算机网络常见的缩写
  • vue cli 脚手架之配置代理
  • STM32启动流程详解(超全,startup_stm32xx.s分析)
  • 小程序接口OK,桌面调试接口不行