fix(menu): 对菜单做了一些调整和优化。 (halo-dev/console#267)

* fix(menu): 对菜单做了一些调整和优化。 1. 删除了菜单的动画效果 2. 当拖拽到菜单底部时，会触发滚动效果 3. 现在拖为子节点会方便那么一点（也不是很完美） 4. 当菜单头不在可视区域时，会触发跟随，不需要拖拽完菜单还需要返回顶部再保存了。 * pref: add animation for menu drag. Co-authored-by: Ryan Wang <i@ryanc.cc>
JohnNiang · Nov 24, 2020 · 558c1e0 · 558c1e0
1 parent 7abb68f
commit 558c1e0
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/src/components/global.less b/src/components/global.less
@@ -868,3 +868,10 @@ body {
     left: 0;
   }
 }
+
+.card-header-fixed .ant-card-head {
+  position: fixed;
+  background: white;
+  z-index: 999;
+  top: 0;
+}
diff --git a/src/views/interface/MenuList.vue b/src/views/interface/MenuList.vue
@@ -93,7 +93,12 @@
         :xs="24"
         class="pb-3"
       >
-        <a-card :bodyStyle="{ padding: '16px' }">
+        <a-card
+          :bodyStyle="{ padding: '16px' }"
+          ref="mheader"
+          :class="{ 'card-header-fixed': headerIsFixed }"
+          :headStyle="headStyle"
+        >
           <template slot="title">
             <span>
               {{ menuListTitle }}
@@ -220,6 +225,8 @@ export default {
       menuInternalLinkSelector: {
         visible: false,
       },
+      headerIsFixed: false,
+      headStyle: {},
     }
   },
   computed: {
@@ -260,10 +267,16 @@ export default {
     defaultMenuTeam() {
       return this.options.default_menu_team ? this.options.default_menu_team : ''
     },
+    mHeaderFromTopAbs() {
+      return Math.floor(Math.abs(this.mHeaderFromTop))
+    },
   },
   created() {
     this.handleListTeams()
   },
+  mounted() {
+    window.addEventListener('scroll', this.scrollHandle, true)
+  },
   methods: {
     ...mapActions(['refreshOptionsCache']),
     handleListTeams(autoSelectTeam = false) {
@@ -403,6 +416,13 @@ export default {
         this.refreshOptionsCache()
       }
     },
+
+    scrollHandle: function(e) {
+      if (this.$refs.mheader.$el !== undefined) {
+        this.headerIsFixed = this.$refs.mheader.$el.getBoundingClientRect().top < 0
+        this.$set(this.headStyle, 'width', this.$refs.mheader.$el.offsetWidth + 'px')
+      }
+    },
   },
 }
 </script>
diff --git a/src/views/interface/components/MenuTreeNode.vue b/src/views/interface/components/MenuTreeNode.vue
@@ -146,10 +146,12 @@ export default {
   computed: {
     dragOptions() {
       return {
-        animation: 300,
+        animation: 100,
         group: 'description',
         disabled: false,
         ghostClass: 'ghost',
+        forceFallback: true,
+        emptyInsertThreshold: 20,
       }
     },
     realValue() {