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 378 additions and 12 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 v-if="styleType === 'type1'" class="type1"></div>
11 + <div v-if="styleType === 'type2'" class="type2">
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">
10 <div class="sep-line"> 24 <div class="sep-line">
11 <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor}"> 25 <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor}">
12 <span>字段标题</span> 26 <span>字段标题</span>
...@@ -19,6 +33,66 @@ ...@@ -19,6 +33,66 @@
19 <div class="right-parallelogram3" :style="{ backgroundColor: bgColor}"></div> 33 <div class="right-parallelogram3" :style="{ backgroundColor: bgColor}"></div>
20 </div> 34 </div>
21 </div> 35 </div>
36 + </div>
37 + <div v-if="styleType === 'type6'" class="type6">
38 + <div class="sep-style-select-field-label" :style="{ color: titleColor }">字段标题</div>
39 + <div class="sep-style-select-item">
40 + <div class="sep-line">
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>
94 + </div>
95 + </div>
22 <div class="fx-sub-html">这里是字段的描述信息</div> 96 <div class="fx-sub-html">这里是字段的描述信息</div>
23 </div> 97 </div>
24 </template> 98 </template>
...@@ -34,30 +108,33 @@ const styleBorder = ref({}); ...@@ -34,30 +108,33 @@ 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;
137 + .type5 {
61 .sep-line { 138 .sep-line {
62 display: -webkit-box; 139 display: -webkit-box;
63 display: -ms-flexbox; 140 display: -ms-flexbox;
...@@ -134,6 +211,295 @@ onMounted(() => { ...@@ -134,6 +211,295 @@ onMounted(() => {
134 width: 8px; 211 width: 8px;
135 } 212 }
136 } 213 }
214 + }
215 + .type6 {
216 + .sep-style-select-field-label {
217 + font-size: 14px;
218 + line-height: 20px;
219 + margin-bottom: 5px;
220 + }
221 + .sep-style-select-item {
222 + -webkit-transform: scale(.8);
223 + transform: scale(.8);
224 + -webkit-transform-origin: 0 50%;
225 + transform-origin: 0 50%;
226 + width: 125%;
227 + .sep-line {
228 + height: 8px;
229 + position: relative;
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 + }
259 + }
260 + }
261 + .type7 {
262 + .sep-line {
263 + height: 28px;
264 + position: relative;
265 + .sep-bg-wrapper {
266 + bottom: 0;
267 + left: 0;
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 + }
295 + }
296 + }
297 + .type8 {
298 + .sep-line {
299 + -webkit-box-pack: center;
300 + -ms-flex-pack: center;
301 + display: -webkit-box;
302 + display: -ms-flexbox;
303 + display: flex;
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 + }
501 + }
502 + }
137 .fx-sub-html { 503 .fx-sub-html {
138 color: #000; 504 color: #000;
139 font-size: 0.85rem; 505 font-size: 0.85rem;
......