合同小程序前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

106 lines
3.0 KiB

3 months ago
  1. # lime-loading 加载中
  2. - 用于表示页面或操作的加载状态,给予用户反馈的同时减缓等待的焦虑感,由一个或一组反馈动效组成。
  3. ## 安装
  4. 在插件市场导入即可,首次导入可以需要重新编译
  5. ## 代码演示
  6. ### 基础
  7. 通过 `type` 属性可以设置加载图标的类型,默认为 `circular`,可选值为 `spinner`。nvue只有`circular`,因为其使用的是原生组件。
  8. ```vue
  9. <l-loading />
  10. <l-loading type="spinner"/>
  11. ```
  12. ### 横向文字
  13. 通过`text`或`插槽`设置加载文本,uvue建议使用`text`
  14. ```vue
  15. <l-loading>加载中…</l-loading>
  16. <l-loading text="加载中…"></l-loading>
  17. ```
  18. ### 竖向文字
  19. ```vue
  20. <l-loading :vertical="true">加载中…</l-loading>
  21. ```
  22. ### 尺寸
  23. 通过 `size` 属性设置加载图标的大小,默认单位为 `px`, uvue必须带单位。
  24. ```vue
  25. <l-loading size="40rpx"></l-loading>
  26. <l-loading size="60rpx"></l-loading>
  27. ```
  28. ### 颜色
  29. 通过 `color` 属性设置加载图标的颜色。
  30. ```vue
  31. <l-loading color="red" ></l-loading>
  32. ```
  33. ### 查看示例
  34. - 导入后直接使用这个标签查看演示效果
  35. ```html
  36. <!-- // 代码位于 uni_modules/lime-loading/compoents/lime-loading -->
  37. <lime-loading />
  38. ```
  39. ### 插件标签
  40. - 默认 l-loading 为 component
  41. - 默认 lime-loading 为 demo
  42. ### 关于vue2的使用方式
  43. - 插件使用了`composition-api`, 如果你希望在vue2中使用请按官方的教程[vue-composition-api](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)配置
  44. - 关键代码是: 在main.js中 在vue2部分加上这一段即可.
  45. ```js
  46. // vue2
  47. import Vue from 'vue'
  48. import VueCompositionAPI from '@vue/composition-api'
  49. Vue.use(VueCompositionAPI)
  50. ```
  51. ## API
  52. ### Props
  53. | 参数 | 说明 | 类型 | 默认值 |
  54. | ---------- | ----------------------------- | ------------------ | ---------- |
  55. | color | 颜色 | _string_ | `` |
  56. | type | 类型,可选值为 `spinner` | _string_ | `circular` |
  57. | size | 加载图标大小,默认单位为 `px`,uvue只支持string | _number \| string_ | `40rpx` |
  58. | text | 加载文本 | _string_ | `-` |
  59. | textColor | 文本颜色 | _string_ | `-` |
  60. | textSize | 文本大小 `px`,uvue只支持string | _number \| string_ | `-` |
  61. | vertical | 是否垂直排列图标和文字内容 | _boolean_ | `false` |
  62. ### Slots
  63. | 名称 | 说明 |
  64. | ------- | -------------- |
  65. | default | 加载文案 |
  66. ## 主题定制
  67. ### 样式变量
  68. 组件提供了下列 CSS 变量,可用于自定义样式。uvue和nvue不支持!
  69. | 名称 | 默认值 | 描述 |
  70. | ------------------------------ | ------------------------- | ---- |
  71. | --l-loading-color | _#1677ff_ | - |
  72. | --l-loading-text-color | _rgba(0,0,0,0.45)_ | - |
  73. | --l-loading-font-size | _28rpx_ | - |
  74. | --l-loading-duration | _2s_ | - |