contract-front/uni_modules/lime-loading

lime-loading 加载中

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

安装

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

代码演示

基础

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

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

横向文字

通过text或插槽设置加载文本,uvue建议使用text

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

竖向文字

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

尺寸

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

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

颜色

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

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

查看示例

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

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

插件标签

• 默认 l-loading 为 component
• 默认 lime-loading 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可.

// 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	-