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

Element实现el-dialog弹框移动、全屏功能

1、在Vue项目中src/utils目录中创建dialog.js,用来定义draggable-dialog;

import Vue from 'vue'
Vue.directive('draggable-dialog', { // 属性名称draggable-dialog,前面加v- 使用bind(el, binding, vnode) {const dialogHeaderEl = el.querySelector('.el-dialog__header')const dragDom = el.querySelector('.el-dialog')dialogHeaderEl.style.cssText += ';cursor:move;'dragDom.style.cssText += ';top:0px;'// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);const getStyle = (function () {if (window.document.currentStyle) {return (dom, attr) => dom.currentStyle[attr]} else {return (dom, attr) => getComputedStyle(dom, false)[attr]}})()dialogHeaderEl.onmousedown = (e) => {// 鼠标按下,计算当前元素距离可视区的距离const disX = e.clientX - dialogHeaderEl.offsetLeftconst disY = e.clientY - dialogHeaderEl.offsetTopconst dragDomWidth = dragDom.offsetWidth// const dragDomHeight = dragDom.offsetHeightconst screenWidth = document.body.clientWidthconst screenHeight = document.body.clientHeightconst minDragDomLeft = dragDom.offsetLeftconst maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidthconst minDragDomTop = dragDom.offsetTop// const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeightconst maxDragDomTop = screenHeight - dragDom.offsetTop// 不需要-dragDomHeight// 获取到的值带px 正则匹配替换let styL = getStyle(dragDom, 'left')let styT = getStyle(dragDom, 'top')if (styL.includes('%')) {styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)} else {styL = +styL.replace(/\px/g, '')styT = +styT.replace(/\px/g, '')}document.onmousemove = function (e) {// 通过事件委托,计算移动的距离let left = e.clientX - disXlet top = e.clientY - disY// 边界处理if (-(left) > minDragDomLeft) {left = -minDragDomLeft} else if (left > maxDragDomLeft) {left = maxDragDomLeft}if (-(top) > minDragDomTop) {top = -minDragDomTop} else if (top > maxDragDomTop) {top = maxDragDomTop}// 移动当前元素dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`// emit onDrag eventvnode.child.$emit('draggable-dialog')}document.onmouseup = function (e) {document.onmousemove = nulldocument.onmouseup = null}}}
})

2、 在main.js文件中引入dialog.js,代码如下:

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/utils/dialog.js'Vue.use(ElementUI)Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

3、页面中的el-dialog标签上添加v-draggable-dialog

<el-dialogid="dragDialog"v-draggable-dialog:fullscreen="dialogFullScreen":v-if="showDialog":visible.sync="showDialog"title="查看"><template slot="title"><div class="custom_dialog_header"><span class="el_dialog_title">查看详情</span><div class="custom_dialog_menu" @click="screenClick"><i class="el-icon-full-screen"></i></div></div></template><div>展示内容</div ></el-dialog>//全屏  定义属性
dialogFullScreen: false
showDialog: false
//全屏用的方法
screenClick() {this.$nextTick(() => {this.dialogFullScreen = !this.dialogFullScreenconst dialog = document.querySelector('#dragDialog .el-dialog')dialog.style.left = '0'dialog.style.top = '0'})}
//如果 移动弹窗位置,第二次点击没有居中,可以在打开弹窗时,调用recoveryPosition方法
recoveryPosition() {this.$nextTick(() => {const dialog = document.querySelectorAll('.el-dialog__wrapper .el-dialog')if (dialog.length > 0) {dialog.forEach((item) => {item.style.left = '0'item.style.top = '0'})}})},
//全屏样式  
::v-deep.custom_dialog_header {display: flex;justify-content: space-between;
}
::v-deep .custom_dialog_menu {padding: 7px 30px 0 0;
}
::v-deep .custom_dialog_menu i {color: #909399;font-size: 15px;
}
::v-deep.el-icon-full-screen {cursor: pointer;
}

说明:v-draggable-dialog 是移动位置用的 fullscreen 是全屏的属性 添加全屏功能 要加id dragDialog

