fix(editor-md): tooltip关闭innerHTML渲染后直接渲染问题 (DevCloudFE#1746)

luoyimaid · Sep 14, 2023 · 8f5684c · 8f5684c
1 parent dda7611
commit 8f5684c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 8 deletions.
diff --git a/packages/devui-vue/devui/editor-md/src/components/toolbar-item.tsx b/packages/devui-vue/devui/editor-md/src/components/toolbar-item.tsx
@@ -41,11 +41,20 @@ export default defineComponent({
     return () => (
       <>
         {config.type === 'button' && (
-          <Tooltip position={['top', 'bottom']} content={getTooltipContent(config.name, config.shortKey)} hide-after={1000}>
-            <span
-              class="md-toolbar-item"
-              onClick={onToolbarItemClick}
-              innerHTML={config.id === 'fullscreen' ? (showFullscreen.value ? config.exitIcon : config.icon) : config.icon}></span>
+          <Tooltip position={['top', 'bottom']} hide-after={1000}>
+            {{
+              default: () => (
+                <span
+                  class="md-toolbar-item"
+                  onClick={onToolbarItemClick}
+                  innerHTML={config.id === 'fullscreen' ? (showFullscreen.value ? config.exitIcon : config.icon) : config.icon}>
+                </span>
+              ),
+              content: () => (
+                <span class='md-toolbar-tip-content' innerHTML={getTooltipContent(config.name, config.shortKey)}>
+                </span>
+              )
+            }}
           </Tooltip>
         )}
         {config.type === 'dropDown' && (
@@ -54,7 +63,16 @@ export default defineComponent({
               default: () => (
                 <span>
                   <Tooltip position={showFullscreen.value ? ['right'] : ['top']} content={getTooltipContent(config.name)} hide-after={1000}>
-                    <span class="md-toolbar-item" onClick={() => config.handler?.()} innerHTML={config.icon}></span>
+                    {{
+                      default: () => (
+                        <span class="md-toolbar-item" onClick={() => config.handler?.()} innerHTML={config.icon}>
+                        </span>
+                      ),
+                      content: () => (
+                        <span class='md-toolbar-tip-content' innerHTML={getTooltipContent(config.name)}>
+                        </span>
+                      )
+                    }}
                   </Tooltip>
                 </span>
               ),

diff --git a/packages/devui-vue/devui/editor-md/src/components/toolbar.scss b/packages/devui-vue/devui/editor-md/src/components/toolbar.scss
@@ -40,6 +40,11 @@
   }
 }
 
+.md-toolbar-tip-content {
+  display: inline-block;
+  padding: 4px 16px;
+}
+
 .dropdown-font-size {
   padding: 0;
   margin: 0;

diff --git a/packages/devui-vue/docs/components/editor-md/index.md b/packages/devui-vue/docs/components/editor-md/index.md
@@ -259,7 +259,7 @@ export default defineComponent({
 $\\sqrt{3x-1}+(1+x)^2$  // DEMO无法进行import，使用时请放开代码中注释
     `);
 
-    mdPlugins = [{
+    const mdPlugins = [{
       // plugin: mk
     }];
 
@@ -303,7 +303,7 @@ Alice -> "Bob()" : Hello
 Long --> "Bob()" : ok
 @enduml`);
 
-    mdPlugins = [{
+    const mdPlugins = [{
       // plugin: PlantUml,
       // opts: {server: 'https://www/plantuml.com/plantuml'} // 自定义server可参考plantuml官方文档进行搭建
     }];