n20-common-lib 1.2.1 → 1.2.4

package/src/components/Layout/AsideNav/index.vue

@@ -1,144 +1,144 @@
-<template>
-  <el-menu
-    class="layout-aside flex-column"
-    :collapse="collapse"
-    :default-active="activeNav"
-    background-color="#3d4b6a"
-    text-color="#fefefea6"
-    active-text-color="#ffffff"
-  >
-    <template v-for="omenus in menus">
-      <template v-for="item in omenus.menu">
-        <!-- 一级菜单 -->
-        <el-menu-item
-          v-if="!item.children"
-          :key="item.title"
-          :index="item.uuid"
-          @click="linkFn(item)"
-        >
-          <i
-            v-if="item.iconUrl"
-            class="el-icon- icon-url"
-            :style="{ backgroundImage: `url(${item.iconUrl})` }"
-          ></i>
-          <i v-else :class="item.iconClass"></i>
-          <span v-if="!item.href" slot="title">{{ item | titleF }}</span>
-          <a
-            v-else
-            slot="title"
-            :href="item.href"
-            target="_blank"
-            :rel="/^\//.test(item.href) ? 'opener' : undefined"
-            >{{ item | titleF }}</a
-          >
-        </el-menu-item>
-        <el-submenu
-          v-else
-          :key="item.title"
-          :index="item.title"
-          popper-class="nav-menu-pop"
-        >
-          <template slot="title">
-            <i
-              v-if="item.iconUrl"
-              class="el-icon- icon-url"
-              :style="{ backgroundImage: `url(${item.iconUrl})` }"
-            ></i>
-            <i v-else :class="item.iconClass"></i>
-            <span>{{ item | titleF }}</span>
-          </template>
-          <template v-for="itemc in item.children">
-            <!-- 二级菜单 -->
-            <el-menu-item
-              v-if="!itemc.children"
-              :key="itemc.title"
-              :index="itemc.uuid"
-              @click="linkFn(itemc)"
-            >
-              <i
-                v-if="itemc.iconUrl"
-                class="el-icon- icon-url"
-                :style="{ backgroundImage: `url(${itemc.iconUrl})` }"
-              ></i>
-              <i v-else :class="itemc.iconClass"></i>
-              <span slot="title">{{ itemc | titleF }}</span>
-            </el-menu-item>
-            <el-submenu
-              v-else
-              :key="itemc.title"
-              :index="itemc.title"
-              popper-class="nav-menu-pop"
-            >
-              <template slot="title">
-                <i
-                  v-if="itemc.iconUrl"
-                  class="el-icon- icon-url"
-                  :style="{ backgroundImage: `url(${itemc.iconUrl})` }"
-                ></i>
-                <i v-else :class="itemc.iconClass"></i>
-                <span>{{ itemc | titleF }}</span>
-              </template>
-              <template v-for="itemcc in itemc.children">
-                <!-- 三级菜单 -->
-                <el-menu-item
-                  :key="itemcc.title"
-                  :index="itemcc.uuid"
-                  @click="linkFn(itemcc)"
-                >
-                  <i
-                    v-if="itemcc.iconUrl"
-                    class="el-icon- icon-url"
-                    :style="{ backgroundImage: `url(${itemcc.iconUrl})` }"
-                  ></i>
-                  <i v-else :class="itemcc.iconClass"></i>
-                  <span slot="title">{{ itemcc | titleF }}</span>
-                </el-menu-item>
-              </template>
-            </el-submenu>
-          </template>
-        </el-submenu>
-      </template>
-    </template>
-    <span class="flex-item"></span>
-    <div class="open-collapsed-btn">
-      <span :class="collapse ? 'n20-icon-caidanshouqi f-s-l rotate-icon':'n20-icon-caidanshouqi f-s-l' " @click="setCollapse"></span>
-    </div>
-  </el-menu>
-</template>
-
-<script>
-import { labelF } from '../utils'
-export default {
-  filters: {
-    titleF: labelF
-  },
-  props: {
-    menus: {
-      type: Array,
-      default: () => []
-    },
-    activeNav: {
-      type: String,
-      default: undefined
-    },
-    collapse: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {}
-  },
-  methods: {
-    linkFn(menu, base) {
-      if (!menu.href) {
-        this.$emit('menu-click', menu, base)
-      }
-    },
-    setCollapse() {
-      this.$emit('update:collapse', !this.collapse)
-      window.localStorage.setItem('aside-nav-collapse', !this.collapse)
-    }
-  }
-}
-</script>
+<template>
+  <el-menu
+    class="layout-aside flex-column"
+    :collapse="collapse"
+    :default-active="activeNav"
+    background-color="#3d4b6a"
+    text-color="#fefefea6"
+    active-text-color="#ffffff"
+  >
+    <template v-for="omenus in menus">
+      <template v-for="item in omenus.menu">
+        <!-- 一级菜单 -->
+        <el-menu-item
+          v-if="!item.children"
+          :key="item.title"
+          :index="item.uuid"
+          @click="linkFn(item)"
+        >
+          <i
+            v-if="item.iconUrl"
+            class="el-icon- icon-url"
+            :style="{ backgroundImage: `url(${item.iconUrl})` }"
+          ></i>
+          <i v-else :class="item.iconClass"></i>
+          <span v-if="!item.href" slot="title">{{ item | titleF }}</span>
+          <a
+            v-else
+            slot="title"
+            :href="item.href"
+            target="_blank"
+            :rel="/^\//.test(item.href) ? 'opener' : undefined"
+            >{{ item | titleF }}</a
+          >
+        </el-menu-item>
+        <el-submenu
+          v-else
+          :key="item.title"
+          :index="item.title"
+          popper-class="nav-menu-pop"
+        >
+          <template slot="title">
+            <i
+              v-if="item.iconUrl"
+              class="el-icon- icon-url"
+              :style="{ backgroundImage: `url(${item.iconUrl})` }"
+            ></i>
+            <i v-else :class="item.iconClass"></i>
+            <span>{{ item | titleF }}</span>
+          </template>
+          <template v-for="itemc in item.children">
+            <!-- 二级菜单 -->
+            <el-menu-item
+              v-if="!itemc.children"
+              :key="itemc.title"
+              :index="itemc.uuid"
+              @click="linkFn(itemc)"
+            >
+              <i
+                v-if="itemc.iconUrl"
+                class="el-icon- icon-url"
+                :style="{ backgroundImage: `url(${itemc.iconUrl})` }"
+              ></i>
+              <i v-else :class="itemc.iconClass"></i>
+              <span slot="title">{{ itemc | titleF }}</span>
+            </el-menu-item>
+            <el-submenu
+              v-else
+              :key="itemc.title"
+              :index="itemc.title"
+              popper-class="nav-menu-pop"
+            >
+              <template slot="title">
+                <i
+                  v-if="itemc.iconUrl"
+                  class="el-icon- icon-url"
+                  :style="{ backgroundImage: `url(${itemc.iconUrl})` }"
+                ></i>
+                <i v-else :class="itemc.iconClass"></i>
+                <span>{{ itemc | titleF }}</span>
+              </template>
+              <template v-for="itemcc in itemc.children">
+                <!-- 三级菜单 -->
+                <el-menu-item
+                  :key="itemcc.title"
+                  :index="itemcc.uuid"
+                  @click="linkFn(itemcc)"
+                >
+                  <i
+                    v-if="itemcc.iconUrl"
+                    class="el-icon- icon-url"
+                    :style="{ backgroundImage: `url(${itemcc.iconUrl})` }"
+                  ></i>
+                  <i v-else :class="itemcc.iconClass"></i>
+                  <span slot="title">{{ itemcc | titleF }}</span>
+                </el-menu-item>
+              </template>
+            </el-submenu>
+          </template>
+        </el-submenu>
+      </template>
+    </template>
+    <span class="flex-item"></span>
+    <div class="open-collapsed-btn">
+      <span :class="collapse ? 'n20-icon-caidanshouqi f-s-l rotate-icon':'n20-icon-caidanshouqi f-s-l' " @click="setCollapse"></span>
+    </div>
+  </el-menu>
+</template>
+
+<script>
+import { labelF } from '../utils'
+export default {
+  filters: {
+    titleF: labelF
+  },
+  props: {
+    menus: {
+      type: Array,
+      default: () => []
+    },
+    activeNav: {
+      type: String,
+      default: undefined
+    },
+    collapse: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    linkFn(menu, base) {
+      if (!menu.href) {
+        this.$emit('menu-click', menu, base)
+      }
+    },
+    setCollapse() {
+      this.$emit('update:collapse', !this.collapse)
+      window.localStorage.setItem('aside-nav-collapse', !this.collapse)
+    }
+  }
+}
+</script>