Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
8e57feab 1 parent d8534fbf

✨ feat: 联调分割线线上字段

Inline Side-by-side
Showing 1 changed file with 48 additions and 71 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-09-03 10:20:07 4 + * @LastEditTime: 2024-11-12 16:40:42
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"> 10 + <div v-if="item.component_props.style === 'type1'" class="type1">
11 - <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ dividerTitle }}</div> 11 + <div v-if="!item.component_props.hide_label" :style="{ color: item.component_props.label_color, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ item.component_props.label }}</div>
12 </div> 12 </div>
13 - <div v-if="styleType === 'type2'" class="type2"> 13 + <div v-if="item.component_props.style === 'type2'" class="type2">
14 - <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ dividerTitle }}</div> 14 + <div v-if="!item.component_props.hide_label" :style="{ color: item.component_props.label_color, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ item.component_props.label }}</div>
15 - <div :style="{ borderTop: '1px dashed', borderColor: bgColor }"></div> 15 + <div :style="{ borderTop: '1px dashed', borderColor: item.component_props.theme_color }"></div>
16 </div> 16 </div>
17 - <div v-if="styleType === 'type3'" class="type3"> 17 + <div v-if="item.component_props.style === 'type3'" class="type3">
18 - <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ dividerTitle }}</div> 18 + <div v-if="!item.component_props.hide_label" :style="{ color: item.component_props.label_color, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ item.component_props.label }}</div>
19 - <div :style="{ borderTop: '1px solid', borderColor: bgColor }"></div> 19 + <div :style="{ borderTop: '1px solid', borderColor: item.component_props.theme_color }"></div>
20 </div> 20 </div>
21 - <div v-if="styleType === 'type4'" class="type4"> 21 + <div v-if="item.component_props.style === 'type4'" class="type4">
22 - <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ dividerTitle }}</div> 22 + <div v-if="!item.component_props.hide_label" :style="{ color: item.component_props.label_color, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ item.component_props.label }}</div>
23 - <div :style="{ borderTop: '2px solid', borderColor: bgColor }"></div> 23 + <div :style="{ borderTop: '2px solid', borderColor: item.component_props.theme_color }"></div>
24 </div> 24 </div>
25 - <div v-if="styleType === 'type5'" class="type5"> 25 + <div v-if="item.component_props.style === 'type5'" class="type5">
26 <div class="sep-line"> 26 <div class="sep-line">
27 - <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor}"> 27 + <div class="sep-label" :style="{ color: item.component_props.label_color, backgroundColor: item.component_props.theme_color}">
28 - <span>{{ dividerTitle }}</span> 28 + <span v-if="!item.component_props.hide_label">{{ item.component_props.label }}</span>
29 </div> 29 </div>
30 <div class="sep-right"> 30 <div class="sep-right">
31 - <div class="right-triangle" :style="{ backgroundColor: bgColor}"></div> 31 + <div class="right-triangle" :style="{ backgroundColor: item.component_props.theme_color}"></div>
32 - <div class="right-line" :style="{ borderColor: bgColor }"></div> 32 + <div class="right-line" :style="{ borderColor: item.component_props.theme_color }"></div>
33 - <div class="right-parallelogram1" :style="{ backgroundColor: bgColor}"></div> 33 + <div class="right-parallelogram1" :style="{ backgroundColor: item.component_props.theme_color}"></div>
34 - <div class="right-parallelogram2" :style="{ backgroundColor: bgColor}"></div> 34 + <div class="right-parallelogram2" :style="{ backgroundColor: item.component_props.theme_color}"></div>
35 - <div class="right-parallelogram3" :style="{ backgroundColor: bgColor}"></div> 35 + <div class="right-parallelogram3" :style="{ backgroundColor: item.component_props.theme_color}"></div>
36 </div> 36 </div>
37 </div> 37 </div>
38 </div> 38 </div>
39 - <div v-if="styleType === 'type6'" class="type6"> 39 + <div v-if="item.component_props.style === 'type6'" class="type6">
40 - <div class="sep-style-select-field-label" :style="{ color: titleColor }">{{ dividerTitle }}</div> 40 + <div v-if="!item.component_props.hide_label" class="sep-style-select-field-label" :style="{ color: item.component_props.label_color }">{{ item.component_props.label }}</div>
41 <div class="sep-style-select-item"> 41 <div class="sep-style-select-item">
42 <div class="sep-line"> 42 <div class="sep-line">
43 <div class="sep-bg-wrapper"> 43 <div class="sep-bg-wrapper">
44 - <div class="sep-bg" :style="{ borderColor: bgColor }"></div> 44 + <div class="sep-bg" :style="{ borderColor: item.component_props.theme_color }"></div>
45 </div> 45 </div>
46 <div class="sep-label" style="background-color: rgb(250, 129, 24);"> 46 <div class="sep-label" style="background-color: rgb(250, 129, 24);">
47 - <span>{{ dividerTitle }}</span> 47 + <span v-if="!item.component_props.hide_label">{{ item.component_props.label }}</span>
48 </div> 48 </div>
49 </div> 49 </div>
50 </div> 50 </div>
51 </div> 51 </div>
52 - <div v-if="styleType === 'type7'" class="type7"> 52 + <div v-if="item.component_props.style === 'type7'" class="type7">
53 <div class="sep-line"> 53 <div class="sep-line">
54 <div class="sep-bg-wrapper"> 54 <div class="sep-bg-wrapper">
55 - <div class="sep-bg" :style="{ backgroundColor: bgColor}"></div> 55 + <div class="sep-bg" :style="{ backgroundColor: item.component_props.theme_color}"></div>
56 </div> 56 </div>
57 - <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor }"> 57 + <div class="sep-label" :style="{ color: item.component_props.label_color, backgroundColor: item.component_props.theme_color }">
58 - <span>{{ dividerTitle }}</span> 58 + <span v-if="!item.component_props.hide_label">{{ item.component_props.label }}</span>
59 </div> 59 </div>
60 </div> 60 </div>
61 </div> 61 </div>
62 - <div v-if="styleType === 'type8'" class="type8"> 62 + <div v-if="item.component_props.style === 'type8'" class="type8">
63 <div class="sep-line"> 63 <div class="sep-line">
64 - <div class="sep-bg" :style="{ backgroundColor: bgColor}"></div> 64 + <div class="sep-bg" :style="{ backgroundColor: item.component_props.theme_color}"></div>
65 <div class="sep-center"> 65 <div class="sep-center">
66 - <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor }"> 66 + <div class="sep-label" :style="{ color: item.component_props.label_color, backgroundColor: item.component_props.theme_color }">
67 - <span>{{ dividerTitle }}</span> 67 + <span v-if="!item.component_props.hide_label">{{ item.component_props.label }}</span>
68 </div> 68 </div>
69 - <div class="left-triangle" :style="{ backgroundColor: bgColor}"></div> 69 + <div class="left-triangle" :style="{ backgroundColor: item.component_props.theme_color}"></div>
70 - <div class="left-border" :style="{ backgroundColor: bgColor}"></div> 70 + <div class="left-border" :style="{ backgroundColor: item.component_props.theme_color}"></div>
71 - <div class="right-triangle" :style="{ backgroundColor: bgColor}"></div> 71 + <div class="right-triangle" :style="{ backgroundColor: item.component_props.theme_color}"></div>
72 - <div class="right-border" :style="{ backgroundColor: bgColor}"></div> 72 + <div class="right-border" :style="{ backgroundColor: item.component_props.theme_color}"></div>
73 </div> 73 </div>
74 </div> 74 </div>
75 </div> 75 </div>
76 - <div v-if="styleType === 'type9'" class="type9"> 76 + <div v-if="item.component_props.style === 'type9'" class="type9">
77 <div class="sep-line"> 77 <div class="sep-line">
78 <div class="left-wrapper"> 78 <div class="left-wrapper">
79 - <div class="left-block" :style="{ backgroundColor: bgColor}"></div> 79 + <div class="left-block" :style="{ backgroundColor: item.component_props.theme_color}"></div>
80 - <div class="left-triangle" :style="{ backgroundColor: bgColor}"></div> 80 + <div class="left-triangle" :style="{ backgroundColor: item.component_props.theme_color}"></div>
81 <div class="left-square"></div> 81 <div class="left-square"></div>
82 - <div class="left-line1" :style="{ borderColor: bgColor }"></div> 82 + <div class="left-line1" :style="{ borderColor: item.component_props.theme_color }"></div>
83 - <div class="left-line2" :style="{ borderColor: bgColor }"></div> 83 + <div class="left-line2" :style="{ borderColor: item.component_props.theme_color }"></div>
84 </div> 84 </div>
85 - <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor}"> 85 + <div class="sep-label" :style="{ color: item.component_props.label_color, backgroundColor: item.component_props.theme_color}">
86 - <span>{{ dividerTitle }}</span> 86 + <span v-if="!item.component_props.hide_label">{{ item.component_props.label }}</span>
87 </div> 87 </div>
88 <div class="right-wrapper"> 88 <div class="right-wrapper">
89 - <div class="right-block" :style="{ backgroundColor: bgColor}"></div> 89 + <div class="right-block" :style="{ backgroundColor: item.component_props.theme_color}"></div>
90 - <div class="right-triangle" :style="{ backgroundColor: bgColor}"></div> 90 + <div class="right-triangle" :style="{ backgroundColor: item.component_props.theme_color}"></div>
91 <div class="right-square"></div> 91 <div class="right-square"></div>
92 - <div class="right-line1" :style="{ borderColor: bgColor }"></div> 92 + <div class="right-line1" :style="{ borderColor: item.component_props.theme_color }"></div>
93 - <div class="right-line2" :style="{ borderColor: bgColor }"></div> 93 + <div class="right-line2" :style="{ borderColor: item.component_props.theme_color }"></div>
94 </div> 94 </div>
95 </div> 95 </div>
96 </div> 96 </div>
97 - <div class="fx-sub-html" v-html="desc"></div> 97 + <div class="fx-sub-html" v-html="item.component_props.description"></div>
98 </div> 98 </div>
99 </template> 99 </template>
100 100
...@@ -106,32 +106,9 @@ const props = defineProps({ ...@@ -106,32 +106,9 @@ const props = defineProps({
106 const styleTitle = ref({}); 106 const styleTitle = ref({});
107 const styleBorder = ref({}); 107 const styleBorder = ref({});
108 108
109 -const bgColor = ref('');
110 -const titleColor = ref('');
111 -
112 -const styleType = ref('type5');
113 -
114 -const dividerTitle = ref('分割标题');
115 const desc = ref('<b>描述信息</b>'); 109 const desc = ref('<b>描述信息</b>');
116 110
117 onMounted(() => { 111 onMounted(() => {
118 - // styleObj.value = {
119 - // color: props.item.component_props.color,
120 - // borderColor: props.item.component_props.color,
121 - // padding: props.item.component_props.padding,
122 - // };
123 - // styleTitle.value = {
124 - // color: "blue",
125 - // fontSize: "0.9rem",
126 - // };
127 - // styleBorder.value = {
128 - // border: "1px dashed",
129 - // borderColor: "red",
130 - // margin: "5px 0",
131 - // };
132 -
133 - titleColor.value = '#FFF';
134 - bgColor.value = '#FA8118';
135 }); 112 });
136 </script> 113 </script>
137 114
......