对elementui中el-popover增加拖拽功能

置顶 已于 2022-03-16 17:00:39 修改
阅读量1.9k 收藏 1
点赞数
分类专栏： 前端 vue 文章标签： vue jquery
于 2020-12-04 14:49:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lixu_boke/article/details/110638775
版权
前端 同时被 2 个专栏收录
30 篇文章 0 订阅
订阅专栏
vue
26 篇文章 0 订阅
订阅专栏

我这里是依据原生的jq进行操作的；

通过鼠标事件进行操作，通过鼠标的onmousemove事件进行拖拽移动定位；通过onmouseup进行管控拖拽结束功能

话不多说上代码：

首先是html的代码，先是使用咱们的el-popover

使用之后咱们通过代码的细化可以看到在el-popover中写了一个它自身的Class：popoverClass，通过这个class咱们可以获取到它的dom节点

通过console.log(popover)输出

我们可以看到其中的层次结构然后使用debugger，你可以看到下面的children[0]中获取的是咱们的el-popover__title，通过这个来做咱们的拖拽地址，不能让点所有的地方都能进行拖拽，当然你也可以根据业务来进行，我这里拖拽的就是头部

然后咱们来看看我的完整代码

使用

 

lixu_boke
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
vue实现element-ui对话框可拖拽功能
12-03
element-ui对话框可拖拽及边界处理 应业务需求，需要实现对话框可拖拽问题，应element-ui没有提供官方支持，于是便参考大神的文章，得出了适合业务需要的解决方案。很多大神给出的代码是没有解决边界问题的，但是不解决边界问题存在一个bug，拖到不可视区域后边再也拖不回来了，不信你们可以试试。 在实现的功能的情况下，封装成了js文件，然后再main.js中引入后可全局使用。 还是上代码吧 功能实现代码directives.js代码如下： import Vue from 'vue'; // v-dialogDrag: 弹窗拖拽属性 Vue.directive('dialogDrag
react-popover：一个用于React的智能popover组件
02-26
目前尚无计划使用向后移植的修补程序来支持该库的较早版本，并且不欢迎为此目的使用PR，因为这会增加作者的维护成本。 安装 yarn add react-popover 例子 看看。 API export default Popover(props, target) props ...
Element 表格内的 Popover 弹出框可以任意拖动位置
单飞吧的博客
03-21 2040
在Element 表格内的 Popover 弹出框，实现可以任意拖动位置，主要参数 trigger=“manual” 为了实现点击空白处不能隐藏，popper-class 动态添加 calss，ref 定义 ref 控制 Popover 显示隐藏 <el-table-column prop="pageName" label="来源" header-align="center" align="left" show-overflow-tooltip width="160"> <tem
vue项目实现el-popover弹窗拖拽位置以及实现弹窗的拖拽调整大小功能
lFFFFFFl的博客
07-17 2627
vue项目实现el-popover弹窗拖拽位置以及实现弹窗的拖拽调整大小功能
Vue进阶（幺零五）：elementUI 实现表格行列拖拽_vuedraggable+elementui table
最新发布
2401_84619986的博客
05-16 535
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；必须是唯一的，如ID，不然会出现排序不对的情况。第二阶段:移动端开发技术。第三阶段:前端常用框架。
vue中实现拖拽功能
weixin_54523278的博客
05-28 6285
自定义的全局指令 提示：拖拽指令 文章目录自定义的全局指令一、拖拽1.自定义拖拽指令2.页面挂载3.css样式 提示：以下是本篇文章正文内容，下面案例可供参考 一、拖拽 1.自定义拖拽指令 代码如下（示例）：仅供参考 data(){ return { params:'' } }, directives: { // 自定义拖拽指令，先声明这个指令 drag(el) { // 可就在里写指令的js代码 const oDiv = el // 当前元素
vue下el-popover组件实现滚轴跟随功能
10-19 2100
vue中el-popover组件点击弹出内容的情况下，滚动鼠标，实现弹出内容和组件不分离
element使用el-table和el-popover结合使用，实现鼠标移入标题栏显示气泡卡片
m0_64785232的博客
07-15 1109
实现思路：使用插槽：可以通过标记顺序来看,可以忽略序号1上方的代码（这边我是根据需求，进行了一个文字通过状态值进行了显示判断）
制作可拖拽组件的大屏
Whuiry的博客
11-23 538
解决制作大屏当中遇到的相关问题并记录
react-native-popover-view：经过测试，适应性强，轻量级本机组件
02-05
React本机弹出视图 经过测试的，适应性强的轻量级<Popover>组件，用于本机响应。 经过测试并可以在iOS和Android上使用。 可以在Web上运行，但不受官方支持。 它完全用TypeScript编写，但是即使JS线程很忙，它也使用...
react-popover
05-07
Popover React组件 安装 npm install --save @idui/react-popover yarn add @idui/react-popover 好处 完全容易定制。 它有很多道具，包括动画，className，箭头可见性等。 使用样式化组件进行样式化。 能够根据...
react-popover:完全控制的Popover组件
05-06
React简单的弹出窗口基于完全控制的Popover组件。 安装 $ npm install react-simple-popover用法import Popover from 'react-simple-popover' ;import React , { Component } from 'react' ;class PopoverDemo ...
react-native-modal-popover：使用Modal的React-Native纯JS popover
02-05
纯JS popover组件，用于本机 关于本模块 原始的现在已过时，因此我决定发布自己的模块，以避免在package.json中使用github url。 在重写过程中有些东西丢失了，但是现在它使用了Modal和本机动画驱动程序，并且还具有...
Elementui Popover点击拖动滚动条关闭
qq_39211165的博客
06-16 2847
场景 在非固定列表格中使用 Popover 弹出框，并且 el-popover中还有 Select 选择器 和 TimePicker 时间选择器 等 Popover 弹出框，正常点击页面的时候会同时消失，但是拖动点击非固定列的滚动条的时候不消失且不跟随表头移动，因为 Popover 默认是以 body 为基准。 解决方法 使用监听与 Popover无关的滚动条事件，模拟鼠标事件关闭它。 document.body.click() document.dispatchEvent(new CustomEvent(
实现在vue中element-ui的el-dialog弹框拖拽
热门推荐
sinat_21902709的博客
01-18 2万+
1、在 utils 中新建 directives.js 文件 import Vue from 'vue' // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialo...
vue-treeselect的自定义部分说明和使用心得
lixu_boke的博客
07-23 1万+
在vue中出现了各种各样的框架，vue-treeselect就是vue的树选择；就是基于vue的多选组件 在平常的情况下一般我把vue-treeselect再次封装一遍为自己业务提供便利 当然它的功能还是有很多的例如：单选、多选、模糊搜索、清除等等 不说废话了直接看代码吧 咱们来一个一个说明一下吧 首先命名一个树的名字，到时候组件调用的时候好调用也就是name 之后是透传的参数和数据配置props组件肯定是子的嘛，props中的东西都是可以从父级里面透传过来的 template就是我所需
vue-elementui-admin中v-has的自定义指令和v-if的冲突问题
lixu_boke的博客
02-21 3575
在vue-elementui-admin的后台管理系统中往往就会使用到按钮的权限控制以及角色的权限控制问题，一般情况使用的就是自定义指令v-has的使用，在这个后台管理系统中就有这个自定义指令； 不说太多直接上代码的使用方式： 如上面的如果v-if和v-hasPermi同时使用时，除非我们页面进行重定向，v-haspermi是不会起到作用的，就是因为这里的v-if把咱们的dom元素给删除了，导致这个v-haspermi找不到这个dom元素了，所以我们把这里的v-if改为v-show就可以使用了 .
idea中添加less并解析为css使用
lixu_boke的博客
10-27 3047
1、首先先全局进行下载less 在idea先查看自己是否已经安装好node 检查好之后通过npm安装less npm i -g less 安装好less后来到设置中 打开后查找file watchers，如果没有查到可以进行以下操作进行查找，查到后进行下载安装 然后就能在工具中看到file watchers 进去后点击+号进行添加 然后做完这些可能你在添加less文件的过程中你会把less文件添加为text文件，她就不识别这个less文件了， 在设置中...
js中filter()、find()的使用
lixu_boke的博客
07-27 2793
filter: 作用：被用于对数组的过滤后，创建一个新的数组，新的数组是通过过滤后符合要求的数据 用法： es6语法 例子： es6: find: 作用：被用于获取数组过滤中第一个符合测试元素的值 用法： es6: 例子： es6: filter()和find()两个都是如果测试的值为空，则返回值返回undefined ...
如何修改elementui的el-popover的样式
06-09
要修改 ElementUI 的 el-popover 的样式，您可以采用以下几种方式： 1. 使用全局样式表覆盖 ElementUI 的默认样式。您可以使用 CSS 选择器来选择您需要修改的元素，并将样式应用到该元素上。例如，要修改 el-popover 的背景颜色，您可以使用以下代码： ```css .el-popover__popper { background-color: red; } ``` 2. 修改 ElementUI 的主题样式。ElementUI 提供了一套主题样式，您可以根据需要自定义主题。具体操作请参考 ElementUI 的官方文档。 3. 使用 scoped 样式表。如果您只需要修改特定页面或组件中的 el-popover 样式，可以使用 scoped 样式表。例如： ```html <template> <el-popover> <p>这是一段内容</p> </el-popover> </template> <style scoped> .el-popover__popper { background-color: red; } </style> ``` 以上是三种常见的修改 ElementUI el-popover 样式的方法，您可以根据实际需求选择适合您的方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值