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

【sgFloatDialog】自定义组件：浮动弹窗，支持修改尺寸、拖拽位置、最大化、还原、最小化、复位

news 2025/3/23 0:59:12

sgFloatDialog 

<template><div :class="$options.name" v-if="visible" :theme="theme" :size="size" :style="style"><!-- 托盘头部 --><div class="header" ref="header" @dblclick.stop.prevent="dblclickHeader"><div class="left"><div class="title"><i :class="titleIcon" style="margin-right: 5px" /><span>{{ title }}</span></div></div><div class="right" @mousedown.stop><!-- 控制托盘的图标按钮 --><div class="tray-btns"><divclass="icon-btn"v-if="show_rb_btn"v-show="![`rb`, `mn`, `lg`].includes(size)"@dblclick.stop@click.stop="size = `rb`"title="回到原来的位置"><i class="el-icon-bottom-right"></i></div><divclass="icon-btn"v-if="show_mn_btn"v-show="size !== `mn`"@dblclick.stop@click.stop="size = `mn`"title="最小化"><i class="el-icon-minus"></i></div><divclass="icon-btn"v-show="[`mn`, `lg`].includes(size)"@dblclick.stop@click.stop="toMd()"title="还原"><i :class="size === `lg` ? `el-icon-copy-document` : `el-icon-d-caret`"></i></div><divclass="icon-btn"v-show="size !== `lg`"@dblclick.stop@click.stop="size = `lg`"title="全屏"><i class="el-icon-full-screen"></i></div><div class="icon-btn" @dblclick.stop @click.stop="close"><i class="el-icon-close"></i></div></div></div></div><div class="body"><slot /></div><!-- 拖拽移动窗体 --><sgDragMoveref="sgDragMove":data="dragMoveDoms":cursor="{grab: 'default',grabbing: 'default',}"nearPadding="10":disabled="changeSizeStatus"@dragging="draggingMove"mousemoveNearSide/><!-- 拖拽改变窗体尺寸 --><sgDragSizev-if="resizeable":disabled="size === `lg`"@dragStart="changeSizeStatus = true"@dragging="draggingSize"@dragEnd="changeSizeStatus = false":minWidth="minWidth":minHeight="minHeight"/></div>
</template>
<script>
import sgDragMove from "@/vue/components/admin/sgDragMove";
import sgDragSize from "@/vue/components/admin/sgDragSize";
export default {name: "sgFloatDialog",components: {sgDragMove,sgDragSize,},data() {return {form: {},theme: ``, //主题//----------------------------------------titleIcon: `el-icon-question`,title: `浮动窗口标题`,// ----------------------------------------defaultRight: 100, //默认出现的位置defaultBottom: 20, //默认出现的位置defaultWidth: 400, //默认宽度defaultHeight: 500, //默认高度minWidth: 300, //最小宽度minHeight: 50, //最小高度// ----------------------------------------style_bk: null,style: {},visible: false,show_rb_btn: true, //是否显示回到右下角按钮show_mn_btn: true, //是否显示最小化按钮size: ``, //lg全屏最大化 lgl左侧最大化 lgr右侧最大化 md普通 mn最小 rb右下角changeSizeStatus: false, //避免修改尺寸的时候，也在拖拽移动窗体dragMoveDoms: [/* {canDragDom: elementDOM,//可以拖拽的位置元素moveDom: elementDOM,//拖拽同步移动的元素} */], //可以拖拽移动的物体resizeable: true,};},props: ["data", "value"],computed: {},watch: {value: {handler(d) {this.visible = d;},deep: true,immediate: true,},visible(d) {this.$emit("input", d);},data: {handler(newValue, oldValue) {//console.log(`深度监听${this.$options.name}：`, newValue, oldValue);if (Object.keys(newValue || {}).length) {this.form = JSON.parse(JSON.stringify(newValue));this.$g.convertForm2ComponentParam(`theme`, this);this.$g.convertForm2ComponentParam(`titleIcon`, this);this.$g.convertForm2ComponentParam(`title`, this);this.$g.convertForm2ComponentParam(`defaultRight`, this);this.$g.convertForm2ComponentParam(`defaultBottom`, this);this.$g.convertForm2ComponentParam(`defaultWidth`, this);this.$g.convertForm2ComponentParam(`defaultHeight`, this);this.$g.convertForm2ComponentParam(`minWidth`, this);this.$g.convertForm2ComponentParam(`minHeight`, this);this.$g.convertForm2ComponentParam(`resizeable`, this);this.$nextTick(() => {this.$el.style.setProperty("--defaultRight", `${this.defaultRight}px`); //js往css传递局部参数this.$el.style.setProperty("--defaultBottom", `${this.defaultBottom}px`); //js往css传递局部参数this.$el.style.setProperty("--defaultWidth", `${this.defaultWidth}px`); //js往css传递局部参数this.$el.style.setProperty("--defaultHeight", `${this.defaultHeight}px`); //js往css传递局部参数this.$el.style.setProperty("--minWidth", `${this.minWidth}px`); //js往css传递局部参数this.$el.style.setProperty("--minHeight", `${this.minHeight}px`); //js往css传递局部参数this.dragMoveDoms = [{canDragDom: this.$refs.header, //托盘的头部可以拖拽moveDom: this.$el, //拖拽的时候，整个上传列表一起跟随移动},];this.style_bk = {right: `${this.defaultRight}px`,bottom: `${this.defaultBottom}px`,width: `${this.defaultWidth}px`,height: `${this.defaultHeight}px`,};});}},deep: true, //深度监听immediate: true, //立即执行},resizeable: {handler(newValue, oldValue) {newValue === undefined || (this.resizeable = newValue === "" || newValue);},deep: true, //深度监听immediate: true, //立即执行},style: {handler(newValue, oldValue) {if (Object.keys(newValue || {}).length) {let { width, height, left, top } = newValue;width = parseInt(width);height = parseInt(height);left = parseInt(left);top = parseInt(top);if (width <= this.minWidth && height <= this.minHeight) {this.show_mn_btn = false;} else {this.show_mn_btn = true;}let right = innerWidth - left - width;let bottom = innerHeight - top - height;if (right <= this.defaultRight && bottom < this.defaultBottom) {this.show_rb_btn = false;} else {this.show_rb_btn = true;}} else {this.show_mn_btn = true;}},deep: true, //深度监听immediate: true, //立即执行},},created() {},mounted() {},destroyed() {},methods: {toMd() {this.size = null;this.style_bk && (this.style = JSON.parse(JSON.stringify(this.style_bk)));},bkStyle() {this.style && (this.style_bk = JSON.parse(JSON.stringify(this.style)));},fromLgToMd(e) {let { x, y } = e.$event;let style = JSON.parse(JSON.stringify(this.style_bk));let leftPointDis = (x / innerWidth) * parseFloat(style.width); //计算鼠标到左上角定点的距离this.$refs.sgDragMove.setOffset({ x: leftPointDis });},draggingMove(e) {let { x, y } = e.$event;let dis = 5; //吸附屏幕边缘if (y <= dis) {this.size = `lg`; // 拖拽到浏览器顶部} else if (x <= dis) {this.size = `lgl`; // 拖拽到浏览器左侧} else if (x >= innerWidth - dis) {this.size = `lgr`; // 拖拽到浏览器右侧} else {// 拖拽回到浏览器中间if ((this.size || "").includes(`lg`)) {this.fromLgToMd(e);} else {this.style = e.moveDomStyle;this.bkStyle();}this.size = null;}},draggingSize({ style }) {this.style = style;this.bkStyle();this.size = null;},dblclickHeader(d) {switch (this.size) {case "lg":this.size = "md";break;case "mn":this.size = "md";break;case "md":default:this.size = "lg";break;}},// 关闭托盘close() {this.visible = false;this.$emit(`close`, this.style);},},
};
</script>
<style lang="scss" scoped>
.sgFloatDialog {$headerHeight: 40px; //头部高度$defaultRight: var(--defaultRight); //托盘默认距离右下角的位置$defaultBottom: var(--defaultBottom); //托盘默认距离右下角的位置$defaultWidth: var(--defaultWidth); //托盘默认宽度$defaultHeight: var(--defaultHeight); //托盘默认高度$minWidth: var(--minWidth); //托盘最小宽度$minHeight: var(--minHeight); //托盘最小高度// ----------------------------------------transition: none;position: fixed;z-index: 2001; //根据情况自己拿捏(太大了会遮住element的其他弹窗组件)，v-loading默认是2000的z-indexuser-select: none;margin: 0;padding: 0;right: 100px;bottom: 20px;width: $defaultWidth;height: $defaultHeight;background-color: white;min-width: $minWidth;min-height: $minHeight;box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.08);font-size: 14px;// 主题----------------------------------------// 圆角主题&[theme="radius"] {border-radius: 8px;box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.08), 0px -5px 0 0 #409eff;&::before {content: none;}.header {margin-top: revert;}}// 上传主题&[theme="upload"] {border-radius: 8px;border: 1px solid #172d4533;box-shadow: 0 4px 6px 0 #172d4533;&::before {content: none;}.header {margin-top: revert;}}// 右上角按钮----------------------------------------// 最大化&[size="lg"] {left: 0 !important;top: 0 !important;width: 100vw !important;height: 100vh !important;}// 最大化（左侧）&[size="lgl"] {left: 0 !important;top: 0 !important;width: calc(100vw / 2) !important;height: 100vh !important;}// 最大化（右侧）&[size="lgr"] {left: calc(100vw / 2) !important;top: 0 !important;width: calc(100vw / 2) !important;height: 100vh !important;}// 还原&[size="md"] {}// 最小化&[size="mn"] {left: revert !important;top: revert !important;right: $defaultRight !important;bottom: $defaultBottom !important;width: $minWidth !important;height: $minHeight !important;}// 右下角&[size="rb"] {left: revert !important;top: revert !important;right: $defaultRight !important;bottom: $defaultBottom !important;}&::before {content: "";width: 100%;height: 5px;/*从左往右线性渐变背景*/background: linear-gradient(to right, #409eff, #f56c6c);position: absolute;top: 0;left: 0;width: 100%;}.header {margin-top: 5px;flex-shrink: 0;font-size: 16px;font-weight: bold;width: 100%;height: $headerHeight;box-sizing: border-box;padding: 10px 20px;/*从上往下线性渐变背景*/background: linear-gradient(#409eff11, white);color: #409eff;display: flex;justify-content: space-between;align-items: center;&:hover {background: linear-gradient(#409eff22, white);}.left {display: flex;align-items: center;flex-grow: 1;.title {display: flex;align-items: center;flex-wrap: nowrap;}.icon-btns {display: flex;align-items: center;flex-wrap: nowrap;.icon-btn {cursor: pointer;margin-right: 5px;&:last-of-type {margin-right: 0;}i {pointer-events: none;}&:hover {opacity: 0.618;}}}}.right {display: flex;align-items: center;justify-content: flex-end;flex-shrink: 0;pointer-events: auto;.icon-btn {margin-left: 10px;cursor: pointer;i {pointer-events: none;}&:hover {opacity: 0.618;}&:first-of-type {margin-left: 0;}}.file-btns {margin-left: 10px;display: flex;flex-wrap: nowrap;justify-content: flex-end;box-sizing: border-box;padding: 0 10px;border-right: 1px solid #eee;}.tray-btns {margin-left: 10px;display: flex;flex-wrap: nowrap;justify-content: flex-end;}}}.body {box-sizing: border-box;padding: 20px;padding-top: 0;display: flex;flex-wrap: nowrap;width: 100%;height: calc(100% - #{$headerHeight});}
}
</style>

demo

<template><!-- 指导帮助悬浮弹窗 --><sgFloatDialog:data="data_sgFloatDialog"v-model="show_sgFloatDialog"v-if="show_sgFloatDialog"@close="close"><divstyle="width: 100%;height: 100%;overflow-y: auto;font-size: 16px;text-indent: 32px;line-height: 1.6;"><p>我一路向北，离开有你的季节，你说你好累，已无法再爱上谁。风在山路吹，过往的画面全都是不对，细数惭愧，我伤你几回。</p><p>我想我是太过依赖，在挂电话的刚才，坚持学单纯的小孩，静静看守这份爱，知道不能太依赖，怕你会把我宠坏，你的香味一直徘徊，我舍不得离开。</p><p>缓缓飘落的枫叶像思念，为何挽回要赶在冬天来之前，爱你穿越时间，两行来自秋末的眼泪，让爱渗透了地面我要的只是你在我身边。</p><p>我知道你我都没有错，只是忘了怎么退后，信誓旦旦给的承诺，全被时间扑了空。我知道我们都没有错，只是放手会比较好过，最美的爱情回忆里待续。</p></div></sgFloatDialog>
</template>
<script>
import sgFloatDialog from "@/vue/components/admin/sgFloatDialog";export default {components: { sgFloatDialog },data() {return {data_sgFloatDialog: {// theme: `radius`,//主题titleIcon: `el-icon-info`,title: `标题`,defaultRight: 10,defaultBottom: 10,defaultWidth: 400,defaultHeight: 600,},show_sgFloatDialog: true,};},methods: {close(d) {// console.log(``, d);},},
};
</script>

依赖

【sgDragMove】自定义组件：自定义拖拽组件，仅支持拖拽、设置吸附屏幕边界距离。_自定义拖拽位置-CSDN博客文章浏览阅读245次。sgDragMove是一个支持拖拽元素并能吸附到屏幕边界的Vue.js组件。它允许用户自定义吸附距离，可以设置拖拽行为是否禁用，以及停靠边界距离。组件在拖拽过程中提供了半透明效果，并能在不同阶段监听和处理鼠标事件以实现拖拽、吸附和停靠功能。 https://blog.csdn.net/qq_37860634/article/details/131721634【sgDragSize】自定义组件：自定义拖拽修改DIV尺寸组件，适用于窗体大小调整_div拖拽调整大小-CSDN博客文章浏览阅读505次。核心原理就是在四条边、四个顶点加上透明的div，给不同方向提供按下移动鼠标监听 ，对应计算宽度高度、坐标变化。_div拖拽调整大小 https://blog.csdn.net/qq_37860634/article/details/132347222


http://www.mrgr.cn/news/95276.html

相关文章：

  • 正则表达式详解（regular expression）
  • Spring学习
  • C语言入门知识（上）
  • (一)飞行器的姿态欧拉角, 欧拉旋转, 完全数学推导(基于坐标基的变换矩阵).(偏航角,俯仰角,横滚角)
  • vue使用element-ui自定义样式思路分享【实操】
  • 【QT5 多线程示例】互斥锁
  • Web-Machine-N7靶机通关攻略
  • 工厂方法模式、简单工厂模式与抽象工厂模式的对比
  • Netty中的直接内存是怎么回事？
  • 强推 Maven多镜像源快速切换工具，GUI操作超便捷
  • 软件工程之软件验证计划Software Verification Plan
  • 模型空间、图纸空间、布局（Layout）之间联系——CAD c#二次开发
  • Java+Html实现前后端客服聊天
  • K8S学习之基础四十：K8S配置altermanager发送告警到钉钉群
  • [AI速读]如何构建高效的AMBA协议检查器（Checker IP）
  • 基于carla的模仿学习（附数据集CORL2017）更新中........
  • PWM控制电机转速的原理及相关寄存器值计算
  • 失败的面试经历(ʘ̥∧ʘ̥)
  • 英伟达黄仁勋2025GTC演讲深度解析：液冷GPU、AI工厂、机器人AI…...
  • electron桌面应用多种快速创建方法