加载微调器 VueJS

Question

当客户端单击按钮搜索以弹出微调器动画时，我必须制作加载动画，以使客户端无法多次单击搜索按钮。但是，我不知道如何调用此动画。到目前为止，我已经做到了：

table.vue:

<div id="overlay-back"></div>
<div id="overlay">
  <div id="dvLoading">
     <img id="loading-image" src="../assets/images/spinner.gif" alt="Loading..."/>
  </div>
</div>

      loadData(filter) {
        var self = this;
        const url = this.$session.get('apiUrl') + 'loadSystemList'
        this.submit('post', url, filter);
      }

main.css：

#overlay {
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 100%;
  z-index  : 995;
  display  : none;
}

#overlay-back {
  position   : absolute;
  top        : 0;
  left       : 0;
  width      : 100%;
  height     : 100%;
  background : #000;
  opacity    : 0.6;
  filter     : alpha(opacity=60);
  z-index    : 990;
  display    : none;
}

#dvLoading {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  height: 150px;
  width: 250px;
  position: fixed;
  z-index: 1000;
  left: 50%;
  top: 50%;
  margin: -125px 0 0 -125px;
  text-align: center;
  display: none;
}

我需要在单击按钮 Search 并调用函数 loadData 时调用动画。如果你能帮助我，我会很高兴:) 我有点迷路了

更新1：

file.vue:

    <template>
      <div>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
        <div id="dvLoading">
          <i class="fa fa-spinner fa-spin fa-10x"></i>
        </div>
        <div class="toolbarStrip">
          <br><h1 style="text-align: center; padding-bottom: 10px;">System table</h1>
          <fieldset class="buttons">
            <span class="logInBTN" v-on:click="loadData(filter)" id="loadData">Search</span>
          </fieldset>
        </div>
      </div>
    </template>

    <script type="text/javascript">
      import config from '../main.js'

      var loadButton = document.getElementById("loadData");

      export default {

        data(){
          return {

        },

        methods: {

          stopShowingLoading(){

            var element = document.getElementById("dvLoading");
            element.classList.remove("showloading");
            var button = document.getElementById("loadData");
            button.classList.remove("showloading");

          },

          loadData(filter) {
            var element = document.getElementById("dvLoading");
            element.classList.add("showloading");
            var button = document.getElementById("loadData");
            button.classList.add("showloading");

            var self = this;
            const url = this.$session.get('apiUrl') + 'loadSystemList'
            this.submit('post', url, filter);

            window.setTimeout(function(){stopShowingLoading();},3000);
          },

          submit(requestType, url, submitData) {
            this.$http[requestType](url, submitData)
              .then(response => {
              this.items = response.data;
          })
          .catch(error => {
              console.log('error:' + error);
          });
          },

          newData: function(){
            config.router.push('/systemData')
          }
        }
      }
</script>

Answer 1

首先，虽然我过去用 vue.js 做过一些事情，但我已经忘记了很多，所以在该框架内可能有比这更好的方法，这是vanilla JS 方法真的...

您似乎不需要停止显示加载动画。当我过去做这种事情时，我通常使用回调来知道加载操作何时完成，然后“关闭”加载动画。我已经包含了一个隐藏加载的函数，但不知道在哪里/如果你想调用它。

这是未经测试的，所以对于拼写错误或其他小错误深表歉意......

css:

/* 
Override the  display:none on the #dvloading element if it has a class
of 'showloading 
*/
#dvLoading.showloading{
    display:block 
}

JS：

function loadData(filter) {

    /*
      Add the 'showloading' class to the #dvLoading element.
      this should make it appear due to the css change...
    */
    var element = document.getElementById("dvLoading");
    element.classList.add("showloading");

    var self = this;
    const url = this.$session.get('apiUrl') + 'loadSystemList'
    this.submit('post', url, filter);
}

function stopShowingLoading(){
    /* 
       When loading finishes, reverse the process
    */
    var element = document.getElementById("dvLoading");
    element.classList.remove("showloading");
}

编辑：jsFiddle 以显示一般方法

进一步编辑：要仅在数据加载后停止显示动画（我只是在我的示例中使用超时来模拟这一点），那么您需要在数据加载后简单地停止它，这将是这样的：

submit(requestType, url, submitData) {
   this.$http[requestType](url, submitData)
   .then(response => {
      // We've received the data now, so set items and
      //also hide the loading animation.
      this.items = response.data;
      this.stopShowingLoading(); 
  })
...

然后完全删除 window.setTimeout() 调用。