eoss-ui 0.7.85 → 0.7.87

package/packages/main/src/simplicity/menu-list.vue

@@ -1,135 +1,135 @@
-<template>
-  <el-scrollbar class="es-simplicity-menus-scrollbar">
-    <div
-      class="es-simplicity-menus-lists"
-      :class="{ 'is-fold': fold }"
-      @mouseleave="handleOut(true)"
-      @mouseenter="handleOut(false)"
-    >
-      <div
-        v-for="(item, index) in data"
-        class="es-simplicity-menus-item"
-        :key="item.id"
-        :class="{ 'is-fold': fold, 'is-active': active == item.id }"
-        :title="fold ? item.text || item.name : ''"
-        @click="handleClick(item)"
-        @mouseenter="handleEnter(item)"
-        @mouseleave="handleLeave(item)"
-      >
-        <template v-if="fold">
-          <el-badge is-dot :hidden="!item.tips">
-            <es-icon
-              class="es-simplicity_apps-icon"
-              :style="setStyle(index)"
-              :contents="item.icons || item.icon || menuIcon"
-            ></es-icon>
-          </el-badge>
-        </template>
-        <template v-else>
-          <es-icon
-            class="es-simplicity_apps-icon"
-            :style="setStyle(index)"
-            :contents="item.icons || item.icon || menuIcon"
-          ></es-icon>
-          <div class="es-simplicity-menus-tips" v-if="item.tips">
-            {{ item.tips > 99 ? '99+' : item.tips }}
-          </div>
-        </template>
-        <div class="es-simplicity_apps-text" v-show="!fold">
-          {{ item.text || item.name }}
-        </div>
-        <i
-          class="es-icon-you es-simplicity-menus-item-icon"
-          v-show="
-            (item.children && item.children.length) ||
-            (item.fourthTabs && item.fourthTabs.length)
-          "
-        ></i>
-      </div>
-    </div>
-  </el-scrollbar>
-</template>
-
-<script>
-import util from 'eoss-ui/src/utils/util';
-export default {
-  name: 'MenuList',
-  components: {},
-  props: {
-    active: String,
-    menuIcon: String,
-    color: [String, Array],
-    backgroundColor: [String, Array],
-    data: Array,
-    fold: Boolean,
-    width: Number,
-    popover: Boolean,
-    parent: Object
-  },
-  data() {
-    return {
-      defaultActive: this.active,
-      show: false,
-      height: document.body.offsetHeight - 44
-    };
-  },
-  computed: {},
-  watch: {
-    popover() {
-      if (this.$el.offsetHeight > this.height) {
-        this.$el.style.height = this.height + 'px';
-      } else {
-        this.$el.style.height = '';
-      }
-    }
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    setStyle(num) {
-      let obj = {};
-      if (this.color) {
-        obj.color = this.color;
-        if (Array.isArray(this.color)) {
-          obj.color = this.color[num % this.color.length];
-        } else {
-          obj.color = this.color;
-        }
-      }
-      if (this.backgroundColor) {
-        if (Array.isArray(this.backgroundColor)) {
-          obj.backgroundColor =
-            this.backgroundColor[num % this.backgroundColor.length];
-        } else {
-          obj.backgroundColor = this.backgroundColor;
-        }
-      }
-      return obj;
-    },
-    handleClick(res) {
-      this.defaultActive = res.id;
-      if (res.url) {
-        if (res.urlopenmode == 1) {
-          util.win.open(res.url);
-          return;
-        } else if (res.urlopenmode == 2) {
-          util.win.open(res.url, '_self');
-          return;
-        }
-        this.$emit('command', res);
-      }
-    },
-    handleEnter(res) {
-      this.$emit('menter', res);
-    },
-    handleLeave(res) {
-      this.$emit('mleave', res);
-    },
-    handleOut(res) {
-      this.$emit('mout', res);
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <el-scrollbar class="es-simplicity-menus-scrollbar">
+    <div
+      class="es-simplicity-menus-lists"
+      :class="{ 'is-fold': fold }"
+      @mouseleave="handleOut(true)"
+      @mouseenter="handleOut(false)"
+    >
+      <div
+        v-for="(item, index) in data"
+        class="es-simplicity-menus-item"
+        :key="item.id"
+        :class="{ 'is-fold': fold, 'is-active': active == item.id }"
+        :title="fold ? item.text || item.name : ''"
+        @click="handleClick(item)"
+        @mouseenter="handleEnter(item)"
+        @mouseleave="handleLeave(item)"
+      >
+        <template v-if="fold">
+          <el-badge is-dot :hidden="!item.tips">
+            <es-icon
+              class="es-simplicity_apps-icon"
+              :style="setStyle(index)"
+              :contents="item.icons || item.icon || menuIcon"
+            ></es-icon>
+          </el-badge>
+        </template>
+        <template v-else>
+          <es-icon
+            class="es-simplicity_apps-icon"
+            :style="setStyle(index)"
+            :contents="item.icons || item.icon || menuIcon"
+          ></es-icon>
+          <div class="es-simplicity-menus-tips" v-if="item.tips">
+            {{ item.tips > 99 ? '99+' : item.tips }}
+          </div>
+        </template>
+        <div class="es-simplicity_apps-text" v-show="!fold">
+          {{ item.text || item.name }}
+        </div>
+        <i
+          class="es-icon-you es-simplicity-menus-item-icon"
+          v-show="
+            (item.children && item.children.length) ||
+            (item.fourthTabs && item.fourthTabs.length)
+          "
+        ></i>
+      </div>
+    </div>
+  </el-scrollbar>
+</template>
+
+<script>
+import util from 'eoss-ui/src/utils/util';
+export default {
+  name: 'MenuList',
+  components: {},
+  props: {
+    active: String,
+    menuIcon: String,
+    color: [String, Array],
+    backgroundColor: [String, Array],
+    data: Array,
+    fold: Boolean,
+    width: Number,
+    popover: Boolean,
+    parent: Object
+  },
+  data() {
+    return {
+      defaultActive: this.active,
+      show: false,
+      height: document.body.offsetHeight - 44
+    };
+  },
+  computed: {},
+  watch: {
+    popover() {
+      if (this.$el.offsetHeight > this.height) {
+        this.$el.style.height = this.height + 'px';
+      } else {
+        this.$el.style.height = '';
+      }
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    setStyle(num) {
+      let obj = {};
+      if (this.color) {
+        obj.color = this.color;
+        if (Array.isArray(this.color)) {
+          obj.color = this.color[num % this.color.length];
+        } else {
+          obj.color = this.color;
+        }
+      }
+      if (this.backgroundColor) {
+        if (Array.isArray(this.backgroundColor)) {
+          obj.backgroundColor =
+            this.backgroundColor[num % this.backgroundColor.length];
+        } else {
+          obj.backgroundColor = this.backgroundColor;
+        }
+      }
+      return obj;
+    },
+    handleClick(res) {
+      this.defaultActive = res.id;
+      if (res.url) {
+        if (res.urlopenmode == 1) {
+          util.win.open(res.url);
+          return;
+        } else if (res.urlopenmode == 2) {
+          util.win.open(res.url, '_self');
+          return;
+        }
+        this.$emit('command', res);
+      }
+    },
+    handleEnter(res) {
+      this.$emit('menter', res);
+    },
+    handleLeave(res) {
+      this.$emit('mleave', res);
+    },
+    handleOut(res) {
+      this.$emit('mout', res);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>