vue实现可拖拽dialog封装

一、实现modal弹窗组件

<template><divv-if="visible"class="customer-dialog"id="customer-dialog":style="dialogStyles"v-dialogDrag:[dialogDrag]><div class="dialog-container"><divclass="dialog-header"id="dialog-header":style="{'--dialog-center': `${center ? 'center' : 'left'}`}"><slot name="header" v-if="footerHide"><span class="dialog__title">{{ title }}</span></slot><button class="dialog__header-close" @click="closeDialog"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><div class="dialog-body"><slot> </slot></div><divclass="dialog-footer":style="{'--dialog-center': `${center ? 'center' : 'right'}`}"v-if="footerHide"><slot name="footer"><el-button size="small" @click="closeDialog">取消</el-button></slot></div></div></div>
</template><script>
export default {name: 'CustomDialog',props: {title: {type: String,default: 'Default Title'},/*** @description 是否开启拖拽功能* @default false*/dialogDrag: {type: Boolean,default: false},width: {type: [Number, String],default: 500},maxHeight: {type: [Number, String],default: 800},/*** 未传值时候,默认* top: 30%* 传入值时候,以传入值为准*/top: {type: Number,default: 0},/*** 未传值时候,默认* left: 50%* 传入值时候,以传入值为准*/left: {type: Number,default: 0},zIndex: {type: Number,default: 9999},/*** 是否显示* @default false*/value: {type: Boolean,default: false},/*** 是否居中* @default true*/center: {type: Boolean,default: false},/*** 是否隐藏footer* @default false*/footerHide: {type: Boolean,default: false},/*** 是否隐藏header* @default false*/headerHide: {type: Boolean,default: false}},computed: {dialogStyles () {return {'--dialog-width':typeof this.width === 'number' ? `${this.width}px` : this.width,'--dialog-max-height':typeof this.maxHeight === 'number'? `${this.maxHeight}px`: this.maxHeight,'--dialog-top': this.top? typeof this.top === 'number'? `${this.top}px`: this.top: '30%','--dialog-left': this.left? typeof this.left === 'number'? `${this.left}px`: this.left: '50%','--dialog-z-index': this.zIndex};},visible: {get () {return this.value;},set (val) {this.$emit('input', val);}}},methods: {closeDialog () {this.visible = false;}}
};
</script><style scoped lang="scss">
.customer-dialog {width: var(--dialog-width);max-width: calc(100vw - 32px);max-height: var(--dialog-max-height);color: rgba(0, 0, 0, 0.88);line-height: 1.5714285714285714;list-style: none;margin: 0 auto;position: fixed;top: var(--dialog-top);left: var(--dialog-left);transform: translate(-50%, -50%);overflow: auto;margin: 0;box-sizing: border-box;background-color: #ffffff;background-clip: padding-box;border: 0;border-radius: 8px;box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);pointer-events: auto;z-index: var(--dialog-z-index);// overflow-y: auto;
}.dialog-container {width: 100%;background: white;border-radius: 5px;display: flex;flex-direction: column;justify-content: space-between;.dialog-header {width: 100%;background: rgba(0, 0, 0, 0.5);background-color: rgba(230, 233, 240, 0.15);border-bottom: 1px #e6e9f0 solid;padding: 10px 0;.dialog__title {font-weight: bold;display: block;font-size: 1rem;font-weight: bold;height: 32px;line-height: 32px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-left: 15px;}.dialog__header-close {position: absolute;top: 10px;right: 10px;padding: 5px;background: transparent;border: none;outline: none;cursor: pointer;font-size: 16px;&:hover {font-size: 16px;font-weight: bold;color: rgba(0, 0, 0, 0.88);background-color: rgba(0, 0, 0, 0.06);transition: all 0.3s;}}}.dialog-body {box-sizing: border-box;font-size: 14px;line-height: 1.5714285714285714;word-wrap: break-word;flex: 1;overflow: auto;padding: 0 20px;position: relative;}
}.dialog-header,
.dialog-body,
.dialog-footer {text-align: var(--dialog-center);margin-bottom: 10px;
}
.dialog-footer {display: flex;justify-content: var(--dialog-center);align-items: center;padding: 0 10px;
}
.footer-title {margin-right: 10px;
}
</style>

二、实现拖动自定义指令

/** @Description:拖拽指令* @Author: rjl* @Date: 2024-07-10 18:03:37* @LastEditTime: 2024-07-16 20:34:54* @LastEditors: Ran junlin*/
/*** 可拖动弹窗* @description 使用 v-dialogDrag 调用指令;*/import { nextTick } from 'vue';
export default {bind (el, binding) {nextTick(() => {const { arg } = binding;console.log(arg,'arg');if (!arg) return;const dialogHeaderEl = document.querySelector('.dialog-header');const dragDom = document.querySelector('.customer-dialog');if (!dialogHeaderEl || !dragDom) {return console.log('dom不存在');}dialogHeaderEl.style.cursor = 'move';// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);const sty =dragDom.currentStyle || window.getComputedStyle(dragDom, null);dialogHeaderEl.onmousedown = e => {// 鼠标按下,计算当前元素距离可视区的距离const disX = e.clientX - dialogHeaderEl.offsetLeft;const disY = e.clientY - dialogHeaderEl.offsetTop;// 获取到的值带px 正则匹配替换let styL, styT;// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为pxif (sty.left.includes('%')) {styL =+document.body.clientWidth *(+sty.left.replace(/\%/g, '') / 100);styT =+document.body.clientHeight *(+sty.top.replace(/\%/g, '') / 100);} else {styL = +sty.left.replace(/\px/g, '');styT = +sty.top.replace(/\px/g, '');}document.onmousemove = function (e) {// 通过事件委托,计算移动的距离const l = e.clientX - disX;const t = e.clientY - disY;// 移动当前元素dragDom.style.left = `${l + styL}px`;dragDom.style.top = `${t + styT}px`;//将此时的位置传出去//binding.value({x:e.pageX,y:e.pageY})};document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};};});}
};

三、使用

<ModaldialogDragv-model="dialogVisible"width="550px":left="790":top="240"title="区域查车"
><div class="body"><RTableref="table"v-loading="pending"border:tableData="tableData"row-key="id"size="small"stripewidth="100%"height="100%":column="columns"/></div>
</Modal>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/47838.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器人产业发展格局多元化,创业公司突破瓶颈需多维施策

当前&#xff0c;机器人产业的发展格局呈现出多元化、快速增长和技术不断创新的特点。从全球视角来看&#xff0c;机器人市场持续增长&#xff0c;预计到2026年全球人形机器人市场规模将超过20亿美元&#xff0c;到2030年有望突破200亿美元&#xff0c;显示出巨大的市场潜力和发…

adb命令操作手机各种开关

打开iqoo手机热点设置 adb shell am start -n com.android.settings/com.android.settings.Settings$\VivoTetherSettingsActivity蓝牙模块 检查蓝牙状态的ADB命令 检查蓝牙开关状态 adb shell settings get global bluetooth_on开启和关闭蓝牙 使用Intent操作蓝牙&#xf…

【数据结构】链表(LinkedList)详解

文章目录 [toc] 前言1. 链表的介绍1.1 链表的定义1.2 链表的结构种类 2. 单向链表的模拟实现2.1 创建链表2.2 打印链表2.3 求链表长度 3. 单向链表常见方法的模拟实现3.1 头插法3.2 尾插法3.3 指定位置插入3.4 查找值 key 的节点是否在链表中3.5 删除值为 key 的节点3.6 删除所…

【香橙派AIPro+opencv】基础数据结构、颜色转换函数和颜色空间

文章目录 前言基础数据结构PointScalarSizeRect常用函数 颜色空间转换函数cvtColor常见的颜色空间总结 前言 在计算机视觉和图像处理中&#xff0c;理解基础数据结构、颜色转换函数和颜色空间的概念是至关重要的。这些元素是我们处理和理解图像数据的基础。香橙派AIPro&#x…

栈(用C语言实现)

1. 栈 1.1 概念与结构 栈&#xff1a;⼀种特殊的线性表&#xff0c;其只允许在固定的⼀端进行插入和删除元素操作。进行数据插入和删除操作的⼀端称为栈顶&#xff0c;另⼀端称为栈底。栈中的数据元素遵守后进先出 LIFO&#xff08;Last In First Out&#xff09;的原则。 压…

android.app.application can not be cast to android.app.Activity

1&#xff0c;在做dialog 弹框提示的时候&#xff0c;报错了&#xff01; android.app.application can not be cast to android.app.Activity 看了一下代码&#xff0c;使用了全局的自定义的application类&#xff0c;但是没有在AndroidManifest.xml中添加该类的声明。也可以…

Richteck立锜科技电源管理芯片简介及器件选择指南

一、电源管理简介 电源管理组件的选择和应用本身的电源输入和输出条件是高度关联的。 输入电源是交流或直流&#xff1f;需求的输出电压比输入电压高或是低&#xff1f;负载电流多大&#xff1f;系统是否对噪讯非常敏感&#xff1f;也许系统需要的是恒流而不是稳压 (例如 LED…

【产品那些事】固件安全-关于OTA升级包分析

文章目录 前言什么是OTA?升级包(固件)的类型和架构案例tp-link路由器升级包怎么解包分析?binwalk安装及使用ubi_reader安装及使用unsquashfs安装及使用某车企OTA升级包通用Android OTA解包相关分区第二层解包前言 什么是OTA? OTA(Over-the-Air)是一种通过无线通信网络(…

adb查看网卡信息,并修改网卡mac地址

这种方法修改mac后&#xff0c;关机后会失效! 文章结尾有永久修改mac地址的方法! 1. 查看网卡的信息&#xff0c;以及mac地址&#xff0c;ip地址&#xff0c;子网掩码等 //查看所有网卡信息adb shell ifconfig//MAC地址&#xff1a; HWaddr 5e:2c:e9:58:3e:4f //IP地址&a…

小试牛刀-Telebot区块链游戏机器人

目录 1.编写目的 2.实现功能 2.1 Wallet功能 2.2 游戏功能 2.3 提出功能 2.4 辅助功能 3.功能实现详解 3.1 wallet功能 3.2 游戏功能 3.3 提出功能 3.4 辅助功能 4.测试视频 Welcome to Code Blocks blog 本篇文章主要介绍了 [Telebot区块链游戏机器人] ❤博主…

专业PDF编辑工具:Acrobat Pro DC 2024.002.20933绿色版,提升你的工作效率!

软件介绍 Adobe Acrobat Pro DC 2024绿色便携版是一款功能强大的PDF编辑和转换软件&#xff0c;由Adobe公司推出。它是Acrobat XI系列的后续产品&#xff0c;提供了全新的用户界面和增强功能。用户可以借助这款软件将纸质文件转换为可编辑的电子文件&#xff0c;便于传输、签署…

Python项目打包与依赖管理指南

在Python开发中&#xff0c;python文件需要在安装有python解释器的计算机的电脑上才能运行&#xff0c;但是在工作时&#xff0c;我们需要给客户介绍演示项目功能时并不一定可以条件安装解释器&#xff0c;而且这样做非常不方便。这时候我们可以打包项目&#xff0c;用于给客户…

数据结构课程设计:源代码(C)客房信息管理系统

main.c #include <unistd.h> #include "SeqList.h" #include "User.h"int main() {SL user;SLInit(&user);char ans 0;printf("是否需要导入昨日续住客人的数据&#xff1a;y/n\n");scanf(" %c", &ans);if (ans y){L…

vscode使用及调试方式和技巧

常用快捷键 ctrl ~ 显示隐藏终端面板 Ctrl\ 快速拆分文件编辑 Alt ↑↓ 移动当前代码行的位置 CtrlD 选中当前匹配项 CtrlB 切换侧边栏 alt 单机左键 或 长按鼠标滚轮鼠标左键下拉 添加多处光标 Ctrlp 快捷键设置 vscode调试 2022年了&#xff0c;该学会用VSC…

无人驾驶概览(1)

主要部分包括&#xff1a;高精度地图HD MAPS&#xff0c;定位Localization&#xff0c; 感知perception&#xff0c;预测 perdicition 规划 plan 控制 control 高精度地图HD MAPS中&#xff0c;几乎支持软件栈所有其他模块&#xff0c;包括定位感知预测和规划 定位Localizati…

Redis常用的5大数据类型

Reids字符串&#xff08;String&#xff09; 设置相同的key&#xff0c;之前内容会覆盖掉 Redis列表&#xff08;List&#xff09; 常用命令 从左往右放值 数据结构 Redis集合&#xff08;set&#xff09; sadd<key><value1><value2>...... 数据结构 Set数据…

[java]-包装类

学习目标 了解包装类是什么。了解装箱和拆箱机制自动装箱和自动拆箱 0.为什么要学习包装类&#xff1f; 在学习包装类之前&#xff0c;我们要了解包装类用来干什么&#xff1f; 前面提过的Java 8大数据类型&#xff08;整型&#xff1a;byte &#xff0c;short , int , long…

深入探索Flutter中的状态管理:使用Provider库

当涉及Flutter状态管理时,provider是一个强大且灵活的解决方案,它提供了一种简单且高效的方式来管理应用程序状态。本文将详细介绍Flutter中provider插件的使用方法、示例代码、各种使用场景以及注意事项。 1. 引入依赖 首先,需要在项目的pubspec.yaml文件中添加provider依…

Servlet运行过程

Servlet运行过程 Servlet程序是由WEB服务器调用&#xff0c;web服务器收到客户端的Servlet访问请求后&#xff1a; ①Web服务器首先检查是否已经装载并创建了该Servlet的实例对象。如果是&#xff0c;则直接执行第④步&#xff0c;否则执行第②步。 ②装载并创建该Servlet的…

AI测试入门(1):认识AI大语言模型(LLM)

AI测试入门&#xff08;1&#xff09;&#xff1a;认识AI大语言模型&#xff08;LLM&#xff09; 前言一、大语言模型的概述1. 什么是大语言模型&#xff1f;2. 大语言模型的历史发展 二、大语言模型的工作原理1. Transformer架构自注意力机制 2. 预训练与微调预训练微调 三、大…