合同小程序前端代码仓库
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.

75 lines
2.5 KiB

3 months ago
  1. <template>
  2. <view class="l-class l-loading" :class="['l-loading--' + type, {'is-vertical': vertical}]" :style="{color: inheritColor ? 'inherit': ''}">
  3. <!-- #ifdef APP-NVUE -->
  4. <loading-indicator class="l-loading__circular" :style="[spinnerStyle]" :animating="true"/>
  5. <!-- #endif -->
  6. <!-- #ifndef APP-NVUE -->
  7. <view class="l-loading__ball" v-if="type == 'ball'" :style="[spinnerStyle]"></view>
  8. <view class="l-loading__circular" v-if="type == 'circular'" :style="[spinnerStyle]"></view>
  9. <view class="l-loading__spinner" v-if="type == 'spinner'" :style="[spinnerStyle]">
  10. <view class="l-loading__dot" v-for="item in 12" :key="item" :style="{'--l-loading-dot': item}"></view>
  11. </view>
  12. <!-- #endif -->
  13. <text class="l-loading__text" v-if="$slots['default']||text" :style="[textStyle]">
  14. {{text}}<slot></slot>
  15. </text>
  16. </view>
  17. </template>
  18. <script lang="ts">
  19. import {computed, defineComponent} from '@/uni_modules/lime-shared/vue';
  20. import {addUnit} from '@/uni_modules/lime-shared/addUnit';
  21. import {unitConvert} from '@/uni_modules/lime-shared/unitConvert';
  22. import LoadingProps from './props';
  23. const name = 'l-loading';
  24. /**
  25. * LimeLoading 加载
  26. * @description 加载
  27. * @tutorial https://ext.dcloud.net.cn/plugin?name=lime-loading
  28. * @property {String} color loading颜色
  29. * @property {String} type loading类型默认circular
  30. * @value circular 圆环
  31. * @value spinner 菊花
  32. * @property {String} size 尺寸
  33. * @property {String} text 文案
  34. * @property {String} textColor 文案颜色
  35. * @property {String} textSize 文案字体大小
  36. * @property {Boolean} vertical 是否垂直
  37. * @property {Boolean} inheritColor 是否继续颜色
  38. */
  39. export default defineComponent({
  40. name,
  41. props:LoadingProps,
  42. setup(props) {
  43. const classes = computed(() => {
  44. const {type, vertical} = props
  45. return {
  46. [name + '--' + type]: type,
  47. ['is-vertical']: vertical,
  48. }
  49. })
  50. const spinnerStyle = computed(() => {
  51. const size = unitConvert(props.size ?? 0) * (props.type == 'ball' ? 0.6 : 1);
  52. return {
  53. color: props.color,
  54. width: size != 0 && (props.type == 'ball' ? addUnit(size * 2.1) : addUnit(size)),
  55. height: size != 0 && addUnit(size),
  56. '--l-loadding-ball-size': size != 0 && addUnit(size)
  57. }
  58. })
  59. const textStyle = computed(() => {
  60. return {
  61. color: props.textColor,
  62. fontSize: props.textSize,
  63. }
  64. })
  65. return {
  66. classes,
  67. spinnerStyle,
  68. textStyle
  69. }
  70. }
  71. })
  72. </script>
  73. <style lang="scss">
  74. @import './index.scss';
  75. </style>