fix 细节处理

hookehuyr
Commit 8756509f49f01a7af773031b4a51e984be4f263a 8756509f 1 parent aba0fcd5
Showing 1 changed file with 15 additions and 12 deletions
src/components/DividerField/index.vue
--- a/src/components/DividerField/index.vue
View file @8756509
+++ b/src/components/DividerField/index.vue
View file @8756509
 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-02 17:17:26
+ * @LastEditTime: 2024-09-03 10:20:07
  * @FilePath: /data-table/src/components/DividerField/index.vue
  * @Description: 分隔线组件
 -->
 <template>
   <div class="divider-field-page">
     <div v-if="styleType === 'type1'" class="type1">
-      <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">字段标题</div>
+      <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ dividerTitle }}</div>
     </div>
     <div v-if="styleType === 'type2'" class="type2">
-      <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">字段标题</div>
+      <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ dividerTitle }}</div>
       <div :style="{ borderTop: '1px dashed', borderColor: bgColor }"></div>
     </div>
     <div v-if="styleType === 'type3'" class="type3">
-      <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">字段标题</div>
+      <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ dividerTitle }}</div>
       <div :style="{ borderTop: '1px solid', borderColor: bgColor }"></div>
     </div>
     <div v-if="styleType === 'type4'" class="type4">
-      <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">字段标题</div>
+      <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ dividerTitle }}</div>
       <div :style="{ borderTop: '2px solid', borderColor: bgColor }"></div>
     </div>
     <div v-if="styleType === 'type5'" class="type5">
       <div class="sep-line">
         <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor}">
-          <span>字段标题</span>
+          <span>{{ dividerTitle }}</span>
         </div>
         <div class="sep-right">
           <div class="right-triangle" :style="{ backgroundColor: bgColor}"></div>
@@ -37,14 +37,14 @@
       </div>
     </div>
     <div v-if="styleType === 'type6'" class="type6">
-      <div class="sep-style-select-field-label" :style="{ color: titleColor }">字段标题</div>
+      <div class="sep-style-select-field-label" :style="{ color: titleColor }">{{ dividerTitle }}</div>
       <div class="sep-style-select-item">
         <div class="sep-line">
           <div class="sep-bg-wrapper">
             <div class="sep-bg" :style="{ borderColor: bgColor }"></div>
           </div>
           <div class="sep-label" style="background-color: rgb(250, 129, 24);">
-            <span>字段标题</span>
+            <span>{{ dividerTitle }}</span>
           </div>
         </div>
       </div>
@@ -55,7 +55,7 @@
           <div class="sep-bg" :style="{ backgroundColor: bgColor}"></div>
         </div>
         <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor }">
-          <span>字段标题</span>
+          <span>{{ dividerTitle }}</span>
         </div>
       </div>
     </div>
@@ -64,7 +64,7 @@
         <div class="sep-bg" :style="{ backgroundColor: bgColor}"></div>
         <div class="sep-center">
           <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor }">
-            <span>字段标题</span>
+            <span>{{ dividerTitle }}</span>
           </div>
           <div class="left-triangle" :style="{ backgroundColor: bgColor}"></div>
           <div class="left-border" :style="{ backgroundColor: bgColor}"></div>
@@ -83,7 +83,7 @@
           <div class="left-line2" :style="{ borderColor: bgColor }"></div>
         </div>
         <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor}">
-          <span>字段标题</span>
+          <span>{{ dividerTitle }}</span>
         </div>
         <div class="right-wrapper">
           <div class="right-block" :style="{ backgroundColor: bgColor}"></div>
@@ -94,7 +94,7 @@
         </div>
       </div>
     </div>
-    <div class="fx-sub-html">这里是字段的描述信息</div>
+    <div class="fx-sub-html" v-html="desc"></div>
   </div>
 </template>
@@ -111,6 +111,9 @@ const titleColor = ref('');
 const styleType = ref('type5');
+const dividerTitle = ref('分割标题');
+const desc = ref('<b>描述信息</b>');
+
 onMounted(() => {
   // styleObj.value = {
   //   color: props.item.component_props.color,