按钮元素加加载

Question

当用户使用元素加号单击按钮时，我需要在按钮上放置一个延迟（加载）

<el-button type="primary" :loading="delay_search_button" icon="el-icon-search" size="small" style="width: 14.5vh" @click="searchButton"></el-button>

methods: {
    searchButton ()  {
        this.delay_search_button = true;
        setTimeout(() => {
          this.delay_search_button = false;
          console.log(this.delay_search_button)
        }, 2000);
      },
      
  },

但是这段代码不起作用，我做错了什么？

Answer 1

您的代码运行完美。我看不出有什么问题。

var Main = {
    data() {
      return {
            delay_search_button: false
      }
    },
    methods: {
        searchButton ()  {
            this.delay_search_button = true;
            setTimeout(() => {
              this.delay_search_button = false;
              console.log(this.delay_search_button)
            }, 2000);
        }          
    }
};
const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app")

<html>
<head>
<link rel="stylesheet" href="//unpkg.com/element-plus/theme-chalk/index.css">
</head>
<body>
<script src="//unpkg.com/vue@next"></script>
<script src="//unpkg.com/element-plus/dist/index.full.js"></script>
<div id="app">
<div> 
</div>
<el-button type="primary" :loading="delay_search_button" icon="el-icon-search" size="small" @click="searchButton"></el-button>
</div>
</body>
</html>

按钮元素加加载

button element plus loading

vue.js

element-plus