如何使用 vue-resource 在表单提交上添加预加载器和成功消息

Posted 2023-02-22

【中文标题】如何使用 vue-resource 在表单提交上添加预加载器和成功消息

【英文标题】：How to add preloader and success message on form submit using vue-resource

【发布时间】：2017-11-27 22:24:36

【问题描述】：

如何使用 vue-resource 完成以下任务：

在获取数据时包含预加载器文本 Loading... 或 gif 图像 来自服务器。 在表单提交时显示成功消息。

【参考方案1】：

这样做的一种方法是：

<template>

    <div>
        <div class="loader" v-if="loader"></div>
        <div>
            //display fetchedData using logic you wish like v-for.....
        </div>
        <form>
            //your form inputs
            <button @click.prevent="submit">Submit</button>
        </form>
    </div>    

</template>

<script>


    export default
        data()
            return
                loader: false,
                fetchedData: null
            
        ,
        mounted()
            this.loader = true;
                this.$httpget('your_url')
                    .then(response => 
                        this.fetchedData = response;
                        this.loader = false;
                    ,err => 
                    );
        ,
        methods:

            submit()
                this.loader = true;
                this.$http.post('your_url', your_body)
                    .then(response => 
                        this.loader = false;
                    ,err => 
                        alert('form not submitted');
                    );
            
        ,

    
</script>

<style scoped>
    loader 
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%, -50%);
        border: 10px solid #f3f3f3; /* Light grey */
        border-top: 16px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 75px;
        height: 75px;
        animation: spin 2s linear infinite;
    

    @keyframes spin 
        0%  transform: rotate(0deg); 
        100%  transform: rotate(360deg); 
    
</style> 

这是工作的fiddle

【讨论】：

在您的帮助下，我也添加了我的答案 :) 感谢您的帮助。

【参考方案2】：

在@Vamsi 的帮助下，我对此提出了质疑，这是我的解决方案：

组件

<loading-indicator v-if="loadingGroup" :bgAlpha="'.6'"></loading-indicator>

<script>
  import LoadingIndicator from '../partials/LoadingIndicator'

  export default 
    data () 
      return 
        loadingGroup: true,
      
    ,

    components: LoadingIndicator,

    methods:       
      fetchGroup() 
        let _this = this;
        this.loadingGroup = true;

        api._get(url: 'api/group/' + _this.$route.params.id)
          .then(function (response) 
            _this.groupData = response.data;
            _this.loadingGroup = false;
          );
      
    ,

    mounted() 
      this.fetchGroup();
    
  
</script>

我的模板位于：../partials/LoadingIndicator.vue

<template>
  <div class="pin pin-xy d-flex"
       :style=" backgroundColor: 'rgba(255, 255 ,255,' + bgAlpha + ')'">
    <div class="loading-indicator">
      <div class="loading-indicator-circle"></div>
    </div>
  </div>
</template>

<script>
  export default 
    props: 
      bgAlpha: String
    
  
</script>

<style lang="scss">
  .pin 
    position: absolute;

    &-xy 
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    
  

  .d-flex 
    display: flex;
  

  .loading-indicator 
    width: 32px;
    height: 32px;
    margin: auto;
    overflow: hidden;
    animation: animation-fadeIn 1s ease-in;
  

  .loading-indicator-circle 
    animation: loading-indicator-rotation 0.67s linear infinite;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMiAzMic+PGxpbmVhckdyYWRpZW50IGlkPSdGYXN0TG9hZGluZ0luZGljYXRvci1saW5lYXJHcmFkaWVudCcgZ3JhZGllbnRVbml0cz0ndXNlclNwYWNlT25Vc2UnIHgxPScxLjc4MDQnIHkxPScxNi4wMzc5JyB4Mj0nMzAuMTQzOScgeTI9JzE2LjAzNzknPjxzdG9wIG9mZnNldD0nMC40MTY5JyBzdG9wLWNvbG9yPScjQ0RDRkQyJy8+PHN0b3Agb2Zmc2V0PScwLjkzNzYnIHN0b3AtY29sb3I9J3JnYmEoMjQ4LDI0OCwyNDksMCknLz48L2xpbmVhckdyYWRpZW50PjxjaXJjbGUgY3g9JzE2JyBjeT0nMTYnIHI9JzEyLjcnIHN0eWxlPSdmaWxsOiBub25lOyBzdHJva2U6IHVybCgjRmFzdExvYWRpbmdJbmRpY2F0b3ItbGluZWFyR3JhZGllbnQpOyBzdHJva2Utd2lkdGg6IDI7Jz48L2NpcmNsZT48L3N2Zz4=");
    height: 100%;
    width: 100%
  

  @keyframes loading-indicator-rotation 
    from 
      transform: rotate(0deg)
    
    to 
      transform: rotate(360deg)
    
  
</style>