Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
e843bbcd 1 parent 7d216d95

完善分割线显示多种类型

Inline Side-by-side
Showing 1 changed file with 452 additions and 86 deletions
1 <!-- 1 <!--
2 * @Date: 2022-08-29 14:31:20 2 * @Date: 2022-08-29 14:31:20
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-08-29 14:52:43 4 + * @LastEditTime: 2024-09-02 14:47:57
5 * @FilePath: /data-table/src/components/DividerField/index.vue 5 * @FilePath: /data-table/src/components/DividerField/index.vue
6 * @Description: 分隔线组件 6 * @Description: 分隔线组件
7 --> 7 -->
8 <template> 8 <template>
9 <div class="divider-field-page"> 9 <div class="divider-field-page">
10 - <div class="sep-line"> 10 + <div v-if="styleType === 'type1'" class="type1"></div>
11 - <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor}"> 11 + <div v-if="styleType === 'type2'" class="type2">
12 - <span>字段标题</span> 12 + <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">字段标题</div>
13 + <div :style="{ borderTop: '1px dashed', borderColor: bgColor }"></div>
14 + </div>
15 + <div v-if="styleType === 'type3'" class="type3">
16 + <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">字段标题</div>
17 + <div :style="{ borderTop: '1px solid', borderColor: bgColor }"></div>
18 + </div>
19 + <div v-if="styleType === 'type4'" class="type4">
20 + <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">字段标题</div>
21 + <div :style="{ borderTop: '2px solid', borderColor: bgColor }"></div>
22 + </div>
23 + <div v-if="styleType === 'type5'" class="type5">
24 + <div class="sep-line">
25 + <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor}">
26 + <span>字段标题</span>
27 + </div>
28 + <div class="sep-right">
29 + <div class="right-triangle" :style="{ backgroundColor: bgColor}"></div>
30 + <div class="right-line" :style="{ borderColor: bgColor }"></div>
31 + <div class="right-parallelogram1" :style="{ backgroundColor: bgColor}"></div>
32 + <div class="right-parallelogram2" :style="{ backgroundColor: bgColor}"></div>
33 + <div class="right-parallelogram3" :style="{ backgroundColor: bgColor}"></div>
34 + </div>
13 </div> 35 </div>
14 - <div class="sep-right"> 36 + </div>
15 - <div class="right-triangle" :style="{ backgroundColor: bgColor}"></div> 37 + <div v-if="styleType === 'type6'" class="type6">
16 - <div class="right-line" :style="{ borderColor: bgColor }"></div> 38 + <div class="sep-style-select-field-label" :style="{ color: titleColor }">字段标题</div>
17 - <div class="right-parallelogram1" :style="{ backgroundColor: bgColor}"></div> 39 + <div class="sep-style-select-item">
18 - <div class="right-parallelogram2" :style="{ backgroundColor: bgColor}"></div> 40 + <div class="sep-line">
19 - <div class="right-parallelogram3" :style="{ backgroundColor: bgColor}"></div> 41 + <div class="sep-bg-wrapper">
42 + <div class="sep-bg" :style="{ borderColor: bgColor }"></div>
43 + </div>
44 + <div class="sep-label" style="background-color: rgb(250, 129, 24);">
45 + <span>字段标题</span>
46 + </div>
47 + </div>
48 + <!-- <div class="fx-sub-html">这里是字段的描述信息</div> -->
49 + </div>
50 + </div>
51 + <div v-if="styleType === 'type7'" class="type7">
52 + <div class="sep-line">
53 + <div class="sep-bg-wrapper">
54 + <div class="sep-bg" :style="{ backgroundColor: bgColor}"></div>
55 + </div>
56 + <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor }">
57 + <span>字段标题</span>
58 + </div>
59 + </div>
60 + </div>
61 + <div v-if="styleType === 'type8'" class="type8">
62 + <div class="sep-line">
63 + <div class="sep-bg" :style="{ backgroundColor: bgColor}"></div>
64 + <div class="sep-center">
65 + <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor }">
66 + <span>字段标题</span>
67 + </div>
68 + <div class="left-triangle" :style="{ backgroundColor: bgColor}"></div>
69 + <div class="left-border" :style="{ backgroundColor: bgColor}"></div>
70 + <div class="right-triangle" :style="{ backgroundColor: bgColor}"></div>
71 + <div class="right-border" :style="{ backgroundColor: bgColor}"></div>
72 + </div>
73 + </div>
74 + </div>
75 + <div v-if="styleType === 'type9'" class="type9">
76 + <div class="sep-line">
77 + <div class="left-wrapper">
78 + <div class="left-block" :style="{ backgroundColor: bgColor}"></div>
79 + <div class="left-triangle" :style="{ backgroundColor: bgColor}"></div>
80 + <div class="left-square"></div>
81 + <div class="left-line1" :style="{ borderColor: bgColor }"></div>
82 + <div class="left-line2" :style="{ borderColor: bgColor }"></div>
83 + </div>
84 + <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor}">
85 + <span>字段标题</span>
86 + </div>
87 + <div class="right-wrapper">
88 + <div class="right-block" :style="{ backgroundColor: bgColor}"></div>
89 + <div class="right-triangle" :style="{ backgroundColor: bgColor}"></div>
90 + <div class="right-square"></div>
91 + <div class="right-line1" :style="{ borderColor: bgColor }"></div>
92 + <div class="right-line2" :style="{ borderColor: bgColor }"></div>
93 + </div>
20 </div> 94 </div>
21 </div> 95 </div>
22 <div class="fx-sub-html">这里是字段的描述信息</div> 96 <div class="fx-sub-html">这里是字段的描述信息</div>
...@@ -34,104 +108,396 @@ const styleBorder = ref({}); ...@@ -34,104 +108,396 @@ const styleBorder = ref({});
34 const bgColor = ref(''); 108 const bgColor = ref('');
35 const titleColor = ref(''); 109 const titleColor = ref('');
36 110
111 +const styleType = ref('type8');
112 +
37 onMounted(() => { 113 onMounted(() => {
38 // styleObj.value = { 114 // styleObj.value = {
39 // color: props.item.component_props.color, 115 // color: props.item.component_props.color,
40 // borderColor: props.item.component_props.color, 116 // borderColor: props.item.component_props.color,
41 // padding: props.item.component_props.padding, 117 // padding: props.item.component_props.padding,
42 // }; 118 // };
43 - styleTitle.value = { 119 + // styleTitle.value = {
44 - color: "blue", 120 + // color: "blue",
45 - fontSize: "0.9rem", 121 + // fontSize: "0.9rem",
46 - }; 122 + // };
47 - styleBorder.value = { 123 + // styleBorder.value = {
48 - border: "1px dashed", 124 + // border: "1px dashed",
49 - borderColor: "red", 125 + // borderColor: "red",
50 - margin: "5px 0", 126 + // margin: "5px 0",
51 - }; 127 + // };
52 128
53 - titleColor.value = 'rgb(250, 250, 24)'; 129 + titleColor.value = '#FFF';
54 - bgColor.value = 'rgb(240, 168, 0)'; 130 + bgColor.value = '#FA8118';
55 }); 131 });
56 </script> 132 </script>
57 133
58 <style lang="less" scoped> 134 <style lang="less" scoped>
59 .divider-field-page { 135 .divider-field-page {
60 padding: 1rem 1rem 0 1rem; 136 padding: 1rem 1rem 0 1rem;
61 - .sep-line { 137 + .type5 {
62 - display: -webkit-box; 138 + .sep-line {
63 - display: -ms-flexbox; 139 + display: -webkit-box;
64 - display: flex; 140 + display: -ms-flexbox;
65 - height: 28px; 141 + display: flex;
66 - position: relative; 142 + height: 28px;
67 -
68 - .sep-label {
69 - -webkit-box-flex: 0;
70 - -webkit-box-sizing: content-box;
71 - box-sizing: content-box;
72 - -ms-flex: none;
73 - flex: none;
74 - height: 100%;
75 - line-height: 28px;
76 - max-width: 80%;
77 - min-width: 7%;
78 - overflow: hidden;
79 - padding: 0 10px;
80 - text-overflow: ellipsis;
81 - white-space: nowrap;
82 - }
83 -
84 - .sep-right {
85 - -webkit-box-flex: 1;
86 - -ms-flex: auto;
87 - flex: auto;
88 position: relative; 143 position: relative;
89 - .right-triangle { 144 +
145 + .sep-label {
146 + -webkit-box-flex: 0;
147 + -webkit-box-sizing: content-box;
148 + box-sizing: content-box;
149 + -ms-flex: none;
150 + flex: none;
90 height: 100%; 151 height: 100%;
152 + line-height: 28px;
153 + max-width: 80%;
154 + min-width: 7%;
155 + overflow: hidden;
156 + padding: 0 10px;
157 + text-overflow: ellipsis;
158 + white-space: nowrap;
159 + }
160 +
161 + .sep-right {
162 + -webkit-box-flex: 1;
163 + -ms-flex: auto;
164 + flex: auto;
165 + position: relative;
166 + .right-triangle {
167 + height: 100%;
168 + -webkit-transform: skew(26deg) translateX(-50%);
169 + transform: skew(26deg) translateX(-50%);
170 + width: 15px;
171 + }
172 + }
173 +
174 + .right-line {
175 + border-bottom: 3px solid;
176 + bottom: 0;
177 + height: 0;
178 + left: 0;
179 + position: absolute;
180 + right: 0;
181 + }
182 +
183 + .right-parallelogram1 {
184 + height: 22px;
185 + left: 15px;
186 + opacity: 0.9;
187 + position: absolute;
188 + top: 0;
189 + -webkit-transform: skew(26deg) translateX(-50%);
190 + transform: skew(26deg) translateX(-50%);
191 + width: 8px;
192 + }
193 + .right-parallelogram2 {
194 + height: 22px;
195 + left: 27px;
196 + opacity: 0.6;
197 + position: absolute;
198 + top: 0;
91 -webkit-transform: skew(26deg) translateX(-50%); 199 -webkit-transform: skew(26deg) translateX(-50%);
92 transform: skew(26deg) translateX(-50%); 200 transform: skew(26deg) translateX(-50%);
93 - width: 15px; 201 + width: 8px;
202 + }
203 + .right-parallelogram3 {
204 + height: 22px;
205 + left: 39px;
206 + opacity: 0.3;
207 + position: absolute;
208 + top: 0;
209 + -webkit-transform: skew(26deg) translateX(-50%);
210 + transform: skew(26deg) translateX(-50%);
211 + width: 8px;
94 } 212 }
95 } 213 }
96 - 214 + }
97 - .right-line { 215 + .type6 {
98 - border-bottom: 3px solid; 216 + .sep-style-select-field-label {
99 - bottom: 0; 217 + font-size: 14px;
100 - height: 0; 218 + line-height: 20px;
101 - left: 0; 219 + margin-bottom: 5px;
102 - position: absolute;
103 - right: 0;
104 } 220 }
105 - 221 + .sep-style-select-item {
106 - .right-parallelogram1 { 222 + -webkit-transform: scale(.8);
107 - height: 22px; 223 + transform: scale(.8);
108 - left: 15px; 224 + -webkit-transform-origin: 0 50%;
109 - opacity: 0.9; 225 + transform-origin: 0 50%;
110 - position: absolute; 226 + width: 125%;
111 - top: 0; 227 + .sep-line {
112 - -webkit-transform: skew(26deg) translateX(-50%); 228 + height: 8px;
113 - transform: skew(26deg) translateX(-50%); 229 + position: relative;
114 - width: 8px; 230 + .sep-bg-wrapper {
231 + bottom: 0;
232 + left: 0;
233 + padding-left: 8px;
234 + position: absolute;
235 + right: 0;
236 + .sep-bg {
237 + border-bottom: 4px solid;
238 + height: 0;
239 + opacity: .2;
240 + width: 100%;
241 + }
242 + }
243 + .sep-label {
244 + border-radius: 0 8px;
245 + bottom: 0;
246 + left: 0;
247 + max-width: 81%;
248 + min-width: 1.25rem;
249 + overflow: hidden;
250 + position: absolute;
251 + text-overflow: ellipsis;
252 + top: 0;
253 + white-space: nowrap;
254 + span {
255 + visibility: hidden;
256 + }
257 + }
258 + }
115 } 259 }
116 - .right-parallelogram2 { 260 + }
117 - height: 22px; 261 + .type7 {
118 - left: 27px; 262 + .sep-line {
119 - opacity: 0.6; 263 + height: 28px;
120 - position: absolute; 264 + position: relative;
121 - top: 0; 265 + .sep-bg-wrapper {
122 - -webkit-transform: skew(26deg) translateX(-50%); 266 + bottom: 0;
123 - transform: skew(26deg) translateX(-50%); 267 + left: 0;
124 - width: 8px; 268 + padding-left: 20px;
269 + position: absolute;
270 + right: 0;
271 + top: 0;
272 + .sep-bg {
273 + height: 100%;
274 + opacity: .2;
275 + width: 100%;
276 + }
277 + }
278 + .sep-label {
279 + border-radius: 14px 0;
280 + bottom: 0;
281 + -webkit-box-sizing: content-box;
282 + box-sizing: content-box;
283 + font-weight: 600;
284 + left: 0;
285 + line-height: 28px;
286 + max-width: 76%;
287 + min-width: 7%;
288 + overflow: hidden;
289 + padding: 0 20px;
290 + position: absolute;
291 + text-overflow: ellipsis;
292 + top: 0;
293 + white-space: nowrap;
294 + }
125 } 295 }
126 - .right-parallelogram3 { 296 + }
127 - height: 22px; 297 + .type8 {
128 - left: 39px; 298 + .sep-line {
129 - opacity: 0.3; 299 + -webkit-box-pack: center;
130 - position: absolute; 300 + -ms-flex-pack: center;
131 - top: 0; 301 + display: -webkit-box;
132 - -webkit-transform: skew(26deg) translateX(-50%); 302 + display: -ms-flexbox;
133 - transform: skew(26deg) translateX(-50%); 303 + display: flex;
134 - width: 8px; 304 + height: 38px;
305 + justify-content: center;
306 + position: relative;
307 + .sep-bg {
308 + border-radius: 16px 16px 0 0;
309 + bottom: 0;
310 + height: 28px;
311 + left: 0;
312 + opacity: .15;
313 + position: absolute;
314 + right: 0;
315 + }
316 + .sep-center {
317 + -webkit-box-sizing: content-box;
318 + box-sizing: content-box;
319 + max-width: 50%;
320 + min-width: 7%;
321 + overflow: hidden;
322 + padding: 0 38px;
323 + position: relative;
324 + .sep-label {
325 + font-weight: 600;
326 + height: 100%;
327 + line-height: 38px;
328 + overflow: hidden;
329 + padding: 0 1px;
330 + text-align: center;
331 + text-overflow: ellipsis;
332 + white-space: nowrap;
333 + }
334 + .left-triangle {
335 + height: 10px;
336 + left: 0;
337 + position: absolute;
338 + top: 0;
339 + -webkit-transform: skew(-60deg) translateX(50%);
340 + transform: skew(-60deg) translateX(50%);
341 + width: 18px;
342 + }
343 + .left-border {
344 + border-radius: 0 0 0 16px;
345 + bottom: 0;
346 + left: 18px;
347 + position: absolute;
348 + top: 0;
349 + width: 21px;
350 + }
351 + .right-triangle {
352 + height: 10px;
353 + position: absolute;
354 + right: 0;
355 + top: 0;
356 + -webkit-transform: skew(60deg) translateX(-50%);
357 + transform: skew(60deg) translateX(-50%);
358 + width: 18px;
359 + }
360 + .right-border {
361 + border-radius: 0 0 16px;
362 + bottom: 0;
363 + position: absolute;
364 + right: 18px;
365 + top: 0;
366 + width: 21px;
367 + }
368 + }
369 + }
370 + }
371 + .type9 {
372 + -webkit-transform: scale(.8);
373 + transform: scale(.8);
374 + -webkit-transform-origin: 0 50%;
375 + transform-origin: 0 50%;
376 + width: 125%;
377 + .sep-line {
378 + -webkit-box-pack: center;
379 + -ms-flex-pack: center;
380 + display: -webkit-box;
381 + display: -ms-flexbox;
382 + display: flex;
383 + height: 28px;
384 + justify-content: center;
385 + overflow: hidden;
386 + position: relative;
387 + .left-wrapper {
388 + width: 110px;
389 + -webkit-box-flex: 0;
390 + -ms-flex: none;
391 + flex: none;
392 + position: relative;
393 + .left-block {
394 + width: 33px;
395 + bottom: 0;
396 + position: absolute;
397 + right: -1px;
398 + top: 0;
399 + }
400 + .left-triangle {
401 + right: 32px;
402 + height: 20px;
403 + position: absolute;
404 + top: 0;
405 + -webkit-transform: rotate(-45deg);
406 + transform: rotate(-45deg);
407 + -webkit-transform-origin: 100% 0;
408 + transform-origin: 100% 0;
409 + width: 20px;
410 + }
411 + .left-square {
412 + right: 25px;
413 + background: #fff;
414 + height: 10px;
415 + position: absolute;
416 + top: 9px;
417 + -webkit-transform: rotate(45deg);
418 + transform: rotate(45deg);
419 + width: 10px;
420 + }
421 + .left-line1 {
422 + width: 28px;
423 + border-top: 1px solid;
424 + height: 0;
425 + left: 27px;
426 + position: absolute;
427 + top: 9px;
428 + }
429 + .left-line2 {
430 + width: 55px;
431 + border-bottom: 1px solid;
432 + bottom: 8px;
433 + height: 0;
434 + left: 0;
435 + position: absolute;
436 + }
437 + }
438 + .sep-label {
439 + font-weight: 600;
440 + height: 100%;
441 + line-height: 28px;
442 + max-width: 54%;
443 + min-width: 10%;
444 + overflow: hidden;
445 + padding: 0 1px;
446 + text-align: center;
447 + text-overflow: ellipsis;
448 + white-space: nowrap;
449 + }
450 + .right-wrapper {
451 + width: 110px;
452 + -webkit-box-flex: 0;
453 + -ms-flex: none;
454 + flex: none;
455 + position: relative;
456 + .right-block {
457 + width: 33px;
458 + bottom: 0;
459 + left: -1px;
460 + position: absolute;
461 + top: 0;
462 + }
463 + .right-triangle {
464 + left: 32px;
465 + height: 20px;
466 + position: absolute;
467 + top: 0;
468 + -webkit-transform: rotate(45deg);
469 + transform: rotate(45deg);
470 + -webkit-transform-origin: 0 0;
471 + transform-origin: 0 0;
472 + width: 20px;
473 + }
474 + .right-square {
475 + left: 25px;
476 + background: #fff;
477 + height: 10px;
478 + position: absolute;
479 + top: 9px;
480 + -webkit-transform: rotate(45deg);
481 + transform: rotate(45deg);
482 + width: 10px;
483 + }
484 + .right-line1 {
485 + width: 28px;
486 + border-top: 1px solid;
487 + height: 0;
488 + position: absolute;
489 + right: 27px;
490 + top: 9px;
491 + }
492 + .right-line2 {
493 + width: 55px;
494 + border-bottom: 1px solid;
495 + bottom: 8px;
496 + height: 0;
497 + position: absolute;
498 + right: 0;
499 + }
500 + }
135 } 501 }
136 } 502 }
137 .fx-sub-html { 503 .fx-sub-html {
......