DolphinHybrid
点我扫二维码，查看demo

# Loading 加载组件

# 介绍

加载图标，用于表示加载中的过渡状态。

# 引入

通过以下方式来按需注册组件。

import Vue from 'vue';
import { Loading } from '@dolphin-iot/ui'

Vue.use(Loading);
1
2
3
4

# 代码演示

# 基础用法

通过 type 属性可以设置加载图标的类型，默认为 circular，可选值为 spinner。

<template>
    <div>
        <mx-loading />
        <mx-loading type="spinner" />
    </div>
</template>
<style>
.mx-loading{
    display: inline-block;
    margin: 0px 5px 20px;
}
.mx-loading--vertical{
    display: inline-flex;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 主题颜色

通过 theme 属性设置加载图标的颜色。支持 brand loading-gray purple blue-purple blue cyan yellow orange orange-red gray-offline 十种主题颜色。默认为 loading-gray。

<template>
    <div>
        <mx-loading color="#25cf42" />
        <mx-loading type="spinner" color="#ff3b30" />
    </div>
</template>
<style>
.mx-loading{
    display: inline-block;
    margin: 0px 5px 20px;
}
.mx-loading--vertical{
    display: inline-flex;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 自定义颜色

通过 color 属性设置加载图标的颜色。

<template>
    <div>
        <mx-loading color="#25cf42" />
        <mx-loading type="spinner" color="#ff3b30" />
    </div>
</template>
<style>
.mx-loading{
    display: inline-block;
    margin: 0px 5px 20px;
}
.mx-loading--vertical{
    display: inline-flex;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 自定义大小

size 属性用来设置尺寸大小，默认单位为 px。

<template>
    <div>
        <mx-loading size="44" />
        <mx-loading type="spinner" size="44" />
    </div>
</template>
<style>
.mx-loading{
    display: inline-block;
    margin: 0px 5px 20px;
}
.mx-loading--vertical{
    display: inline-flex;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 加载文案

可以使用默认插槽在图标的右侧插入加载文案。

<template>
    <div>
        <mx-loading >加载中...</mx-loading>
        <mx-loading type="spinner" theme="brand">加载中...</mx-loading>
    </div>
</template>
<style>
.mx-loading{
    display: inline-block;
    margin: 0px 5px 20px;
}
.mx-loading--vertical{
    display: inline-flex;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 垂直排列

设置 vertical 属性后，图标和文案会垂直排列。

<template>
    <div>
        <mx-loading :vertical="true" >加载中...</mx-loading>
        <mx-loading :vertical="true" type="spinner" color="#ff3b30">加载中...</mx-loading>
    </div>
</template>
<style>
.mx-loading{
    display: inline-block;
    margin: 0px 5px 20px;
}
.mx-loading--vertical{
    display: inline-flex;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 自定义文本颜色

通过 color 或者 text-color 属性设置加载文案的颜色。text-color 优先级高于 color。

<template>
    <div>
        <mx-loading :vertical="true" color="#ff3b30">加载中...</mx-loading>
        <mx-loading :vertical="true" type="spinner" color="#ff3b30" text-color="#25cf42">加载中...</mx-loading>
    </div>
</template>
<style>
.mx-loading{
    display: inline-block;
    margin: 0px 5px 20px;
}
.mx-loading--vertical{
    display: inline-flex;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 自定义文本大小

通过 text-size 属性设置加载文案的大小。

<template>
    <div>
        <mx-loading :vertical="true" color="#ff3b30" text-size="16">加载中...</mx-loading>
        <mx-loading :vertical="true" type="spinner" color="#ff3b30" text-color="#25cf42" text-size="24">加载中...</mx-loading>
    </div>
</template>
<style>
.mx-loading{
    display: inline-block;
    margin: 0px 5px 20px;
}
.mx-loading--vertical{
    display: inline-flex;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Api

# Props

参数 说明 类型 默认值 是否必须
type 类型,可选值为 circular, spinner。默认为 circular string circular -
size 大小 number - -
theme 主题颜色，支持 brand loading-gray purple blue-purple blue cyan yellow orange orange-red gray-offline 十种主题颜色。默认为 loading-gray。 string loading-gray -
color 自定义颜色 string - -
textColor 加载文案颜色 string - -
textSize 加载文案文本大小 string - -
vertical 是否垂直显示 boolean false -

# Slots

名称 说明
default 自定义加载文案
更新时间: 12/3/2021, 1:36:49 PM

← Mask 弹出层 →