fix: bug修复。
This commit is contained in:
@@ -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)
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user