u-loading-icon.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. "use strict";
  2. const common_vendor = require("../../../../common/vendor.js");
  3. const _sfc_main = {
  4. name: "u-loading-icon",
  5. mixins: [common_vendor.mpMixin, common_vendor.mixin, common_vendor.props$10],
  6. data() {
  7. return {
  8. // Array.form可以通过一个伪数组对象创建指定长度的数组
  9. // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
  10. array12: Array.from({
  11. length: 12
  12. }),
  13. // 这里需要设置默认值为360,否则在安卓nvue上,会延迟一个duration周期后才执行
  14. // 在iOS nvue上,则会一开始默认执行两个周期的动画
  15. aniAngel: 360,
  16. // 动画旋转角度
  17. webviewHide: false,
  18. // 监听webview的状态,如果隐藏了页面,则停止动画,以免性能消耗
  19. loading: false
  20. // 是否运行中,针对nvue使用
  21. };
  22. },
  23. computed: {
  24. // 当为circle类型时,给其另外三边设置一个更轻一些的颜色
  25. // 之所以需要这么做的原因是,比如父组件传了color为红色,那么需要另外的三个边为浅红色
  26. // 而不能是固定的某一个其他颜色(因为这个固定的颜色可能浅蓝,导致效果没有那么细腻良好)
  27. otherBorderColor() {
  28. const lightColor = common_vendor.colorGradient(this.color, "#ffffff", 100)[80];
  29. if (this.mode === "circle") {
  30. return this.inactiveColor ? this.inactiveColor : lightColor;
  31. } else {
  32. return "transparent";
  33. }
  34. }
  35. },
  36. watch: {
  37. show(n) {
  38. }
  39. },
  40. mounted() {
  41. this.init();
  42. },
  43. methods: {
  44. addUnit: common_vendor.addUnit,
  45. addStyle: common_vendor.addStyle,
  46. init() {
  47. setTimeout(() => {
  48. }, 20);
  49. },
  50. // 监听webview的显示与隐藏
  51. addEventListenerToWebview() {
  52. const pages = getCurrentPages();
  53. const page = pages[pages.length - 1];
  54. const currentWebview = page.$getAppWebview();
  55. currentWebview.addEventListener("hide", () => {
  56. this.webviewHide = true;
  57. });
  58. currentWebview.addEventListener("show", () => {
  59. this.webviewHide = false;
  60. });
  61. }
  62. }
  63. };
  64. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  65. return common_vendor.e({
  66. a: _ctx.show
  67. }, _ctx.show ? common_vendor.e({
  68. b: !$data.webviewHide
  69. }, !$data.webviewHide ? common_vendor.e({
  70. c: _ctx.mode === "spinner"
  71. }, _ctx.mode === "spinner" ? {
  72. d: common_vendor.f($data.array12, (item, index, i0) => {
  73. return {
  74. a: index
  75. };
  76. })
  77. } : {}, {
  78. e: common_vendor.n(`u-loading-icon__spinner--${_ctx.mode}`),
  79. f: _ctx.color,
  80. g: $options.addUnit(_ctx.size),
  81. h: $options.addUnit(_ctx.size),
  82. i: _ctx.color,
  83. j: $options.otherBorderColor,
  84. k: $options.otherBorderColor,
  85. l: $options.otherBorderColor,
  86. m: `${_ctx.duration}ms`,
  87. n: _ctx.mode === "semicircle" || _ctx.mode === "circle" ? _ctx.timingFunction : ""
  88. }) : {}, {
  89. o: _ctx.text
  90. }, _ctx.text ? {
  91. p: common_vendor.t(_ctx.text),
  92. q: $options.addUnit(_ctx.textSize),
  93. r: _ctx.textColor
  94. } : {}, {
  95. s: common_vendor.s($options.addStyle(_ctx.customStyle)),
  96. t: common_vendor.n(_ctx.vertical && "u-loading-icon--vertical")
  97. }) : {});
  98. }
  99. const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-00752c6d"], ["__file", "D:/project/学吧/learn_applet/node_modules/uview-plus/components/u-loading-icon/u-loading-icon.vue"]]);
  100. wx.createComponent(Component);