画布工具添加滚动条功能

src/component/Canvas/ExistsImageList/ToolButton.vue

@@ -21,6 +21,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  tipBody: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(["click"]);
@@ -47,10 +51,45 @@ const handleClick = () => {
   if (isDisabled.value) return;
   emit("click", props.tool);
 };
+
+const tipId = "tooltip-" + Math.random().toString(36).substring(2);
+const el = ref(null);
+// 鼠标移入获取位置信息
+const handleMouseEnter = (e) => {
+  const tooltip = el.value;
+  const rect = tooltip.getBoundingClientRect();
+  const left = rect.left + rect.width;
+  const top = rect.top + rect.height / 2;
+  const tip = document.getElementById(tipId);
+  tip.style.position = 'fixed';
+  tip.style.left = `${left}px`;
+  tip.style.top = `${top}px`;
+  tip.style.display = 'block';
+}
+// 鼠标移出隐藏提示
+const handleMouseLeave = () => {
+  const tip = document.getElementById(tipId);
+  tip.style.display = 'none';
+}
+onMounted(() => {
+  if(props.tipBody){
+    el.value.addEventListener('mouseenter', handleMouseEnter);
+    el.value.addEventListener('mouseleave', handleMouseLeave);
+  }
+})
+
+onUnmounted(() => {
+  if(props.tipBody){
+    el.value.removeEventListener('mouseenter', handleMouseEnter);
+    el.value.removeEventListener('mouseleave', handleMouseLeave);
+  }	
+})
+
 </script>
 
 <template>
   <div
+    ref="el"
     :class="[
       'tool-btn',
       tool.class,
@@ -63,7 +102,10 @@ const handleClick = () => {
     @click="handleClick"
   >
     <SvgIcon :name="tool.icon.name" :size="tool.icon.size"></SvgIcon>
-    <div class="tool-tooltip">{{ t(tool.title) }}</div>
+    <teleport to="body" v-if="tipBody">
+      <div class="tool-tooltip" :id="tipId">{{ t(tool.title) }}</div>
+    </teleport>
+	<div class="tool-tooltip" v-else>{{ t(tool.title) }}</div>
   </div>
 </template>
 
@@ -82,6 +124,7 @@ const handleClick = () => {
   font-size: 1.6rem;
   color: #333;
   transition: all 0.2s ease;
+  flex-shrink: 0;
 }
 
 .tool-btn:hover {
@@ -115,7 +158,7 @@ const handleClick = () => {
   margin-left: .8rem;
   white-space: nowrap;
   font-size: 1.2rem;
-  z-index: 10;
+  z-index: 9999;
 }
 
 .tool-tooltip:before {