TnLoading-加载图标
此组件是一个加载动画的图标
组件位置
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
设置加载图标的模式,默认为circle
4/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 | - | - |