zydx-plus 1.36.645 → 1.36.646

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.36.645",
+  "version": "1.36.646",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/dragPopup/src/dragPopup.vue

@@ -1,28 +1,37 @@
+/** 可拖拽弹窗组件 - 支持拖拽移动、调整大小、全屏、最小化、关闭等功能 */
 <template>
-  <div class="drag-pop" :class="{trans: transAll, 'drag-pop-shadow': !fixedStart}" :style="position" :id="id" @click.stop="dragTap">
+  <!-- 弹窗主体，支持过渡动画和阴影效果 -->
+  <div class="drag-pop" :class="{trans: transAll, 'drag-pop-shadow': !fixedStart}" :style="position" :id="id" @mousedown.stop="dragTap">
+    <!-- 标题栏区域，可拖拽移动 -->
     <div v-show="!fixedStart" class="drag-head" :style="{'background-color':titleColor}" @click="selectedDrag">
       <span class="title" :id="'draggable' + id">
+        <!-- 标题插槽 -->
         <slot name="title">
           <div v-html="title" style="width: 100%" :style="{'text-align': title === ''? 'center':'left'}"></div>
         </slot>
       </span>
+      <!-- 操作按钮区域 -->
       <div class="drag-i">
-        <i class="share" v-if="share" @click.stop="shareTap"></i>
-        <i class="minimize-cir" v-if="minimizeCir" @click.stop="minimizeTap"></i>
-        <i class="minimize" v-if="minimize" @click.stop="minimizeTap"></i>
-        <slot name="icon"></slot>
-        <i class="disconnect" v-if="disconnectShow" @click.stop="disconnect"></i>
-        <i class="enlarge" v-if="enlargeShow" @click.stop="enlarge"></i>
-        <i v-if="closeShow" @click.stop="close"></i>
+        <i class="share" v-if="share" @click.stop="shareTap"></i> <!-- 分享按钮 -->
+        <i class="minimize-cir" v-if="minimizeCir" @click.stop="minimizeTap"></i> <!-- 最小化圆形按钮 -->
+        <i class="minimize" v-if="minimize" @click.stop="minimizeTap"></i> <!-- 最小化按钮 -->
+        <slot name="icon"></slot> <!-- 自定义图标插槽 -->
+        <i class="disconnect" v-if="disconnectShow" @click.stop="disconnect"></i> <!-- 断开连接按钮 -->
+        <i class="enlarge" v-if="enlargeShow" @click.stop="enlarge"></i> <!-- 全屏按钮 -->
+        <i v-if="closeShow" @click.stop="close"></i> <!-- 关闭按钮 -->
       </div>
     </div>
+    <!-- 内容区域 -->
     <div :class="{'drag-cont2': fixedStart,'drag-conts': true}">
       <div class="drag-cont-slot" :class="{'zIndexSlot': footIsMove}">
+        <!-- 拖拽时遮罩层，防止拖拽事件穿透到内容区 -->
         <div class="zIndexSlot" v-if="footIsMove || draggableMove"></div>
-        <slot name="content"></slot>
+        <slot name="content"></slot> <!-- 内容插槽 -->
       </div>
+      <!-- 底部调整大小手柄区域 -->
       <div v-show="!fixedStart&&!autoHeight">
         <!--        <i :class="{'drag-down2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-down" v-if="dragStatus" @mousedown.stop="footDown($event,'d')" @mouseup.stop="footUp"></i>-->
+        <!-- 对角线调整大小手柄 -->
         <i :class="{'drag-in2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-in" v-if="dragStatus" @mousedown.stop="footDown($event,'in')" @mouseup.stop="footUp"></i>
         <!--        <i :class="{'drag-right2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-right" v-if="dragStatus" @mousedown.stop="footDown($event,'r')" @mouseup.stop="footUp"></i>-->
       </div>
