fix: bug修复。

This commit is contained in:
tianyongbao
2026-01-09 20:14:24 +08:00
parent 3b51567f0c
commit f0e0b7915e

View File

@@ -448,13 +448,13 @@ export default {
if (this.timer) { if (this.timer) {
clearInterval(this.timer) clearInterval(this.timer)
} }
// 清理所有Sortable实例
this.destroySortables()
}, },
updated() { updated() {
// 数据更新后重新初始化拖拽 // 移除自动重新初始化,避免频繁销毁重建导致事件监听器错误
this.$nextTick(() => { // 只在必要时(如数据加载完成)手动调用 initSortable()
this.initSortable()
})
}, },
methods: { methods: {
@@ -639,9 +639,11 @@ export default {
// 切换Tab // 切换Tab
switchTab(superCategoryId) { switchTab(superCategoryId) {
this.activeSuperCategoryId = superCategoryId this.activeSuperCategoryId = superCategoryId
// 切换Tab后重新调整padding // 切换Tab后重新调整padding和重新初始化拖拽
this.$nextTick(() => { this.$nextTick(() => {
this.adjustContainerPadding() this.adjustContainerPadding()
// 切换Tab时需要重新初始化拖拽因为DOM结构变化了
this.initSortable()
}) })
}, },
@@ -703,9 +705,11 @@ export default {
this.activeSuperCategoryId = superCategories[0].id this.activeSuperCategoryId = superCategories[0].id
} }
// 数据加载完成后调整padding // 数据加载完成后调整padding和初始化拖拽
this.$nextTick(() => { this.$nextTick(() => {
this.adjustContainerPadding() this.adjustContainerPadding()
// 只在数据加载完成时初始化拖拽而非每次updated
this.initSortable()
}) })
} }
} catch (error) { } catch (error) {
@@ -1155,64 +1159,108 @@ export default {
} }
}, },
// 销毁所有Sortable实例
destroySortables() {
// 使用更安全的销毁方式避免removeEventListener报错
if (this.superCategorySortable) {
try {
this.superCategorySortable.destroy()
} catch (e) {
// 忽略销毁时的错误
}
this.superCategorySortable = null
}
if (this.categorySortable) {
try {
this.categorySortable.destroy()
} catch (e) {
// 忽略销毁时的错误
}
this.categorySortable = null
}
if (this.toolSortables && this.toolSortables.length > 0) {
this.toolSortables.forEach(s => {
if (s) {
try {
s.destroy()
} catch (e) {
// 忽略销毁时的错误
}
}
})
this.toolSortables = []
}
},
// 初始化拖拽排序 // 初始化拖拽排序
initSortable() { initSortable() {
// 销毁旧的 Sortable 实例 // 销毁旧的 Sortable 实例
if (this.superCategorySortable) { this.destroySortables()
this.superCategorySortable.destroy()
}
if (this.categorySortable) {
this.categorySortable.destroy()
}
if (this.toolSortables) {
this.toolSortables.forEach(s => s.destroy())
}
this.toolSortables = []
// 大分类 Tab 拖拽 // 延迟初始化确保DOM已完全更新
const tabListEl = document.querySelector('.tab-list') this.$nextTick(() => {
if (tabListEl) { // 大分类 Tab 拖拽
this.superCategorySortable = Sortable.create(tabListEl, { const tabListEl = document.querySelector('.tab-list')
animation: 150, if (tabListEl && !this.superCategorySortable) {
handle: '.tab-item', try {
ghostClass: 'sortable-ghost', this.superCategorySortable = Sortable.create(tabListEl, {
chosenClass: 'sortable-chosen', animation: 150,
dragClass: 'sortable-drag', handle: '.tab-item',
onEnd: (evt) => { ghostClass: 'sortable-ghost',
this.handleSuperCategorySort(evt) chosenClass: 'sortable-chosen',
dragClass: 'sortable-drag',
forceFallback: true, // 使用fallback模式避免原生拖拽事件冲突
onEnd: (evt) => {
this.handleSuperCategorySort(evt)
}
})
} catch (e) {
console.warn('初始化大分类拖拽失败:', e)
}
}
// 书签分组拖拽
const categoryListEl = document.querySelector('.category-list')
if (categoryListEl && !this.categorySortable) {
try {
this.categorySortable = Sortable.create(categoryListEl, {
animation: 150,
handle: '.category-item',
ghostClass: 'sortable-ghost',
chosenClass: 'sortable-chosen',
dragClass: 'sortable-drag',
forceFallback: true,
onEnd: (evt) => {
this.handleCategorySort(evt)
}
})
} catch (e) {
console.warn('初始化分组拖拽失败:', e)
}
}
// 网址列表拖拽(每个分组都需要初始化)
const toolLists = document.querySelectorAll('.tool-list')
toolLists.forEach((toolListEl, index) => {
try {
const sortable = Sortable.create(toolListEl, {
animation: 150,
handle: '.tool-drag-handle', // 只能通过拖拽手柄区域拖动
ghostClass: 'sortable-ghost',
chosenClass: 'sortable-chosen',
dragClass: 'sortable-drag',
forceFallback: true,
onEnd: (evt) => {
this.handleToolSort(evt, index)
}
})
this.toolSortables.push(sortable)
} catch (e) {
console.warn('初始化网址拖拽失败:', e)
} }
}) })
}
// 书签分组拖拽
const categoryListEl = document.querySelector('.category-list')
if (categoryListEl) {
this.categorySortable = Sortable.create(categoryListEl, {
animation: 150,
handle: '.category-item',
ghostClass: 'sortable-ghost',
chosenClass: 'sortable-chosen',
dragClass: 'sortable-drag',
onEnd: (evt) => {
this.handleCategorySort(evt)
}
})
}
// 网址列表拖拽(每个分组都需要初始化)
const toolLists = document.querySelectorAll('.tool-list')
toolLists.forEach((toolListEl, index) => {
const sortable = Sortable.create(toolListEl, {
animation: 150,
handle: '.tool-drag-handle', // 只能通过拖拽手柄区域拖动
ghostClass: 'sortable-ghost',
chosenClass: 'sortable-chosen',
dragClass: 'sortable-drag',
onEnd: (evt) => {
this.handleToolSort(evt, index)
}
})
this.toolSortables.push(sortable)
}) })
}, },