Tuniao UI Uniapp V3TnLoading-加载图标
此组件是一个加载动画的图标
组件位置
typescript
import TnLoading from '@tuniao/tnui-vue3-uniapp/components/loading/src/loading.vue'import TnLoading from '@tuniao/tnui-vue3-uniapp/components/loading/src/loading.vue'typescript
import TnLoading from '@/uni_modules/tuniaoui-vue3/components/loading/src/loading.vue'import TnLoading from '@/uni_modules/tuniaoui-vue3/components/loading/src/loading.vue'平台差异说明
| App(vue) | H5 | 微信小程序 | 支付宝小程序 | ... |
|---|---|---|---|---|
| √ | √ | √ | √ | 适配中 |
基础使用
mode设置加载图标的模式，默认为circle4/1 圆环，可选值flower花朵加载、semicircle带第 4/1 圆环type值可选的有primary、success、warning、danger、info，默认为primary，即默认加载图标颜色color可以设置加载图标的颜色，不可以使用内置的渐变颜色size参数来修改加载图标的大小，可选值为sm、lg、xl，也可以传递指定的大小尺寸，默认单位为 rpx，接受传入带单位的参数
vue
<TnLoading show type="primary" />
<TnLoading show type="success" />
<TnLoading show type="warning" />
<TnLoading show type="danger" />
<TnLoading show type="info" /><TnLoading show type="primary" />
<TnLoading show type="success" />
<TnLoading show type="warning" />
<TnLoading show type="danger" />
<TnLoading show type="info" />vue
<TnLoading show mode="circle" />
<TnLoading show mode="flower" />
<TnLoading show mode="semicircle" /><TnLoading show mode="circle" />
<TnLoading show mode="flower" />
<TnLoading show mode="semicircle" />vue
<TnLoading show color="tn-blue" />
<TnLoading show color="#01beff" />
<TnLoading show color="rgb(1, 190, 255)" /><TnLoading show color="tn-blue" />
<TnLoading show color="#01beff" />
<TnLoading show color="rgb(1, 190, 255)" />vue
<TnLoading show size="sm" />
<TnLoading show size="30" />
<TnLoading show size="40px" /><TnLoading show size="sm" />
<TnLoading show size="30" />
<TnLoading show size="40px" />控制加载图标的显示与动画
- 通过
show参数控制加载图标的显示与隐藏 - 通过
animation参数控制加载图标的动画
vue
<TnLoading show animation /><TnLoading show animation />控制加载图标动画的时间和执行函数
- 通过
duration参数控制加载图标动画的时间 - 通过
time-function参数控制加载图标动画的执行函数
这两个参数仅在mode为circle和semicircle时有效
vue
<TnLoading show animation duration="3" time-function="ease-in-out" /><TnLoading show animation duration="3" time-function="ease-in-out" />API
Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| show | 是否显示加载图标 | Boolean | false | true |
| animation | 是否显示加载图标动画 | Boolean | false | true |
| mode | 加载图标的模式 | String | circle | circle、flower、semicircle |
| type | 加载图标的颜色为主题色 | String | primary | primary、success、warning、danger、info |
| color | 加载图标的颜色，可以使用图鸟内置（不包含渐变色）的背景色、hex、rgb、rgba | String | - | - |
| size | 加载图标的大小，可选值为sm、lg、xl，也可以传递指定的大小尺寸，默认单位为 rpx，接受传入带单位的参数 | String | Number | - | - |
| duration | 加载图标动画的时间，单位为秒，仅在mode为circle和semicircle时有效 | String | Number | - | - |
| time-function | 加载图标动画的执行函数，仅在mode为circle和semicircle时有效 | String | - | - |