@ebiz/designer-components 0.0.18-beta.20 → 0.0.18-beta.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.18-beta.20",
+  "version": "0.0.18-beta.21",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/EbizDetailBlock.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="ebiz-detail-block">
         <t-row v-for="(item, index) in detailItems" :key="index" class="detail-item">
-            <t-col :span="6" class="label">{{ item.label }}</t-col>
-            <t-col :span="18" class="value">{{ item.value }}</t-col>
+            <t-col :span="6" class="label" :style="labelStyle">{{ item.label }}</t-col>
+            <t-col :span="18" class="value" :style="valueStyle">{{ item.value }}</t-col>
         </t-row>
     </div>
 </template>
@@ -19,10 +19,41 @@ const props = defineProps({
     labelMap: {
         type: Object,
         default: () => { }
+    },
+    gap: {
+        type: [String, Number],
+        default: '0'
+    },
+    labelSize: {
+        type: [String, Number],
+        default: '14'
+    },
+    labelColor: {
+        type: String,
+        default: '#86909C'
+    },
+    valueSize: {
+        type: [String, Number],
+        default: '14'
+    },
+    valueColor: {
+        type: String,
+        default: '#0A0A0A'
     }
 })
 
-const { model, labelMap } = toRefs(props)
+const { model, labelMap, gap, labelSize, labelColor, valueSize, valueColor } = toRefs(props)
+
+const labelStyle = computed(() => ({
+    fontSize: typeof labelSize.value === 'number' ? `${labelSize.value}px` : labelSize.value,
+    color: labelColor.value,
+    marginBottom: typeof gap.value === 'number' ? `${gap.value}px` : gap.value
+}))
+
+const valueStyle = computed(() => ({
+    fontSize: typeof valueSize.value === 'number' ? `${valueSize.value}px` : valueSize.value,
+    color: valueColor.value
+}))
 
 const detailItems = computed(() => {
     return Object.entries(model.value).map(([key, value]) => ({
@@ -38,18 +69,14 @@ const detailItems = computed(() => {
 }
 
 .detail-item {
-    margin-bottom: 16px;
     line-height: 32px;
 }
 
 .label {
-    color: #86909C;
     width: 50%;
-    padding-right: 16px;
 }
 
 .value {
-    color: #0A0A0A;
     width: 50%;
 }
 </style>

package/src/views/EbizDetailBlockDemo.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <ebiz-route-breadcrumb />
-        <ebiz-detail-block :model="model" :labelMap="labelMap"/>
+        <ebiz-detail-block :model="model" :labelMap="labelMap" :gap="10" :labelSize="20" :labelColor="'#000'" :valueSize="20" :valueColor="'#000'"/>
     </div>
 </template>