vue中使用组件按钮与原始button点击后显示加载中，防止重复提交

最新推荐文章于 2023-05-29 23:11:59 发布

冷太阳a

最新推荐文章于 2023-05-29 23:11:59 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 项目总结 Vue

本文链接：https://blog.csdn.net/A_9888/article/details/115388390

版权

项目总结同时被 3 个专栏收录

51 篇文章 0 订阅

订阅专栏

Vue

45 篇文章 2 订阅

订阅专栏

JavaScript

28 篇文章 0 订阅

订阅专栏

HTML

  <div id="test">
    <textarea placeholder="请填写你的答案" v-model.trim="answer"></textarea>
    <!-- element button -->
    <el-button
      class="login-btn"
      type="primary"
      @click="submitForm"
      :loading="loadingBtn"
      >{{ loadingButText }}</el-button
    >
     <!-- 原生button -->
    <button class="btn" :disabled="btnF" @click="click">
      {{ loadingButText }}
    </button>
     <!-- vant ui button -->
     <van-button
      :loading="isLoading"
      type="info"
      loading-text="登录中..."
      @click="btn"
      >登录</van-button
    >
  </div>

data数据变量

 	  answer: "",
      btnF: false,
      loadingBtn: false, //提交加载中
      loadingButText: "登录",
      isLoading: false

js

 submitForm() {
      console.log(this.answer);
      this.loadingButText = "提交中...";
      this.loadingBtn = true;
      setTimeout(() => {
        this.loadingButText = "登录";
        this.loadingBtn = false;
      }, 3000);
    },
    click() {
      console.log(this.answer);
      this.btnF = true;
      this.loadingButText = "登录中...";
      setTimeout(() => {
        this.loadingButText = "登录";
        this.btnF = false;
      }, 3000);
    },
  btn() {
      this.isLoading = true;
      console.log(1111);
      setTimeout(() => {
        this.isLoading = false;
      }, 3000);
    },