<template>  
    <div class="refresh-status">  
      <div v-if="status === 'loosing'" class="refresh-txt">  
        <svg-icon className="icon" iconName="some-loosing-icon" :class="{ 'is-spinning': loading }"></svg-icon>  
        <span>释放即可刷新</span>  
      </div>  
      <div v-else-if="status === 'loading'" class="refresh-txt">  
        <svg-icon className="icon" iconName="loading" :class="{ 'is-spinning': loading }"></svg-icon>  
        <span>加载中……</span>  
      </div>  
      <div v-else-if="status === 'success'" class="refresh-txt">  
        <svg-icon className="icon" iconName="success-icon" :class="{ 'is-spinning': false }"></svg-icon>  
        <span>刷新成功</span>  
      </div>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    name: 'RefreshStatus',  
    props: {  
      status: {  
        type: String,  
        required: true,  
        validator: function (value) {  
          return ['loosing', 'loading', 'success'].includes(value);  
        }  
      },  
      loading: {  
        type: Boolean,  
        default: false  
      }  
    }  
  };  
  </script>  
    
  <style lang="scss" scoped>  
  /* 样式 */  
  .refresh-status {  
    display: none;
  }  

  .refresh-txt{
   display: flex;
   align-items: center;
   .icon{margin-right: 5px;width:18px;}
   .is-spinning { animation: spin 2s linear infinite;} 
} 
  </style>