eoss-ui 0.5.81-beta8 → 0.5.81-beta9

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

@@ -1,70 +1,20 @@
 <template>
-  <el-scrollbar :class="{ 'is-fold': fold }">
-    <template v-for="(item, index) in data">
-      <el-popover
-        v-if="
-          (item.children && item.children.length) ||
-          (item.fourthTabs, item.fourthTabs.length)
-        "
-        placement="right"
-        trigger="hover"
-        popper-class="es-simplicity-menus-sub"
-        :width="width"
-        @show="handleShow"
-        @hide="handleHide"
-      >
-        <template slot-scope="{ parent }">
-          <menu-list
-            ref="menus"
-            :parent="parent"
-            :active="active"
-            :popover="show"
-            :data="[...(item.children || []), ...(item.fourthTabs || [])]"
-            :menuIcon="menuIcon"
-            :color="color"
-            :backgroundColor="backgroundColor"
-            :width="width"
-            @command="handleClick"
-          ></menu-list>
-        </template>
-        <div
-          slot="reference"
-          class="es-simplicity-menus-item"
-          :key="item.id"
-          :class="{ 'is-active': defaultActive === item.id, 'is-fold': fold }"
-          :title="fold ? item.text || item.name : ''"
-        >
-          <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>
-        </div>
-      </el-popover>
+  <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-else
+        v-for="(item, index) in data"
         class="es-simplicity-menus-item"
         :key="item.id"
-        :class="{ 'is-active': defaultActive === item.id, 'is-fold': fold }"
+        :class="{ 'is-fold': fold }"
         :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">
@@ -89,7 +39,7 @@
           {{ item.text || item.name }}
         </div>
       </div>
-    </template>
+    </div>
   </el-scrollbar>
 </template>
 
@@ -158,20 +108,17 @@ export default {
           util.win.location.href = res.url;
           return;
         }
+        this.$emit('command', res);
       }
-      this.$emit('command', res);
     },
-    handleShow() {
-      this.show = true;
-      if (this.parent) {
-        this.parent.changeContinue(true);
-      }
+    handleEnter(res) {
+      this.$emit('menter', res);
     },
-    handleHide() {
-      if (this.parent) {
-        this.parent.changeContinue(false);
-        //this.parent.hidePopper();
-      }
+    handleLeave(res) {
+      this.$emit('mleave', res);
+    },
+    handleOut(res) {
+      this.$emit('mout', res);
     }
   }
 };

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

@@ -29,7 +29,6 @@
           ></i>
         </div>
         <menu-list
-          ref="menus"
           :active="active"
           :data="menus"
           :menuIcon="menuIcon"
@@ -37,9 +36,57 @@
           :backgroundColor="backgroundColor"
           :fold="fold"
           :width="size"
+          @menter="
+            (res) => {
+              this.getData(res, 0, true);
+            }
+          "
+          @mleave="
+            (res) => {
+              this.getData(res, 0, false);
+            }
+          "
+          @hover="handleHover"
           @command="handleCommand"
         ></menu-list>
       </div>
+      <div
+        class="es-simplicity-menus-view"
+        @mouseleave="handleLeave"
+        @mouseenter="handleEnter"
+        v-show="subMenus.length"
+      >
+        <div
+          class="es-simplicity-menus-box"
+          v-for="(item, index) in subMenus"
+          :key="item.id"
+        >
+          <div class="es-simplicity-menus-title">
+            <span class="es-simplicity-menus-title-text">{{
+              item.name || item.text || item.title
+            }}</span>
+          </div>
+          <menu-list
+            :active="active"
+            :data="[...item.children, ...item.fourthTabs]"
+            :menuIcon="menuIcon"
+            :color="color"
+            :backgroundColor="backgroundColor"
+            :width="size"
+            @menter="
+              (res) => {
+                getData(res, index + 1, true);
+              }
+            "
+            @mleave="
+              (res) => {
+                getData(res, index + 1, false);
+              }
+            "
+            @command="handleCommand"
+          ></menu-list>
+        </div>
+      </div>
     </div>
   </el-drawer>
 </template>
@@ -93,7 +140,9 @@ export default {
     return {
       fold: false,
       width: this.size,
-      subMenus: []
+      subMenus: [],
+      isEnter: false,
+      timer: null
     };
   },
   computed: {
@@ -124,11 +173,44 @@ export default {
       this.$emit('update:fold', res);
     },
     handleCommand(res) {
+      console.log(res);
       this.$emit('command', res);
     },
+    getData(res, n, is) {
+      this.isEnter = is;
+      if (is) {
+        this.subMenus.splice(n);
+        let { children, fourthTabs } = res;
+        if (
+          (children && children.length) ||
+          (fourthTabs && fourthTabs.length)
+        ) {
+          this.subMenus = this.subMenus.concat(res);
+        }
+      } else {
+        if (n == 0) {
+          clearTimeout(this.timer);
+          this.timer = setTimeout(() => {
+            if (res && !this.isEnter) {
+              this.subMenus = [];
+            }
+          }, 200);
+        }
+      }
+    },
+    handleHover(res) {
+      this.isEnter = res;
+      //if(this)
+    },
     clearSubmenu() {
       this.$refs.menus.clearActive();
       this.subMenus = [];
+    },
+    handleLeave() {
+      this.subMenus = [];
+    },
+    handleEnter() {
+      this.isEnter = true;
     }
   }
 };

package/packages/main/src/simplicity/user.vue

@@ -42,7 +42,11 @@
     </div>
     <div class="es-simplicity-notice-type" v-if="userScanBindImgUrl">
       <div class="es-simplicity-notice-title">微信公众号：</div>
-      <img class="es-simplicity-qrcode" @click="getQrcode" :src="qrcode" />
+      <el-image
+        class="es-simplicity-qrcode"
+        @click="getQrcode"
+        :src="qrcode"
+      ></el-image>
     </div>
     <div class="es-simplicity-notice-type">
       <div class="es-simplicity-notice-title">接收消息类型：</div>