代码
// 保存设计
async function handleSave() {
saving.value = true
try {
if (route.query.type === '1') {
saveCustomDetail()
} else {
// 列表保存
dragPanel.value.submit((isLoading) => {
saving.value = isLoading
})
}
} catch (error) {
console.error('保存出错:', error)
saving.value = false // 可能需要根据具体情况处理错误状态
}
}
问题
点击按钮后,更改saving = true
后,界面反馈上还需要1s
左右才能进入loading状态
原因
保存过程中存在一些耗时的动作,如saveCustomDetail
, 因此引入定时器来保证用户点击的时候有足够快的反馈
修改后的代码如下
// 保存
async function handleSave() {
saving.value = true
// 详情保存
// 设置一个短暂的延迟,确保用户能够感知到点击操作
// await new Promise((resolve) => setTimeout(resolve, 100))
setTimeout(async () => {
try {
if (route.query.type === '1') {
await saveCustomDetail()
} else {
// 列表保存
dragPanel.value.submit((isLoading) => {
saving.value = isLoading
})
}
} catch (error) {
console.error('保存出错:', error)
saving.value = false // 可能需要根据具体情况处理错误状态
}
}, 100)
}