相关文章:

Element实现el-dialog弹框移动、全屏功能

1、在Vue项目中src/utils目录中创建dialog.js&#xff0c;用来定义draggable-dialog&#xff1b; import Vue from vue Vue.directive(draggable-dialog, { // 属性名称draggable-dialog&#xff0c;前面加v- 使用bind(el, binding, vnode) {const dialogHeaderEl el.querySe…...

Ubuntu 下 nginx-1.24.0 源码分析 - ngx_init_cycle 函数 - 详解(11)

详解&#xff08;11&#xff09; 初始化配置解析上下文 senv environ;ngx_memzero(&conf, sizeof(ngx_conf_t));/* STUB: init array ? */conf.args ngx_array_create(pool, 10, sizeof(ngx_str_t));if (conf.args NULL) {ngx_destroy_pool(pool);return NULL;}conf.te…...

千峰React:案例一

做这个案例捏 因为需要用到样式&#xff0c;所以创建一个样式文件&#xff1a; //29_实战.module.css .active{text-decoration:line-through } 然后创建jsx文件&#xff0c;修改main文件&#xff1a;导入Todos&#xff0c;写入Todos组件 import { StrictMode } from react …...

部署Joplin私有云服务器postgres版-docker compose

我曾经使用过一段时间 Joplin&#xff0c;官方版本是收费的&#xff0c;而我更倾向于将数据掌握在自己手中。因此&#xff0c;在多次权衡后&#xff0c;我决定自己搭建 Joplin 服务器并进行尝试。 个人搭建的版本与数据库直连&#xff0c;下面是使用 Docker Compose 配置数据库…...

rust学习笔记6-数组练习704. 二分查找

上次说到rust所有权看看它和其他语言比有什么优势&#xff0c;就以python为例 # Python3 def test():a [1, 3, -4, 7, 9]print(a[4])b a # 所有权没有发生转移del b[4]print(a[4]) # 由于b做了删除&#xff0c;导致a再度访问报数组越界if __name__ __main__:test() 运行结…...

Jsmoke-一款强大的js检测工具,浏览器部署即用,使用方便且高效

目录标题 Jsmoke &#x1f6ac;&#x1f6ac; by Yn8rt使用方式界面预览功能特性支持的敏感信息类型 Jsmoke &#x1f6ac;&#x1f6ac; by Yn8rt ​ 该插件由 Yn8rt师傅 开发&#xff0c;插件可以理解为主动版的hae和apifinder&#xff0c;因为其中的大多数规则我都引用了&a…...

PyCharm中通过命令行执行`pip`命令下载到哪里了:虚拟环境目录下

PyCharm中通过命令行执行pip命令下载到哪里了:虚拟环境目录下 在PyCharm中通过命令行执行pip命令安装工具包,包的下载位置取决于多种因素 虚拟环境 如果项目使用了虚拟环境(通常是推荐的做法): Windows:虚拟环境通常位于项目目录下的.venv文件夹(默认情况)或你指定…...

Spring Boot操作MaxComputer(保姆级教程)

目录 引言 一、引入依赖 二、配置文件 application.properties&#xff08;信息用自己的奥&#xff09; 三、实体类User.java 四、UserController 五、UserService 六、UserDao 七、UserDao.xml 八、postman 访问&#xff0c;成功查询数据 附件(修改和删除数据) 引言…...

Spring的构造注入

1.开发步骤2.构造方法的重载 2.1参数个数不同2.2构造参数个数相同时 3.注入总结 注入&#xff1a;通过Spring的配置文件&#xff0c;为成员变量赋值 Set注入&#xff1a;Spring调用Set方法&#xff0c;通过配置文件&#xff0c;为成员变量赋值 构造注入&#xff1a;Spring调用…...

服务器IPMI用户名、密码批量检查

背景 大规模服务器部署的时候&#xff0c;少不了较多的网管和监测平台&#xff0c;这些平台会去监控服务器的性能、硬件等指标参数&#xff0c;为了便于管理和控制&#xff0c;则需要给服务器IPMI带外管理添加较多的用户&#xff0c;这就需要对较多的服务器检查所对应的IPMI用…...

