修改应用菜单缩进样式

src/components/app-menu-item/app-menu-item.vue

@@ -2,7 +2,7 @@
     <div class="app-menu-item">
         <template v-for="item in menus">
              <template v-if="item.items && Array.isArray(item.items) && item.items.length > 0">
-                <el-submenu v-show="!item.hidden" :index="item.name" :popper-class="popperClass" :key="item.id">
+                <el-submenu :class="{'isCollpase' : appMenuCollapseFlag}" v-show="!item.hidden" :index="item.name" :popper-class="popperClass" :key="item.id">
                     <template slot='title'>
                         <template v-if="item.icon && item.icon != ''">
                             <img :src="item.icon" class='app-menu-icon' />
@@ -13,25 +13,28 @@
                         <template v-else>
                             <i v-if="isFirst" class='fa fa-cogs app-menu-icon'></i>
                         </template>
-                        <span class='text' :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
+                        <span ref="circleText" :class="{'app-menu-circle' : appMenuCollapseFlag, 'text' : true}" :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
                     </template>
-                    <app-menu-item :menus="item.items" :ctrlName="ctrlName" :isFirst="false" :counterdata="counterdata" :popperclass="popperClass"></app-menu-item>
+                    <app-menu-item :isCollapse="isCollapse" :menus="item.items" :ctrlName="ctrlName" :isFirst="false" :counterdata="counterdata" :popper-class="popperClass"></app-menu-item>
                 </el-submenu>
              </template>
              <template v-else>
                 <template v-if="item.type =='MENUITEM'">
-                    <el-menu-item v-show="!item.hidden" :index="item.name" :key="item.id">
+                    <el-menu-item :class="{'isFirst' : isFirst}" v-show="!item.hidden" :index="item.name" :key="item.id">
                         <template v-if="item.icon && item.icon != ''">
                             <img :src="item.icon" class='app-menu-icon' />
+                            <span v-if="isCollapse" ref="circleText" :class="{'app-menu-circle' : appMenuCollapseFlag, 'text' : true}" :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
                         </template>
                         <template v-else-if="item.iconcls && item.iconcls != ''">
                             <i :class="[item.iconcls, 'app-menu-icon']"></i>
+                            <span v-if="isCollapse" ref="circleText" :class="{'app-menu-circle' : appMenuCollapseFlag, 'text' : true}" :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
                         </template>
                         <template v-else>
                             <i v-if="isFirst" class='fa fa-cogs app-menu-icon'></i>
+                            <span v-if="isCollapse" ref="circleText" :class="{'app-menu-circle' : appMenuCollapseFlag, 'text' : true}" :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
                         </template>
                         <template slot="title">
-                            <span class="text" :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
+                            <span ref="circleText" :class="{'app-menu-circle' : appMenuCollapseFlag, 'text' : true}" :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
                             <template v-if="counterdata && counterdata[item.counterid] && counterdata[item.counterid] > 0">
                                 <span class="pull-right">
                                     <badge :count="counterdata[item.counterid]" :overflow-count="9999"></badge>
@@ -94,5 +97,47 @@ export default class AppMenuItem extends Vue {
      */
     @Prop() public isFirst!: boolean;
 
+    /**
+     * 菜单是否缩进
+     * 
+     * @type {*}
+     * @memberof AppMenuItem
+     */
+    @Prop() public isCollapse!: boolean;
+
+    /**
+     * 菜单缩进，元素类名标记
+     * 
+     * @type {*}
+     * @memberof AppMenuItem
+     */
+    public appMenuCollapseFlag: boolean = false;
+
+    /**
+     * vue  生命周期
+     *
+     * @memberof AppIndexViewBase
+     */
+    public mounted() {
+        this.onCollapsechangeChange();
+    }
+
+    /**
+     * 根据菜单缩进状态修改菜单项值
+     */
+    onCollapsechangeChange() {
+        if(this.isCollapse && this.isFirst) {
+            this.appMenuCollapseFlag = true;
+            let appMenuCircle: any[] = this.$refs.circleText as any[];
+            if(appMenuCircle) {
+                appMenuCircle.forEach((item: any) => {
+                    let text: string = (item.innerText as string).slice(0,1);
+                    item.innerText = text;         
+                })
+            }
+        }
+    }
+
+
 }
 </script>
\ No newline at end of file