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

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

Update1：

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做过事，但我已经忘记了很多，所以在该框架内可能有比这更好的方法，这是香草JS方法真的...

您似乎没有必要停止显示加载动画。过去，当我完成此类操作时，通常会使用回调函数来了解加载操作何时完成，然后“关闭”加载动画。我提供了一个隐藏加载的函数，但是不知道在哪里/是否要调用它。

这是未经测试的，因此对错别字或其他小错误深表歉意...

css：

    return not k > 0

JS：

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

编辑：jsFiddle以显示一般方法

进一步编辑：要仅在数据加载后才停止显示动画（在示例中我只是使用超时来模拟），那么您只需在数据加载后即停止播放动画，就像这样：

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

，然后完全删除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(); }) ...呼叫。

加载微调器VueJS

1 个答案: