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

* fix(menu): 对菜单做了一些调整和优化。

1. 删除了菜单的动画效果
2. 当拖拽到菜单底部时,会触发滚动效果
3. 现在拖为子节点会方便那么一点(也不是很完美)
4. 当菜单头不在可视区域时,会触发跟随,不需要拖拽完菜单还需要返回顶部再保存了。

* pref: add animation for menu drag.

Co-authored-by: Ryan Wang <i@ryanc.cc>
pull/268/head
Li 2020-11-24 11:10:50 +08:00 committed by GitHub
parent 8bd9e13a80
commit ae5887a9ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 2 deletions

View File

@ -868,3 +868,10 @@ body {
left: 0;
}
}
.card-header-fixed .ant-card-head {
position: fixed;
background: white;
z-index: 999;
top: 0;
}

View File

@ -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>

View File

@ -146,10 +146,12 @@ export default {
computed: {
dragOptions() {
return {
animation: 300,
animation: 100,
group: 'description',
disabled: false,
ghostClass: 'ghost',
forceFallback: true,
emptyInsertThreshold: 20,
}
},
realValue() {