u-row-notice.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. "use strict";
  2. const common_vendor = require("../../../../common/vendor.js");
  3. const _sfc_main = {
  4. name: "u-row-notice",
  5. mixins: [common_vendor.mpMixin, common_vendor.mixin, common_vendor.props$18],
  6. data() {
  7. return {
  8. animationDuration: "0",
  9. // 动画执行时间
  10. animationPlayState: "paused",
  11. // 动画的开始和结束执行
  12. // nvue下,内容发生变化,导致滚动宽度也变化,需要标志为是否需要重新计算宽度
  13. // 不能在内容变化时直接重新计算,因为nvue的animation模块上一次的滚动不是刚好结束,会有影响
  14. nvueInit: true,
  15. show: true
  16. };
  17. },
  18. watch: {
  19. text: {
  20. immediate: true,
  21. handler(newValue, oldValue) {
  22. this.vue();
  23. if (!common_vendor.index.$u.test.string(newValue)) {
  24. common_vendor.index.$u.error("noticebar组件direction为row时,要求text参数为字符串形式");
  25. }
  26. }
  27. },
  28. fontSize() {
  29. this.vue();
  30. },
  31. speed() {
  32. this.vue();
  33. }
  34. },
  35. computed: {
  36. // 文字内容的样式
  37. textStyle() {
  38. let style = {};
  39. style.color = this.color;
  40. style.fontSize = common_vendor.index.$u.addUnit(this.fontSize);
  41. return style;
  42. },
  43. animationStyle() {
  44. let style = {};
  45. style.animationDuration = this.animationDuration;
  46. style.animationPlayState = this.animationPlayState;
  47. return style;
  48. },
  49. // 内部对用户传入的数据进一步分割,放到多个text标签循环,否则如果用户传入的字符串很长(100个字符以上)
  50. // 放在一个text标签中进行滚动,在低端安卓机上,动画可能会出现抖动现象,需要分割到多个text中可解决此问题
  51. innerText() {
  52. let result = [], len = 20;
  53. const textArr = this.text.split("");
  54. for (let i = 0; i < textArr.length; i += len) {
  55. result.push(textArr.slice(i, i + len).join(""));
  56. }
  57. return result;
  58. }
  59. },
  60. mounted() {
  61. this.init();
  62. },
  63. emits: ["click", "close"],
  64. methods: {
  65. init() {
  66. this.vue();
  67. if (!common_vendor.index.$u.test.string(this.text)) {
  68. common_vendor.index.$u.error("noticebar组件direction为row时,要求text参数为字符串形式");
  69. }
  70. },
  71. // vue版处理
  72. async vue() {
  73. let textWidth = 0;
  74. await common_vendor.index.$u.sleep();
  75. textWidth = (await this.$uGetRect(".u-notice__content__text")).width;
  76. (await this.$uGetRect(".u-notice__content")).width;
  77. this.animationDuration = `${textWidth / common_vendor.index.$u.getPx(this.speed)}s`;
  78. this.animationPlayState = "paused";
  79. setTimeout(() => {
  80. this.animationPlayState = "running";
  81. }, 10);
  82. },
  83. // nvue版处理
  84. async nvue() {
  85. },
  86. loopAnimation(textWidth, boxWidth) {
  87. },
  88. getNvueRect(el) {
  89. },
  90. // 点击通告栏
  91. clickHandler(index) {
  92. this.$emit("click");
  93. },
  94. // 点击右侧按钮,需要判断点击的是关闭图标还是箭头图标
  95. close() {
  96. this.$emit("close");
  97. }
  98. }
  99. };
  100. if (!Array) {
  101. const _easycom_u_icon2 = common_vendor.resolveComponent("u-icon");
  102. _easycom_u_icon2();
  103. }
  104. const _easycom_u_icon = () => "../u-icon/u-icon.js";
  105. if (!Math) {
  106. _easycom_u_icon();
  107. }
  108. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  109. return common_vendor.e({
  110. a: _ctx.icon
  111. }, _ctx.icon ? {
  112. b: common_vendor.p({
  113. name: _ctx.icon,
  114. color: _ctx.color,
  115. size: "19"
  116. })
  117. } : {}, {
  118. c: common_vendor.f($options.innerText, (item, index, i0) => {
  119. return {
  120. a: common_vendor.t(item),
  121. b: index
  122. };
  123. }),
  124. d: common_vendor.s($options.textStyle),
  125. e: common_vendor.s($options.animationStyle),
  126. f: ["link", "closable"].includes(_ctx.mode)
  127. }, ["link", "closable"].includes(_ctx.mode) ? common_vendor.e({
  128. g: _ctx.mode === "link"
  129. }, _ctx.mode === "link" ? {
  130. h: common_vendor.p({
  131. name: "arrow-right",
  132. size: 17,
  133. color: _ctx.color
  134. })
  135. } : {}, {
  136. i: _ctx.mode === "closable"
  137. }, _ctx.mode === "closable" ? {
  138. j: common_vendor.o($options.close),
  139. k: common_vendor.p({
  140. name: "close",
  141. size: 16,
  142. color: _ctx.color
  143. })
  144. } : {}) : {}, {
  145. l: common_vendor.o((...args) => $options.clickHandler && $options.clickHandler(...args))
  146. });
  147. }
  148. const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-462e724c"], ["__file", "D:/project/二手车/car_applet/node_modules/uview-plus/components/u-row-notice/u-row-notice.vue"]]);
  149. wx.createComponent(Component);