vant防止重复提交-loading

最新推荐文章于 2025-05-09 16:37:24 发布

原创最新推荐文章于 2025-05-09 16:37:24 发布 · 1.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

收录于

vant 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了在Vant Vue组件库中如何有效地防止用户在提交表单时进行重复点击，确保数据的正确性和一致性。通过利用Vant的loading组件结合Promise，实现提交按钮的锁定，避免多次请求，提升用户体验。

-----
<van-button type="primary" block @click="commit" :loading="loading" 
loading-type="spinner" >提交审核</van-button>
---
 commit() {                     //提交数据
        this.loading=true    //显示加载转圈圈
        axios.post('https://simbajs.com:7002/subject/add',{
            section_id:1,
            title:this.title,
            answer:this.answer,
            section_name:this.type,
            desc:this.message

        })
        .then(res => {
            console.log(res)
            if (res.data.success) {        //数据加载成功 圈圈false
                this.loading=false
                this.title=''
                this.type=''
                this.answer=''
                this.message=''
            }

        })
        // setTimeout(() => {
        //     this.loading=false
        // }, 2000);
       
        },