gyyg-components 0.3.9 → 0.3.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/gyyg-components.common.js +99 -99
- package/lib/gyyg-components.umd.js +99 -99
- package/lib/gyyg-components.umd.min.js +99 -99
- package/package.json +1 -1
- package/src/components/MECDescriptions/MECDescriptions.vue +1 -0
- package/src/components/MecDialog/MecDialog.vue +7 -4
- package/src/components/MecForm/MecForm.vue +1 -0
- package/src/components/MecTable/MecTable.vue +10 -0
- package/src/components/MecTags/MecTags.vue +5 -2
- package/src/directive/el-drag-dialog/drag.js +49 -42
- package/src/otherComponents/styleText.vue +1 -0
package/package.json
CHANGED
|
@@ -18,7 +18,6 @@
|
|
|
18
18
|
@close="closeMethod"
|
|
19
19
|
:destroy-on-close="destroyOnClose"
|
|
20
20
|
:modal='modal'
|
|
21
|
-
:style="'height:' + height"
|
|
22
21
|
>
|
|
23
22
|
<div slot="title" style="font-size: 16px; color: #303133;">
|
|
24
23
|
<el-icon :class="titleIcon" style="color: #1890ff; font-size: 18px;margin-right: 5px;"></el-icon>
|
|
@@ -229,12 +228,16 @@ export default {
|
|
|
229
228
|
}
|
|
230
229
|
}
|
|
231
230
|
}
|
|
232
|
-
|
|
233
|
-
height: 100%;
|
|
234
|
-
}
|
|
231
|
+
|
|
235
232
|
.shan-maintenance-dialog {
|
|
236
233
|
/deep/ .el-dialog {
|
|
237
234
|
height: 90%;
|
|
238
235
|
}
|
|
239
236
|
}
|
|
237
|
+
/deep/ .el-dialog {
|
|
238
|
+
height: 100%;
|
|
239
|
+
}
|
|
240
|
+
/deep/ .el-dialog {
|
|
241
|
+
height: v-bind(height); /* 动态绑定 height */
|
|
242
|
+
}
|
|
240
243
|
</style>
|
|
@@ -31,6 +31,12 @@
|
|
|
31
31
|
:reserve-selection="reserveSelection"
|
|
32
32
|
v-if="selection"
|
|
33
33
|
></el-table-column>
|
|
34
|
+
<!-- 序号 -->
|
|
35
|
+
<el-table-column
|
|
36
|
+
v-if="showIndex"
|
|
37
|
+
type="index"
|
|
38
|
+
width="50">
|
|
39
|
+
</el-table-column>
|
|
34
40
|
<template v-for="(col, index) in column">
|
|
35
41
|
<el-table-column
|
|
36
42
|
v-if="!col['type'] && (!col.headerList || col.headerList.length === 0)"
|
|
@@ -255,6 +261,10 @@ export default {
|
|
|
255
261
|
cellStyle: {
|
|
256
262
|
|
|
257
263
|
},
|
|
264
|
+
showIndex: {
|
|
265
|
+
type: Boolean,
|
|
266
|
+
default: false
|
|
267
|
+
}
|
|
258
268
|
|
|
259
269
|
},
|
|
260
270
|
data() {
|
|
@@ -68,6 +68,9 @@ export default {
|
|
|
68
68
|
}
|
|
69
69
|
},
|
|
70
70
|
mounted() {
|
|
71
|
+
this.$nextTick(() => {
|
|
72
|
+
this.updateTagsContainerWidth();
|
|
73
|
+
})
|
|
71
74
|
this.updateTagsContainerWidth();
|
|
72
75
|
window.addEventListener('resize', this.updateTagsContainerWidth);
|
|
73
76
|
},
|
|
@@ -95,8 +98,8 @@ export default {
|
|
|
95
98
|
},
|
|
96
99
|
|
|
97
100
|
updateTagsContainerWidth() {
|
|
98
|
-
this.tagsContainerWidth = this.$refs.tagsContainer.offsetWidth;
|
|
99
|
-
const boxWidth = this.$refs.tagsBox.scrollWidth;
|
|
101
|
+
this.tagsContainerWidth = this.$refs.tagsContainer && this.$refs.tagsContainer.offsetWidth;
|
|
102
|
+
const boxWidth = this.$refs.tagsBox && this.$refs.tagsBox.scrollWidth;
|
|
100
103
|
if (boxWidth > this.tagsContainerWidth) {
|
|
101
104
|
this.showArrow = true;
|
|
102
105
|
} else {
|
|
@@ -1,64 +1,71 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
bind(el, binding, vnode) {
|
|
3
|
-
const dialogHeaderEl = el.querySelector('.el-dialog__header')
|
|
4
|
-
const dragDom = el.querySelector('.el-dialog')
|
|
5
|
-
|
|
3
|
+
const dialogHeaderEl = el.querySelector('.el-dialog__header');
|
|
4
|
+
const dragDom = el.querySelector('.el-dialog');
|
|
5
|
+
|
|
6
|
+
// 设置鼠标样式为可移动
|
|
7
|
+
dialogHeaderEl.style.cssText += ';cursor:move;';
|
|
6
8
|
|
|
7
|
-
//
|
|
9
|
+
// 获取元素样式兼容方法
|
|
8
10
|
const getStyle = (function() {
|
|
9
11
|
if (window.document.currentStyle) {
|
|
10
|
-
return (dom, attr) => dom.currentStyle[attr]
|
|
12
|
+
return (dom, attr) => dom.currentStyle[attr];
|
|
11
13
|
} else {
|
|
12
|
-
return (dom, attr) => getComputedStyle(dom, false)[attr]
|
|
14
|
+
return (dom, attr) => getComputedStyle(dom, false)[attr];
|
|
13
15
|
}
|
|
14
|
-
})()
|
|
16
|
+
})();
|
|
15
17
|
|
|
16
18
|
dialogHeaderEl.onmousedown = (e) => {
|
|
17
|
-
//
|
|
18
|
-
const disX = e.clientX - dialogHeaderEl.offsetLeft
|
|
19
|
-
const disY = e.clientY - dialogHeaderEl.offsetTop
|
|
19
|
+
// 鼠标按下时,计算当前元素距离可视区的距离
|
|
20
|
+
const disX = e.clientX - dialogHeaderEl.offsetLeft;
|
|
21
|
+
const disY = e.clientY - dialogHeaderEl.offsetTop;
|
|
22
|
+
console.log(disX, disY)
|
|
20
23
|
|
|
21
|
-
//
|
|
22
|
-
let styL = getStyle(dragDom, 'left')
|
|
23
|
-
let styT = getStyle(dragDom, 'top')
|
|
24
|
+
// 获取初始位置样式
|
|
25
|
+
let styL = getStyle(dragDom, 'left');
|
|
26
|
+
let styT = getStyle(dragDom, 'top');
|
|
24
27
|
|
|
28
|
+
// 如果样式值包含百分比,则转换为像素值
|
|
25
29
|
if (styL.includes('%')) {
|
|
26
|
-
styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
|
|
27
|
-
styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
|
|
30
|
+
styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100);
|
|
31
|
+
styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100);
|
|
28
32
|
} else {
|
|
29
|
-
styL = +styL.replace(/\px/g, '')
|
|
30
|
-
styT = +styT.replace(/\px/g, '')
|
|
33
|
+
styL = +styL.replace(/\px/g, '');
|
|
34
|
+
styT = +styT.replace(/\px/g, '');
|
|
31
35
|
}
|
|
32
36
|
|
|
33
37
|
document.onmousemove = function(e) {
|
|
34
|
-
//
|
|
35
|
-
let left = e.clientX - disX
|
|
36
|
-
let top = e.clientY - disY
|
|
38
|
+
// 计算移动的距离
|
|
39
|
+
let left = e.clientX - disX;
|
|
40
|
+
let top = e.clientY - disY;
|
|
41
|
+
console.log(left, top)
|
|
37
42
|
|
|
38
|
-
//
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
// } else if (left > maxDragDomLeft) {
|
|
42
|
-
// left = maxDragDomLeft
|
|
43
|
-
// }
|
|
43
|
+
// 获取屏幕宽高
|
|
44
|
+
const screenWidth = document.body.clientWidth;
|
|
45
|
+
const screenHeight = document.body.clientHeight;
|
|
44
46
|
|
|
45
|
-
//
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
// top = maxDragDomTop
|
|
49
|
-
// }
|
|
47
|
+
// 获取对话框宽高
|
|
48
|
+
const dialogWidth = dragDom.offsetWidth;
|
|
49
|
+
const dialogHeight = dragDom.offsetHeight;
|
|
50
50
|
|
|
51
|
-
//
|
|
52
|
-
|
|
51
|
+
// 边界限制逻辑
|
|
52
|
+
left = Math.max(0, Math.min(left + styL, screenWidth - dialogWidth));
|
|
53
|
+
top = Math.max(0, Math.min(top + styT, screenHeight - dialogHeight));
|
|
53
54
|
|
|
54
|
-
//
|
|
55
|
-
|
|
56
|
-
|
|
55
|
+
// 更新对话框位置
|
|
56
|
+
dragDom.style.left = `${left}px`;
|
|
57
|
+
dragDom.style.top = `${top}px`;
|
|
58
|
+
console.log(left, top)
|
|
57
59
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
60
|
+
// 触发拖拽事件
|
|
61
|
+
vnode.child.$emit('dragDialog');
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
document.onmouseup = function() {
|
|
65
|
+
// 清除事件监听
|
|
66
|
+
document.onmousemove = null;
|
|
67
|
+
document.onmouseup = null;
|
|
68
|
+
};
|
|
69
|
+
};
|
|
63
70
|
}
|
|
64
|
-
}
|
|
71
|
+
};
|