src/popup/components/spin/spin.vue

   1 <style>
   2 .ivu-spin-fullscreen-wrapper {
   3   position: fixed;
   4   top: 0;
   5   right: 0;
   6   bottom: 0;
   7   left: 0;
   8   background-color: rgba(255, 255, 255, 0.7);
   9 }
  10 </style>
  11
  12 <template>
  13     <transition name="fade">
  14         <div :class="classes" v-if="fullscreenVisible">
  15             <div :class="mainClasses">
  16                 <span :class="dotClasses"></span>
  17                 <div :class="textClasses"><slot></slot></div>
  18             </div>
  19         </div>
  20     </transition>
  21 </template>
  22 <script>
  23 // import { oneOf } from '../../utils/assist';
  24 // import ScrollbarMixins from '../modal/mixins-scrollbar';
  25 const prefixCls = "ivu-spin";
  26 export default {
  27   name: "Spin",
  28   // mixins: [ ScrollbarMixins ],
  29   props: {
  30     size: {
  31       //     validator (value) {
  32       //         return oneOf(value, ['small', 'large', 'default']);
  33       //     },
  34       default() {
  35         return !this.$IVIEW || this.$IVIEW.size === ""
  36           ? "default"
  37           : this.$IVIEW.size;
  38       }
  39     },
  40     fix: {
  41       type: Boolean,
  42       default: false
  43     },
  44     fullscreen: {
  45       type: Boolean,
  46       default: false
  47     }
  48   },
  49   data() {
  50     return {
  51       showText: false,
  52       // used for $Spin
  53       visible: false
  54     };
  55   },
  56   computed: {
  57     classes() {
  58       return [
  59         `${prefixCls}`,
  60         {
  61           [`${prefixCls}-${this.size}`]: !!this.size,
  62           [`${prefixCls}-fix`]: this.fix,
  63           [`${prefixCls}-show-text`]: this.showText,
  64           [`${prefixCls}-fullscreen`]: this.fullscreen
  65         }
  66       ];
  67     },
  68     mainClasses() {
  69       return `${prefixCls}-main`;
  70     },
  71     dotClasses() {
  72       return `${prefixCls}-dot`;
  73     },
  74     textClasses() {
  75       return `${prefixCls}-text`;
  76     },
  77     fullscreenVisible() {
  78       if (this.fullscreen) {
  79         return this.visible;
  80       } else {
  81         return true;
  82       }
  83     }
  84   },
  85   watch: {
  86     visible(val) {
  87       // if (val) {
  88       //     this.addScrollEffect();
  89       // } else {
  90       //     this.removeScrollEffect();
  91       // }
  92     }
  93   },
  94   mounted() {
  95     this.showText = this.$slots.default !== undefined;
  96   }
  97 };
  98 </script>