ActivityIndicator 活动指示器

活动指示器，一般用于正在进行中的任务示意

引入

import { ActivityIndicator } from 'mand-mobile'
Vue.component(ActivityIndicator.name, ActivityIndicator)

代码演示

Roller

        <template>
  <div class="md-example-child md-example-child-md-activity-indicator md-example-child-md-activity-indicator-0">
    <md-activity-indicator
      :size="20"
      :text-size="16"
    >加载中...</md-activity-indicator>
    <md-activity-indicator
      :size="20"
      :text-size="16"
      vertical
    >vertical loading</md-activity-indicator>
    <md-activity-indicator
      class="md-activity-indicator-css"
    >loading...</md-activity-indicator>
    </div>
</template>
<script>
import {ActivityIndicator} from 'mand-mobile'
export default {
  name: 'activity-indicator-demo',
  title: 'Roller',
  components: {
    [ActivityIndicator.name]: ActivityIndicator,
  },
}
</script>
<style lang="stylus">
.md-example-child-md-activity-indicator-0
  display flex
  flex-direction column
  align-items center
  .md-activity-indicator
    margin-bottom 30px
    &.md-activity-indicator-css
      .md-activity-indicator-svg
        width 60px !important
        height 60px !important
      .md-activity-indicator-text
        font-size 32px
</style>
      

Carousel

        <template>
  <div class="md-example-child md-example-child-md-activity-indicator md-example-child-md-activity-indicator-2">
    <md-activity-indicator
      type="carousel"
      :size="15"
    ></md-activity-indicator>
    <md-button type="primary" @click="createPay">
      <md-activity-indicator
        v-if="loading"
        class="md-activity-indicator-css"
        type="carousel"
        :size="15"
        color="#fff"
        text-color="#fff"
      ></md-activity-indicator>
      <span v-else>确认支付</span>
    </md-button>
    </div>
</template>

<script>
import {ActivityIndicator, Button} from 'mand-mobile'

export default {
  name: 'activity-indicator-demo',
  title: 'Carousel',
  components: {
    [ActivityIndicator.name]: ActivityIndicator,
    [Button.name]: Button,
  },
  data() {
    return {
      loading: false,
    }
  },
  methods: {
    createPay() {
      if (this.loading) {
        return
      }
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 2000)
    },
  },
}

</script>

<style lang="stylus">
.md-example-child-md-activity-indicator-2
  display flex
  flex-direction column
  align-items center
  .md-activity-indicator
    margin-bottom 30px
  .md-button
    width 100%
    .md-activity-indicator-css
      margin-bottom 0
      .md-activity-indicator-svg
        height 15px !important
</style>
      

Spinner

        <template>
  <div class="md-example-child md-example-child-md-activity-indicator md-example-child-md-activity-indicator-1">
    <md-activity-indicator
      type="spinner"
      :size="30"
      :text-size="20"
    >加载中...</md-activity-indicator>
    <div class="activity-indicator-container">
      <md-activity-indicator
        class="md-activity-indicator-css"
        type="spinner"
        :size="30"
        :text-size="20"
        color="light"
      >加载中...</md-activity-indicator>
    </div>
    </div>
</template>

<script>
import {ActivityIndicator} from 'mand-mobile'

export default {
  name: 'activity-indicator-demo',
  title: 'Spinner',
  components: {
    [ActivityIndicator.name]: ActivityIndicator,
  },
}

</script>

<style lang="stylus">
.md-example-child-md-activity-indicator-1
  display flex
  flex-direction column
  align-items center
  .md-activity-indicator
    margin-bottom 30px
  .activity-indicator-container
    margin-bottom 30px
    padding 15px 20px
    background rgba(0, 0, 0, .7)
    border-radius 4px
    .md-activity-indicator-css
      margin-bottom 0
      .md-activity-indicator-svg
        width 40px !important
        height 40px !important
      .md-activity-indicator-text
        font-size 28px !important
</style>
      

API

ActivityIndicator Props