weex-ui的wxc-loading組件擴展，支持自定義gif、尺寸等

weex-ui官網的wxc-loading加載提示組件，可能因爲時間緊急吧，一些擴展性做的不夠好，看了代碼就清楚了比如這裏把一些東西寫死了：

當我們直接引入weex-ui並想使用wxc-loading組件時這些寫死的地方往往會限制我們的使用，比如只能用它提供的gif圖，如果產品經理要我們換圖就歇菜了。這些也只有自己用到它的時候纔會體會到吧...所以我在wxc-loading的基礎上稍微擴展了一下，讓gif圖、遮罩層的尺寸、背景顏色、提示文字的顏色能夠自定義傳入，實現擴展。
把weex-ui的wxc-loading組件單獨拎出來，做成一個vue文件，命名爲wxc-loadingsp.vue，整個wxc-loadingsp.vue代碼如下（簡書好像不能傳文件，這裏直接貼完整組件代碼，有需要的小夥伴直接拷貝就好）：

<!-- Created by shayneChen on 2018/08/09. -->
<!--全局加載提示組件. -->
<template>
  <div :class="[showLoading && needMask && 'loading-need-mask']"
       @click="maskClicked"
       :style="maskStyle">
    <div class="wxc-loading" :style="[centerPosition]" v-if="showLoading">
      <div :class="['loading-box',mBackgroundcolor?'':'transparent']" :style="[conStyle]" :aria-hidden="true">
        <image :src="loading.url"
               :style="{width:mImgwidth,height:mImgheight}"
               resize="contain"
               quality="original"></image>
        <text v-if="loadingText" :style="{color:mTextcolor}" class="loading-text">{{loadingText}}</text>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .loading-need-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .wxc-loading {
    position: fixed;
    z-index: 9999;
  }
  .loading-box {
    align-items: center;
    justify-content: center;
    border-radius: 20px;
  }
  .transparent {
    background-color: rgba(0, 0, 0, .2); 
  }
  .loading-trip-image {
    height: 166px;
    width: 199px;
  }
  .loading-text {
    font-size: 30px;
    line-height: 46px;
    height: 46px;
    margin-top: 8px;
    text-overflow: ellipsis;
    padding-left: 12px;
    padding-right:12px;    
    margin-bottom: 8px;
    text-align: center;
  }
</style>

<script>

  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
      loadingText: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: 'default'
      },
      interval: {
        type: [Number, String],
        default: 0
      },
      needMask: {
        type: Boolean,
        default: false
      },
      maskStyle: {
        type: Object,
        default: () => ({})
      },
      mHeight: {
        type: String,
        default: '175'
      },
      mWidth: {
        type: String,
        default: '175'
      },
      mBackgroundcolor: {
        type:String,
        default: ''
      },
      mUrl: {
        type:String
      },
      mTextcolor: {
        type:String,
        default:'#ffffff'
      },
      mImgwidth: {
        type:String,
        default:'200'
      },
      mImgheight:{
        type:String,
        default:'200'
      },
      mTop: {
        type:String,
        default:''
      }
    },
    data: () => ({
      showLoading: false,
      tid: 0
    }),
    watch: {
      show () {
        this.setShow();
      }
    },
    computed: {
      //整個容器的尺寸和背景樣式
      conStyle() {
        let style = {};
        style["width"] = `${this.mWidth}px`;
        style["height"] = `${this.mHeight}px`;
        if(this.mBackgroundcolor) {
          style["backgroundColor"] = this.mBackgroundcolor
        }
        return style;
      },
      //根據自定義的高寬來居中定位
      centerPosition() {
        let style = {};
        style["top"] = `${this.mTop ? this.mTop : this.topPosition}px`;
        style["left"] = `${(750-this.mWidth)/2}px`;
        return style;
      },
      topPosition () {
        return (this.getPageHeight() - this.mHeight) / 2;
      },
      loading () {
        let loading = {};
        switch (this.type) {
          case 'custom':
            loading = {
              url: this.mUrl
            };
            break;
          //不指定type爲cunstom則用官網默認gif圖
          default:
            loading = {
              url: 'https://img.alicdn.com/tfs/TB1Ep_9NVXXXXb8XVXXXXXXXXXX-74-74.gif'
            }
        }
        return loading;
      },
    },
    created () {
      this.setShow();
    },
    methods: {
     /**
     * 獲取weex屏幕真實的設置高度，需要減去導航欄高度
     * @returns {Number}
     */
      getPageHeight () {
        const { env } = weex.config;
        // const navHeight = Utils.env.isWeb() ? 0 : (Utils.env.isIPhoneX() ? 176 : 132);
        return env.deviceHeight / env.deviceWidth * 750 - 132;
      },
      maskClicked () {
        this.needMask && (this.$emit('wxcLoadingMaskClicked', {}));
      },
      setShow () {
        const { interval, show, showLoading } = this;
        const stInterval = parseInt(interval);
        clearTimeout(this.tid);
        if (show) {
          if (showLoading) {
            return;
          }
          if (stInterval === 0) {
            this.showLoading = true;
          } else {
            this.tid = setTimeout(() => {
              this.showLoading = true;
            }, stInterval);
          }
        } else {
          this.showLoading = false;
        }
      }
    }
  };
</script>

放到文件夾後，import後這麼使用

<!--此處m-打頭的是我們自定義的特性-->
    <wxc-loadingsp 
      :show="showPrintLoading" 
      type="custom" 
      need-mask="true" 
      loading-text="名片打印中..." 
      m-url="./image/print.gif"     
      m-width="380" 
      m-height="380" 
      m-backgroundcolor="#ffffff" 
      m-textcolor="#313131"
      >
    </wxc-loadingsp>   
<!--此處省略-->
 import WxcLoadingsp from './components/wxc-loadingsp.vue';
<!--此處省略-->
  components: {
    WxcLoadingsp
  },
<!--此處省略-->