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

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);
    },