管理后台环境配置

后端配置及启动 a. 软件安装 1. Java sdk 1.8 2. maven 3.6 3. intellij IDEA 2024 4. Visual C Redistributable 5. mongodb 7.0 6. mysql 8.0 双击安装&#xff1a;mysql-installer-community-8.0.41.0.msi 版本选择&#xff1a;Full&#xff0c;包括服务器和客户端 …...

element-ui infiniteScroll 组件源码分享

简单分享 infiniteScroll 组件源码&#xff0c;主要有以下四个方面&#xff1a; 1、infiniteScroll 页面结构。 2、infiniteScroll 组件属性。 3、组件内部的方法。 4、存在的问题。 一、infiniteScroll 页面结构&#xff1a; 二、页面属性。 2.1 infinite-scroll-disab…...

Pany-v2:LFI漏洞探测与敏感文件(私钥窃取/其他)自动探测工具

地址:https://github.com/MartinxMax/pany 关于Pany-v2 Pany-v2 是一款 LFI&#xff08;本地文件包含&#xff09;漏洞探测工具&#xff0c;具备自动识别敏感文件的能力。它能够利用 LFI 漏洞检测并提取 id_rsa 私钥、系统密码文件以及其他可能导致安全风险的敏感信息。该工具…...

供应链管理系统--升鲜宝门店收银系统功能解析,登录、主界面、会员 UI 设计图(一)

供应链管理系统--升鲜宝门店收银系统功能解析&#xff0c;登录、主界面 会员 UI 设计图&#xff08;一&#xff09;...

Day11,Hot100(贪心算法)

贪心 &#xff08;1&#xff09;121. 买卖股票的最佳时机 第 i 天卖出的最大利润&#xff0c;即在前面最低价的时候买入 class Solution:def maxProfit(self, prices: List[int]) -> int:min_price prices[0]ans 0for price in prices:ans max(ans, price - min_price…...

nss刷题4

[SWPUCTF 2023 秋季新生赛]Pingpingping 看看源码&#xff0c;首先是get传参Ping_ip.exe,然后如果请求了_ping参数&#xff0c;就会执行ping命令&#xff0c;执行三次 <?php highlight_file(__FILE__); error_reporting(0); $_ping $_GET[Ping_ip.exe]; if(isset($_ping…...

Eclipse 编译项目指南

Eclipse 编译项目指南 引言 Eclipse 是一款功能强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;广泛用于Java、C/C、Python等多种编程语言的开发。在Eclipse中编译项目是进行软件开发的基础步骤。本文将详细介绍如何在Eclipse中编译项目&#xff0c;包括项目设置…...

天佐.乾坤袋 基于抽屉式文件存储的NoSql数据库

天佐.乾坤袋 天佐.乾坤袋 简介 天佐.乾坤袋 基于抽屉式文件存储的NoSql数据库&#xff0c;可用于文件打包&#xff0c;数据整合&#xff0c;加密存放等多种用途。可以方便快捷的搭建和部署存储应用的系统。 传说: 弥勒所有&#xff0c;专做储物之用。拥有不可思议之力&#x…...

win11编译pytorch cuda128版本流程

Geforce 50xx系显卡最低支持cuda128&#xff0c;torch cu128 release版本目前还没有释放&#xff0c;所以自己基于2.6.0源码自己编译wheel包。 1. 前置条件 1. 使用visual studio installer 安装visual studio 2022&#xff0c;工作负荷选择【使用c的桌面开发】,安装完成后将…...

Windows 11 下正确安装 Docker Desktop 到 D 盘的完整教程

文章目录 Windows 11 在 D 盘正确安装 Docker Desktop 的完整教程**前言****准备工作****1. 手动创建 Docker 相关目录**&#xff08;⚠️ **这一步非常重要**&#xff0c;否则会报错&#xff09;**2. 下载 Docker Desktop 安装程序****3. 使用管理员权限打开终端** **安装 Doc…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...