调整英文版导航显示

fhKeeper/formulahousekeeper/timesheet/src/views/Home.vue

@@ -17,7 +17,7 @@
 
             <el-col :span="10" class="userinfo">
                 <!-- 中英文切换入口 -->
-                <!-- <el-dropdown trigger="click" @command="langChange" style="margin-right:30px;">
+                <el-dropdown trigger="click" @command="langChange" style="margin-right:30px;">
                     <span class="el-dropdown-link userinfo-inner">
                         {{language}} <i class="el-icon-caret-bottom"></i>
                     </span>
@@ -25,7 +25,7 @@
                         <el-dropdown-item divided  command="zh">中文</el-dropdown-item>
                         <el-dropdown-item divided  command="en">English</el-dropdown-item>
                     </el-dropdown-menu> 
-                </el-dropdown> -->
+                </el-dropdown>
 
                 <el-dropdown trigger="hover" style="margin-right:30px;">
                     <span class="el-dropdown-link userinfo-inner">
@@ -92,17 +92,26 @@
                             <template slot="title"> 
                                 <i :class="item.iconCls"></i>
                                 <!-- <span class="itemName">{{item.name}}</span> -->
-                                <span class="itemName">{{$t(item.meta.text)}}</span>
+                                <span class="itemName bosx" v-if="$t(item.meta.text).length < 16">{{$t(item.meta.text)}}</span>
+                                <el-tooltip class="itemName bosx"  v-if="$t(item.meta.text).length > 16" effect="dark" :content="$t(item.meta.text)" placement="top">
+                                    <span>{{$t(item.meta.text)}}</span>
+                                </el-tooltip>
                             </template>
                             <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden"><i :class="child.iconCls"></i>
                                 <!-- {{child.name}} -->
-                                {{$t(child.meta.text)}}
+                                <span class="bosx" v-if="$t(child.meta.text).length < 16">{{$t(child.meta.text)}}</span>
+                                <el-tooltip class="bosx"  v-if="$t(child.meta.text).length > 16" effect="dark" :content="$t(child.meta.text)" placement="top">
+                                    <span>{{$t(child.meta.text)}}</span>
+                                </el-tooltip>
                             </el-menu-item>
                         </el-submenu>
                         <el-menu-item v-if="item.leaf && item.children.length > 0" :index="item.children[0].path">
                             <i :class="item.iconCls"></i> 
                             <!-- {{item.children[0].name}} -->
-                            {{$t(item.meta.text)}}
+                            <span class="bosx" v-if="$t(item.meta.text).length < 16">{{$t(item.meta.text)}}</span>
+                            <el-tooltip class="itemName bosx"  v-if="$t(item.meta.text).length > 16" effect="dark" :content="$t(item.meta.text)" placement="top">
+                                <span>{{$t(item.meta.text)}}</span>
+                            </el-tooltip>
                             <!-- {{$t('navigation.reports')}} -->
                             <!-- this.$t('navigation.reports')  // js-->
                         </el-menu-item>
@@ -673,4 +682,11 @@
     .isRead {
         color: #999 !important;
     }
+    .bosx {
+        width: 110px;
+        display: inline-block;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
 </style>