绘图工具调整

src/components/common/DraggableDialog.vue

@@ -84,7 +84,7 @@
 
 <script setup lang="ts">
 import { QBar, useDialogPluginComponent } from 'quasar';
-import { ref, onMounted, onUnmounted, reactive } from 'vue';
+import { ref, onMounted, onUnmounted, reactive, watch } from 'vue';
 import ResizableDivWidth from './ResizableDivWidth.vue';
 import ResizableDivHeight from './ResizableDivHeight.vue';
 
@@ -121,6 +121,14 @@ const props = withDefaults(
   }
 );
 
+watch(
+  () => props.height,
+  () => {
+    dialogHeight.value = props.height;
+    lastDialogHeight = props.height;
+  }
+);
+
 const { dialogRef, onDialogHide /* , onDialogCancel, onDialogOK */ } =
   useDialogPluginComponent();
 

src/layouts/IscsDrawLayout.vue

@@ -103,12 +103,12 @@
     <draggable-dialog
       seamless
       title="绘制工具"
-      :width="230"
-      :height="50"
+      :width="130"
+      :height="drawDialogHeight"
       v-model="showDrawTool"
       canNotClose
     >
-      <q-btn-toggle
+      <!-- <q-btn-toggle
         v-model="selectUtil"
         color="brown"
         text-color="white"
@@ -116,15 +116,22 @@
         toggle-text-color="black"
         :options="utilsOption"
         @update:model-value="drawSelect"
+      > -->
+      <div class="row wrap">
+        <template v-for="(ctl, idx) in utilsOption" :key="idx">
+          <q-btn
+            square
+            style="margin: 4px"
+            color="brown"
+            @click="drawSelect(ctl.value)"
+            :icon="ctl.icon"
           >
-        <template
-          v-for="(ctl, idx) in utilsOption"
-          :key="idx"
-          v-slot:[ctl.value]
-        >
-          <q-tooltip>{{ ctl.tip }}</q-tooltip>
+          </q-btn>
         </template>
-      </q-btn-toggle>
+      </div>
+
+      <!-- <q-tooltip>{{ ctl.tip }}</q-tooltip> -->
+      <!-- </q-btn-toggle> -->
     </draggable-dialog>
     <q-resize-observer @resize="onResize" />
   </q-layout>
@@ -153,6 +160,7 @@ const router = useRouter();
 const searchId = ref(0);
 const drawStore = useDrawStore();
 const showDrawTool = ref(true);
+const drawDialogHeight = ref(44);
 
 watch(
   () => drawStore.drawMode,
@@ -192,9 +200,10 @@ function toggleRightDrawer() {
 //工具栏所用
 const selectUtil = ref();
 const utilsOption: ControlItem[] = reactive([]);
-const drawSelect = (item: string) => {
+
+function drawSelect(item: string) {
   drawStore.getDrawApp().interactionPlugin(item).resume();
-};
+}
 class ControlItem {
   value: string;
   slot: string;
@@ -250,6 +259,7 @@ onMounted(() => {
       );
     }
   });
+  drawDialogHeight.value = 44 * Math.ceil(utilsOption.length / 2);
 });
 
 const canvasWidth = ref(0);