银商小程序

UmsIndicator

属性

属性名 类型 默认值 说明
show Boolean true 控制显示indicator
hasOverlayer Boolean true 是否显示
overlayerOpacity Number, String 0.4 控制遮罩的透明度
overlayerHasAnimation Boolean true 遮罩出现是否有动画
spinnerType String snake 控制spinner的类型
text String indicator的内容
width String,Number 控制indicator的宽度
fontSize String,Number 36px 控制indicator的字体大小
fontColor String #FFF 控制indicator的字体颜色

调用示例

<template>
  <div>
    <ums-header title="UmsIndicator"></ums-header>
    <div class="content">
      <div class="button" @click="convert('snake')"> snake </div>
      <div class="button" @click="convert('fading-circle')">fading-circle</div>
      <div class="button" @click="convert('double-bounce')">double-bounce</div>
    </div>
    <ums-indicator :show="display" :spinnerType="spinnerType" :hasOverlayer='true' :overlayerOpacity="0.4">加载中...</ums-indicator>
  </div>
</template>

<script>
  import {UmsHeader, UmsIndicator, UmsButton} from 'ums-comp'
  export default {
    data() {
      return {
        spinnerType: 'snake',
        display: false
      }
    },
    components: {
      UmsHeader,
      UmsIndicator,
      UmsButton
    },
    watch: {
      display(newVal) {
        if (newVal){
          setTimeout(() => {
            this.display = false
          },3000)
        }
      }
    },
    methods: {
      convert(type) {
        this.spinnerType = type
        this.display = true
      }
    }
  }
</script>

<style scoped>
  .content {
    justify-content: center;
    align-items: center;
    padding-top: 120px
  }
  .button {
    margin-top: 20px;
    background-color: #0f89f5;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    width: 350px;
  }
</style>

效果展示

An image

← UmsNavbar →