Selaa lähdekoodia

修改弹窗组件可以自定义标题

画安 4 päivää sitten
vanhempi
commit
7639c5482f
2 muutettua tiedostoa jossa 18 lisäystä ja 1 poistoa
  1. 11 1
      src/components/SmartDialog.vue
  2. 7 0
      src/views/MainWatch.vue

+ 11 - 1
src/components/SmartDialog.vue

@@ -10,7 +10,11 @@
       :class="{ 'is-draggable': draggable }"
       @mousedown="startDrag"
     >
-      <span class="title">{{ title }}</span>
+      <div class="title-content">
+        <slot name="header">
+          <span class="title">{{ title }}</span>
+        </slot>
+      </div>
       <span class="close-btn" @click.stop="close">✕</span>
     </div>
 
@@ -273,6 +277,12 @@ export default {
   cursor: move;
 }
 
+/* 标题容器:自适应填充 */
+.title-content {
+  flex: 1;
+  min-width: 0;
+}
+
 /* 标题样式:纯白、加粗 */
 .title {
   color: #ffffff;

+ 7 - 0
src/views/MainWatch.vue

@@ -122,6 +122,13 @@
         :defaultHeight="dialog.height || 250"
         @close="removeDialog(dialog.id)"
       >
+        <template #header>
+          <span class="title" v-if="dialog.componentName === 'TrafficTimeSpace'">{{dialog.title}}</span>
+          <div style="display: flex; align-items: center; gap: 8px;" v-else-if="dialog.componentName === 'SignalTimingChart'">
+            <span style="color: #fff; font-size: 16px;">信号配时图表</span>
+            <span style="color: #4da8ff; font-size: 12px;">在线</span>
+          </div>
+        </template>
         <component v-if="dialog.componentName === 'TrafficTimeSpace'"
           :is="dialog.componentName"
           :intersections="dialog.nodeData.intersections"