c-loading


加载中

示例

  1. <template>
  2. <view>
  3. <c-loading loading="{{loading}}" tip="加载中"></c-loading>
  4. <view class="button-wrapper">
  5. <button class="button" text="更改loading态" c-bind:onclick="changeLoading"></button>
  6. </view>
  7. </view>
  8. </template>
  9. <script>
  10. class CLoading {
  11. data = {
  12. loading: true,
  13. }
  14. methods = {
  15. changeLoading() {
  16. this.loading = !this.loading;
  17. },
  18. }
  19. }
  20. export default new CLoading();
  21. </script>
  22. <style scoped>
  23. .content {
  24. width: 750cpx;
  25. height: 300cpx;
  26. background-color: peru;
  27. }
  28. .button-wrapper {
  29. flex: 1;
  30. justify-content: center;
  31. align-items: center;
  32. margin-top: 50cpx;
  33. }
  34. </style>
  35. <script cml-type="json">
  36. {
  37. "base": {
  38. "usingComponents": {
  39. "c-loading": "cml-ui/components/c-loading/c-loading"
  40. }
  41. }
  42. }
  43. </script>