mirror of https://github.com/halo-dev/halo-admin
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
parent
8bd9e13a80
commit
ae5887a9ea
|
@ -868,3 +868,10 @@ body {
|
|||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header-fixed .ant-card-head {
|
||||
position: fixed;
|
||||
background: white;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -146,10 +146,12 @@ export default {
|
|||
computed: {
|
||||
dragOptions() {
|
||||
return {
|
||||
animation: 300,
|
||||
animation: 100,
|
||||
group: 'description',
|
||||
disabled: false,
|
||||
ghostClass: 'ghost',
|
||||
forceFallback: true,
|
||||
emptyInsertThreshold: 20,
|
||||
}
|
||||
},
|
||||
realValue() {
|
||||
|
|
Loading…
Reference in New Issue