@@ -55,93 +64,93 @@ export default {
       footIsMove: false,//是否移动标识
       direction: '',//移动方向
       id: '',//id
-      state: false,//是否显示
+      state: false,//是否全屏显示
       clientWidth: 0,
       clientHeight: 0,
-      transAll: false,
-      fixedStart: false,
-      initWidth: 1280,
-      draggableState: null,
-      draggableMove: false,
-      zIndex: 10000
+      transAll: false, // 是否启用过渡动画
+      fixedStart: false, // 是否固定定位模式
+      initWidth: 1280, // 初始宽度基准值
+      draggableState: null, // interactjs拖拽实例
+      draggableMove: false, // 是否正在拖拽移动
+      zIndex: 10000 // 层级
     }
   },
   props: {
-    isInitShowBottomRight: {
+    isInitShowBottomRight: { // 是否初始化时显示在右下角
       type: Boolean,
       default: false
     },
-    width: {
+    width: { // 弹窗宽度
       type: Number,
       default: 600
     },
-    height: {
+    height: { // 弹窗高度
       type: Number,
       default: 400
     },
-    fixed: {
+    fixed: { // 是否固定定位
       type: Boolean,
       default: false
     },
-    left: {
+    left: { // 左侧偏移量
       type: Number,
       default: 0
     },
-    top: {
+    top: { // 顶部偏移量
       type: Number,
       default: 0
     },
-    titleColor: {
+    titleColor: { // 标题栏背景颜色
       type: String,
       default: 'rgba(75, 12, 119, 1)'
     },
     // 修改拖拽弹窗默认高度，不需要下面30px
-    dragStatus: {
+    dragStatus: { // 是否显示调整大小手柄
       type: Boolean,
       default: true
     },
-    enlargeShow: {
+    enlargeShow: { // 是否显示全屏按钮
       type: Boolean,
       default: true
     },
-    disconnectShow: {
+    disconnectShow: { // 是否显示断开连接按钮
       type: Boolean,
       default: false
     },
-    title: {
+    title: { // 弹窗标题
       type: String,
       default: ''
     },
     // 修改拖拽弹窗默认高度，不需要下面30px
-    dragTextShow: {
+    dragTextShow: { // 是否显示底部拖拽文字
       type: Boolean,
       default: false
     },
-    minimize: {
+    minimize: { // 是否显示最小化按钮（方形）
       type: Boolean,
       default: false
     },
-    minimizeCir: {
+    minimizeCir: { // 是否显示最小化按钮（圆形）
       type: Boolean,
       default: true
     },
-    minWidth: {
+    minWidth: { // 弹窗最小宽度
       type: Number,
       default: 300
     },
-    minHeight: {
+    minHeight: { // 弹窗最小高度
       type: Number,
       default: 200
     },
-    closeShow: {
+    closeShow: { // 是否显示关闭按钮
       type: Boolean,
       default: true
     },
-    autoHeight: {
+    autoHeight: { // 是否自适应高度
       type: Boolean,
       default: false
     },
-    share: {
+    share: { // 是否显示分享按钮
       type: Boolean,
       default: false
     }
@@ -223,6 +232,7 @@ export default {
     this.dragTap()
   },
   computed: {
+    // 计算弹窗的定位样式
     position() {
       if(this.autoHeight) {
         return `top:${this.y}px;left:${this.x}px;width:${this.footRightOffset}px;min-height:${this.footDownOffset}px;z-index:${this.zIndex}`;
@@ -233,6 +243,7 @@ export default {
   },
   emits: ['dragStatus', 'close', 'enlarge','updateDrag','minimize','dragMouseup', 'share'],
   methods: {
+    // 全屏状态变化处理
     handleFullScreenChange() {
       if (!document.fullscreenElement) {
         this.reducePop()
@@ -270,6 +281,7 @@ export default {
       }
       this.state = false
     },
+    // 点击弹窗置顶，管理多个弹窗的z-index
     dragTap() {
       let pop = JSON.parse(sessionStorage.getItem('pop'))
       for(let i = 0; i< pop.length; i++) {
@@ -284,6 +296,7 @@ export default {
       }
       sessionStorage.setItem('pop', JSON.stringify(pop))
     },
+    // 清理sessionStorage中的弹窗记录
     clean() {
       let pop = JSON.parse(sessionStorage.getItem('pop'))
       pop.forEach((x,i) => {
@@ -293,9 +306,11 @@ export default {
       })
       sessionStorage.setItem('pop', JSON.stringify(pop))
     },
+    // 断开连接事件
     disconnect() {
       this.$emit('dragStatus')
     },
+    // 初始化弹窗位置和拖拽功能
     init() {
       const that = this
       if(this.fixedStart) {
@@ -350,6 +365,7 @@ export default {
         })
       },0)
     },
+    // 设置弹窗宽高并启用过渡动画
     getWH(v) {
       this.transAll = true
       this.footRightOffset = v.width
@@ -358,12 +374,14 @@ export default {
         this.transAll = false
       },300)
     },
+    // 底部调整大小手柄按下
     footDown(event, v) {
       event.preventDefault()
       this.direction = v
       this.footIsMove = true;
       this.dragTap()
     },
+    // 底部调整大小手柄移动，根据方向调整宽高
     footMove(event) {
       event.preventDefault()
       if (this.state) return;
@@ -389,6 +407,7 @@ export default {
         top: this.y
       })
     },
+    // 底部调整大小手柄抬起，触发拖拽结束事件
     footUp() {
       this.$emit('dragMouseup', {
         width: this.footRightOffset,
@@ -396,6 +415,7 @@ export default {
       })
       this.footIsMove = false;
     },
+    // 还原弹窗到默认大小和居中位置
     reducePop() {
       setTimeout(() => {
         this.x = document.documentElement.clientWidth / 2 - this.width / 2;
@@ -412,6 +432,7 @@ export default {
         })
       },100)
     },
+    // 切换全屏/还原
     enlarge() {
       if(this.state) {
         this.exitFullscreen()
@@ -433,21 +454,25 @@ export default {
       }
       this.$emit('enlarge', this.state)
     },
+    // 最小化按钮点击
     minimizeTap() {
       this.isMove = false
       this.footIsMove = false
       if(this.state) this.exitFullscreen()
       this.$emit('minimize');
     },
+    // 分享按钮点击
     shareTap() {
       this.$emit('share');
     },
+    // 关闭按钮点击
     close() {
       this.isMove = false
       this.footIsMove = false
       if(this.state) this.exitFullscreen()
       this.$emit('close');
     },
+    // 点击标题栏选中弹窗（置顶）
     selectedDrag(){
       this.$emit('selectedDrag')
     }

package/src/index.js

@@ -89,7 +89,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.36.645',
+    version: '1.36.646',
     install,
     Calendar,
     Message,