Vue+Bootstrap解决数据更新时进度条异常消失问题

问题根源 #

1. DOM更新被合并：你在同一个setTimeout里连续设置进度条宽度，浏览器会批量处理DOM修改，直接渲染最后一次的100%，看不到中间过渡效果。
2. 直接操作DOM不符合Vue理念：Vue是数据驱动框架，直接用document.getElementById修改DOM会绕开响应式系统，容易出现状态不一致。
3. 异步时序问题：setTimeout是异步执行的，如果你在updateDatabase方法里同步执行数据库逻辑并提前设置isLoading = false，进度条会在动画开始前就被隐藏。

解决方案：用响应式数据驱动进度条 + 异步时序控制 #

1. 修改模板，绑定响应式数据

去掉DOM操作的id，用Vue的动态样式绑定控制进度条宽度：

<div class="container-fluid p-0 vh-100" v-if="isLoading">
    <div class="row m-0">
        <div class="col-4 mx-auto">
            <div class="progress rounded-0" role="progressbar">
                <div 
                    class="progress-bar text-uppercase" 
                    :style="{ width: `${progressWidth}%` }"
                ></div>
            </div>
        </div>
    </div>
</div>

2. 添加响应式数据

在Vue组件的data选项中定义进度条状态：

data() {
    return {
        isLoading: false,
        progressWidth: 0
    }
}

3. 重构updateDatabase方法

用异步函数和Promise控制进度更新时序，同时结合数据库操作：

async updateDatabase() {
    this.isLoading = true;
    this.progressWidth = 0;

    // 分步更新进度的工具函数
    const incrementProgress = (step, delay = 300) => {
        return new Promise(resolve => {
            setTimeout(() => {
                this.progressWidth += step;
                resolve();
            }, delay);
        });
    };

    try {
        // 1. 逐步更新进度条（利用Bootstrap默认过渡动画）
        await incrementProgress(15);
        await incrementProgress(15);
        await incrementProgress(15);
        await incrementProgress(15);
        await incrementProgress(15);
        await incrementProgress(15);
        await incrementProgress(10); // 最后一步到100%

        // 2. 执行Supabase数据库更新逻辑（替换为你的实际代码）
        await this.$supabase.from('your_table')
            .update({ /* 更新字段 */ })
            .eq('id', /* 筛选条件 */);

        // 可选：让100%状态停留片刻，提升用户体验
        await new Promise(resolve => setTimeout(resolve, 500));
    } catch (error) {
        console.error('数据库更新失败:', error);
        // 出错时可以给进度条添加错误样式，比如bg-danger
        this.$el.querySelector('.progress-bar').classList.add('bg-danger');
        await new Promise(resolve => setTimeout(resolve, 1500));
    } finally {
        // 完成后隐藏进度条并重置状态
        this.isLoading = false;
        this.progressWidth = 0;
        this.$el.querySelector('.progress-bar')?.classList.remove('bg-danger');
    }
}

进阶优化：进度条与数据库操作并行

如果数据库操作耗时较长，可以让进度条动画和数据库操作同时进行，等两者都完成后再隐藏进度条：

async updateDatabase() {
    this.isLoading = true;
    this.progressWidth = 0;

    // 进度条动画任务
    const progressTask = async () => {
        const steps = [15,15,15,15,15,15,10];
        for (const step of steps) {
            await new Promise(resolve => setTimeout(() => {
                this.progressWidth += step;
                resolve();
            }, 300));
        }
    };

    // 数据库操作任务
    const dbTask = async () => {
        try {
            await this.$supabase.from('your_table')
                .update({ /* 更新字段 */ })
                .eq('id', /* 筛选条件 */);
        } catch (err) {
            console.error('数据库错误:', err);
        }
    };

    // 并行执行两个任务，等待全部完成
    await Promise.all([progressTask(), dbTask()]);

    // 停留100%状态后隐藏
    await new Promise(resolve => setTimeout(resolve, 500));
    this.isLoading = false;
    this.progressWidth = 0;
}

内容的提问来源于stack exchange，提问作者OHICT