go-pkg/wireguard-dashboard-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

mod: 调整多标签滑动写法

Browse Source
This commit is contained in:
张传龙 2022-05-01 18:16:41 +08:00
parent 894b87426a
commit 76bd414941
1 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/layout/components/tags/index.vue
View File

@ -47,6 +47,8 @@ const contextMenuOption = reactive({
currentPath: '', currentPath: '',
}) })
let translateX = ref(0) let translateX = ref(0)
const tagsContent = ref()
const tagsWrapper = ref()
watch( watch(
() => route.path, () => route.path,
@ -82,33 +84,33 @@ async function handleContextMenu(e, tagItem) {
showContextMenu() showContextMenu()
} }
const tagsContent = ref()
const tagsWrapper = ref()
function handleMouseWheel(e) { function handleMouseWheel(e) {
let { wheelDelta } = e let { wheelDelta } = e
const tagsWrapperWidth = tagsWrapper.value.offsetWidth const tagsWrapperWidth = tagsWrapper.value.offsetWidth
const tagsContentWidth = tagsContent.value.offsetWidth const tagsContentWidth = tagsContent.value.offsetWidth
/** /**
* @wheelDelta >0： 向左滑动 <0: 向右滑动 * @wheelDelta 平行滚动的值 >0： 右移 <0: 左移
* @translateX 内容translateX的值
* @tagsWrapperWidth 容器的宽度
* @tagsContentWidth 内容的宽度
*/ */
// 向左滑动时，如果无偏移或者向左偏移，则不处理
// 向右移动时时，如果无偏移或者向左偏移，则不处理
if (wheelDelta > 0 && translateX.value >= 0) { if (wheelDelta > 0 && translateX.value >= 0) {
return return
} }
// 向右滑动，如果内容的宽度小于向左偏移的宽度+容器的宽度，则不处理 // 向左移动时，如果内容的宽度小于向左偏移的宽度+容器的宽度，则不处理
if (wheelDelta < 0 && tagsWrapperWidth > tagsContentWidth + translateX.value) { if (wheelDelta < 0 && tagsWrapperWidth > tagsContentWidth + translateX.value) {
return return
} }
if (wheelDelta > 0 && wheelDelta + translateX.value > 0) { if (wheelDelta > 0 && wheelDelta + translateX.value > 0) {
translateX.value = 0 wheelDelta = -translateX.value
return
} }
if (wheelDelta < 0 && -wheelDelta > tagsWrapperWidth - (tagsContentWidth + translateX.value)) { if (wheelDelta < 0 && -wheelDelta > tagsWrapperWidth - (tagsContentWidth + translateX.value)) {
wheelDelta = -(tagsContentWidth + translateX.value - tagsWrapperWidth) wheelDelta = tagsWrapperWidth - (tagsContentWidth + translateX.value)
} }
translateX.value += wheelDelta translateX.value += wheelDelta