feat(sidebar-item):当目录名称字数超过5个时，鼠标悬停可以查看全部

ruoyi-ui/src/layout/components/Sidebar/Item.vue

@@ -1,29 +1,39 @@
-<script>
-export default {
-  name: 'MenuItem',
-  functional: true,
-  props: {
-    icon: {
-      type: String,
-      default: ''
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-  render(h, context) {
-    const { icon, title } = context.props
-    const vnodes = []
-
-    if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
-    }
-
-    if (title) {
-      vnodes.push(<span slot='title'>{(title)}</span>)
-    }
-    return vnodes
-  }
-}
-</script>
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    }
+
+    if (title) {
+      if (title.length > 5) {
+        vnodes.push(
+          <el-tooltip slot="title" className="item" effect="dark" content={title} placement="right">
+            <span>{(title)}</span>
+          </el-tooltip>
+        )
+      } else {
+        vnodes.push(
+          <span slot="title">{(title)}</span>
+        )
+      }
+    }
+    return vnodes
+  }
+}
+</script>