多彩宝移动端 UI 组件库

# Loading

# 基础用法

<template>
<div class="demo-spinner">
  <d-loading></d-loading>
  <d-loading type="spinner"></d-loading>
</div>
</template>

<script>
  export default {
    methods: {},
  };
</script>
<style lang="scss">
  .demo-spinner {
    .d-loading {
      margin-left: 10px;
    }
  }
</style>

# 自定义颜色

<template>
  <div class="demo-spinner">
    <d-loading :style="{ color: '#FF980E' }"></d-loading>
    <d-loading type="spinner" class="custom-loading"></d-loading>
  </div>
</template>

<style lang="scss" scoped>
  .demo-spinner {
    display: flex;

    .custom-loading {
      color: #ff980e;
    }
  }
</style>

# 自定义大小

<template>
  <div class="demo-spinner">
    <d-loading class="custom-loading"></d-loading>
    <d-loading type="spinner" class="custom-loading"></d-loading>
  </div>
</template>

<style lang="scss" scoped>
  .demo-spinner {
    .custom-loading {
      font-size: 24px;
    }
  }
</style>

# 加载文案

<template>
  <div class="demo-spinner">
    <d-loading>加载中...</d-loading>
  </div>
</template>

<script>
  export default {
    methods: {},
  };
</script>
<style lang="scss">
  .demo-spinner {
    display: flex;
    .d-loading {
      margin-left: 10px;
    }
  }
</style>

# 垂直排列

<template>
  <div class="demo-spinner">
    <d-loading vertical>加载中...</d-loading>
  </div>
</template>

<script>
  export default {
    methods: {},
  };
</script>
<style lang="scss">
  .demo-spinner {
    display: flex;
    .d-loading {
      margin-left: 10px;
    }
  }
</style>

# 自定义文本颜色

<template>
  <div class="demo-spinner">
    <d-loading vertical class="custom-loading">加载中...</d-loading>
    <d-loading type="spinner" vertical class="custom-loading">加载中...</d-loading>
  </div>
</template>

<style lang="scss" scoped>
  .demo-spinner {
    display: flex;

    .custom-loading {
      ::v-deep {
        .d-loading-text {
          color: #ff980e;
        }
      }
    }
  }
</style>

# # API

# # 属性

名称 说明 类型 默认值
type
加载的图标类型 circular | spinner circular
vertical
是否垂直排列图标和文字内容 boolean false

# # 插槽

名称 说明 参数
default 默认插槽，自定义文案 无

# # 事件

无

# # 贡献者

无

← AddressList 地址列表 →