# lime-loading 加载中
- 用于表示页面或操作的加载状态，给予用户反馈的同时减缓等待的焦虑感，由一个或一组反馈动效组成。



## 安装
在插件市场导入即可，首次导入可以需要重新编译

## 代码演示
### 基础
通过 `type` 属性可以设置加载图标的类型，默认为 `circular`，可选值为 `spinner`。nvue只有`circular`，因为其使用的是原生组件。

```vue
<l-loading />
<l-loading type="spinner"/>
```

### 横向文字
通过`text`或`插槽`设置加载文本,uvue建议使用`text`

```vue
<l-loading>加载中…</l-loading>
<l-loading text="加载中…"></l-loading>
```

### 竖向文字

```vue
<l-loading :vertical="true">加载中…</l-loading>
```

### 尺寸
通过 `size` 属性设置加载图标的大小，默认单位为 `px`, uvue必须带单位。

```vue
<l-loading size="40rpx"></l-loading>
<l-loading size="60rpx"></l-loading>
```

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

```vue
<l-loading color="red" ></l-loading>
```

### 查看示例
- 导入后直接使用这个标签查看演示效果

```html
<!-- // 代码位于 uni_modules/lime-loading/compoents/lime-loading -->
<lime-loading />
```





### 插件标签
- 默认 l-loading 为 component
- 默认 lime-loading 为 demo


### 关于vue2的使用方式
- 插件使用了`composition-api`, 如果你希望在vue2中使用请按官方的教程[vue-composition-api](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)配置
- 关键代码是: 在main.js中 在vue2部分加上这一段即可.
```js
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```

## API

### Props

| 参数       | 说明                          | 类型               | 默认值     |
| ---------- | ----------------------------- | ------------------ | ---------- |
| color      | 颜色                          | _string_           | ``  |
| type       | 类型，可选值为 `spinner`      | _string_           | `circular` |
| size       | 加载图标大小，默认单位为 `px`,uvue只支持string | _number \| string_ | `40rpx`     |
| text       | 加载文本 |  _string_ | `-`     |
| textColor       | 文本颜色 |  _string_ | `-`     |
| textSize       | 文本大小 `px`,uvue只支持string | _number \| string_ | `-`     |
| vertical   | 是否垂直排列图标和文字内容    | _boolean_          | `false`    |

### Slots

| 名称    | 说明           |
| ------- | -------------- |
| default | 加载文案       |



## 主题定制

### 样式变量

组件提供了下列 CSS 变量，可用于自定义样式。uvue和nvue不支持！

| 名称                           | 默认值                    | 描述 |
| ------------------------------ | ------------------------- | ---- |
| --l-loading-color       | _#1677ff_ | -    |
| --l-loading-text-color       | _rgba(0,0,0,0.45)_ | -    |
| --l-loading-font-size   | _28rpx_ | -    |
| --l-loading-duration | _2s_                    | -    |