u-tabs.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  1. "use strict";
  2. var __defProp = Object.defineProperty;
  3. var __defProps = Object.defineProperties;
  4. var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
  5. var __getOwnPropSymbols = Object.getOwnPropertySymbols;
  6. var __hasOwnProp = Object.prototype.hasOwnProperty;
  7. var __propIsEnum = Object.prototype.propertyIsEnumerable;
  8. var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
  9. var __spreadValues = (a, b) => {
  10. for (var prop in b || (b = {}))
  11. if (__hasOwnProp.call(b, prop))
  12. __defNormalProp(a, prop, b[prop]);
  13. if (__getOwnPropSymbols)
  14. for (var prop of __getOwnPropSymbols(b)) {
  15. if (__propIsEnum.call(b, prop))
  16. __defNormalProp(a, prop, b[prop]);
  17. }
  18. return a;
  19. };
  20. var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
  21. var common_vendor = require("../../../../common/vendor.js");
  22. var uni_modules_uviewPlus_components_uTabs_props = require("./props.js");
  23. var uni_modules_uviewPlus_libs_mixin_mpMixin = require("../../libs/mixin/mpMixin.js");
  24. var uni_modules_uviewPlus_libs_mixin_mixin = require("../../libs/mixin/mixin.js");
  25. var uni_modules_uviewPlus_libs_config_props = require("../../libs/config/props.js");
  26. var uni_modules_uviewPlus_libs_function_index = require("../../libs/function/index.js");
  27. require("../../libs/function/test.js");
  28. require("../../libs/util/route.js");
  29. require("../../libs/config/config.js");
  30. require("../../libs/config/props/actionSheet.js");
  31. require("../../libs/config/props/album.js");
  32. require("../../libs/config/props/alert.js");
  33. require("../../libs/config/props/avatar.js");
  34. require("../../libs/config/props/avatarGroup.js");
  35. require("../../libs/config/props/backtop.js");
  36. require("../../libs/config/props/badge.js");
  37. require("../../libs/config/props/button.js");
  38. require("../../libs/config/props/calendar.js");
  39. require("../../libs/config/props/carKeyboard.js");
  40. require("../../libs/config/props/cell.js");
  41. require("../../libs/config/props/cellGroup.js");
  42. require("../../libs/config/props/checkbox.js");
  43. require("../../libs/config/props/checkboxGroup.js");
  44. require("../../libs/config/props/circleProgress.js");
  45. require("../../libs/config/props/code.js");
  46. require("../../libs/config/props/codeInput.js");
  47. require("../../libs/config/props/col.js");
  48. require("../../libs/config/props/collapse.js");
  49. require("../../libs/config/props/collapseItem.js");
  50. require("../../libs/config/props/columnNotice.js");
  51. require("../../libs/config/props/countDown.js");
  52. require("../../libs/config/props/countTo.js");
  53. require("../../libs/config/props/datetimePicker.js");
  54. require("../../libs/config/props/divider.js");
  55. require("../../libs/config/props/empty.js");
  56. require("../../libs/config/props/form.js");
  57. require("../../libs/config/props/formItem.js");
  58. require("../../libs/config/props/gap.js");
  59. require("../../libs/config/props/grid.js");
  60. require("../../libs/config/props/gridItem.js");
  61. require("../../libs/config/props/icon.js");
  62. require("../../libs/config/props/image.js");
  63. require("../../libs/config/props/indexAnchor.js");
  64. require("../../libs/config/props/indexList.js");
  65. require("../../libs/config/props/input.js");
  66. require("../../libs/config/props/keyboard.js");
  67. require("../../libs/config/props/line.js");
  68. require("../../libs/config/props/lineProgress.js");
  69. require("../../libs/config/props/link.js");
  70. require("../../libs/config/props/list.js");
  71. require("../../libs/config/props/listItem.js");
  72. require("../../libs/config/props/loadingIcon.js");
  73. require("../../libs/config/props/loadingPage.js");
  74. require("../../libs/config/props/loadmore.js");
  75. require("../../libs/config/props/modal.js");
  76. require("../../libs/config/props/navbar.js");
  77. require("../../libs/config/color.js");
  78. require("../../libs/config/props/noNetwork.js");
  79. require("../../libs/config/props/noticeBar.js");
  80. require("../../libs/config/props/notify.js");
  81. require("../../libs/config/props/numberBox.js");
  82. require("../../libs/config/props/numberKeyboard.js");
  83. require("../../libs/config/props/overlay.js");
  84. require("../../libs/config/props/parse.js");
  85. require("../../libs/config/props/picker.js");
  86. require("../../libs/config/props/popup.js");
  87. require("../../libs/config/props/radio.js");
  88. require("../../libs/config/props/radioGroup.js");
  89. require("../../libs/config/props/rate.js");
  90. require("../../libs/config/props/readMore.js");
  91. require("../../libs/config/props/row.js");
  92. require("../../libs/config/props/rowNotice.js");
  93. require("../../libs/config/props/scrollList.js");
  94. require("../../libs/config/props/search.js");
  95. require("../../libs/config/props/section.js");
  96. require("../../libs/config/props/skeleton.js");
  97. require("../../libs/config/props/slider.js");
  98. require("../../libs/config/props/statusBar.js");
  99. require("../../libs/config/props/steps.js");
  100. require("../../libs/config/props/stepsItem.js");
  101. require("../../libs/config/props/sticky.js");
  102. require("../../libs/config/props/subsection.js");
  103. require("../../libs/config/props/swipeAction.js");
  104. require("../../libs/config/props/swipeActionItem.js");
  105. require("../../libs/config/props/swiper.js");
  106. require("../../libs/config/props/swipterIndicator.js");
  107. require("../../libs/config/props/switch.js");
  108. require("../../libs/config/props/tabbar.js");
  109. require("../../libs/config/props/tabbarItem.js");
  110. require("../../libs/config/props/tabs.js");
  111. require("../../libs/config/props/tag.js");
  112. require("../../libs/config/props/text.js");
  113. require("../../libs/config/props/textarea.js");
  114. require("../../libs/config/props/toast.js");
  115. require("../../libs/config/props/toolbar.js");
  116. require("../../libs/config/props/tooltip.js");
  117. require("../../libs/config/props/transition.js");
  118. require("../../libs/config/props/upload.js");
  119. require("../../libs/function/digit.js");
  120. const _sfc_main = {
  121. name: "u-tabs",
  122. mixins: [uni_modules_uviewPlus_libs_mixin_mpMixin.mpMixin, uni_modules_uviewPlus_libs_mixin_mixin.mixin, uni_modules_uviewPlus_components_uTabs_props.props],
  123. data() {
  124. return {
  125. firstTime: true,
  126. scrollLeft: 0,
  127. scrollViewWidth: 0,
  128. lineOffsetLeft: 0,
  129. tabsRect: {
  130. left: 0
  131. },
  132. innerCurrent: 0,
  133. moving: false
  134. };
  135. },
  136. watch: {
  137. current: {
  138. immediate: true,
  139. handler(newValue, oldValue) {
  140. if (newValue !== this.innerCurrent) {
  141. this.innerCurrent = newValue;
  142. this.$nextTick(() => {
  143. this.resize();
  144. });
  145. }
  146. }
  147. },
  148. list() {
  149. this.$nextTick(() => {
  150. this.resize();
  151. });
  152. }
  153. },
  154. computed: {
  155. textStyle() {
  156. return (index) => {
  157. const style = {};
  158. const customeStyle = index === this.innerCurrent ? uni_modules_uviewPlus_libs_function_index.addStyle(this.activeStyle) : common_vendor.index.$u.addStyle(this.inactiveStyle);
  159. if (this.list[index].disabled) {
  160. style.color = "#c8c9cc";
  161. }
  162. return uni_modules_uviewPlus_libs_function_index.deepMerge(customeStyle, style);
  163. };
  164. },
  165. propsBadge() {
  166. return uni_modules_uviewPlus_libs_config_props.defProps.badge;
  167. }
  168. },
  169. async mounted() {
  170. this.init();
  171. },
  172. emits: ["click", "change"],
  173. methods: {
  174. addStyle: uni_modules_uviewPlus_libs_function_index.addStyle,
  175. addUnit: uni_modules_uviewPlus_libs_function_index.addUnit,
  176. setLineLeft() {
  177. const tabItem = this.list[this.innerCurrent];
  178. if (!tabItem) {
  179. return;
  180. }
  181. let lineOffsetLeft = this.list.slice(0, this.innerCurrent).reduce((total, curr) => total + curr.rect.width, 0);
  182. const lineWidth = uni_modules_uviewPlus_libs_function_index.getPx(this.lineWidth);
  183. this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2;
  184. if (this.firstTime) {
  185. setTimeout(() => {
  186. this.firstTime = false;
  187. }, 10);
  188. }
  189. },
  190. animation(x, duration = 0) {
  191. },
  192. clickHandler(item, index) {
  193. this.$emit("click", __spreadProps(__spreadValues({}, item), {
  194. index
  195. }));
  196. if (item.disabled)
  197. return;
  198. this.innerCurrent = index;
  199. this.resize();
  200. this.$emit("change", __spreadProps(__spreadValues({}, item), {
  201. index
  202. }));
  203. },
  204. init() {
  205. uni_modules_uviewPlus_libs_function_index.sleep().then(() => {
  206. this.resize();
  207. });
  208. },
  209. setScrollLeft() {
  210. const tabRect = this.list[this.innerCurrent];
  211. const offsetLeft = this.list.slice(0, this.innerCurrent).reduce((total, curr) => {
  212. return total + curr.rect.width;
  213. }, 0);
  214. const windowWidth = uni_modules_uviewPlus_libs_function_index.sys().windowWidth;
  215. let scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect.right) / 2 + this.tabsRect.left / 2;
  216. scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width);
  217. this.scrollLeft = Math.max(0, scrollLeft);
  218. },
  219. resize() {
  220. if (this.list.length === 0) {
  221. return;
  222. }
  223. Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
  224. this.tabsRect = tabsRect;
  225. this.scrollViewWidth = 0;
  226. itemRect.map((item, index) => {
  227. this.scrollViewWidth += item.width;
  228. this.list[index].rect = item;
  229. });
  230. this.setLineLeft();
  231. this.setScrollLeft();
  232. });
  233. },
  234. getTabsRect() {
  235. return new Promise((resolve) => {
  236. this.queryRect("u-tabs__wrapper__scroll-view").then((size) => resolve(size));
  237. });
  238. },
  239. getAllItemRect() {
  240. return new Promise((resolve) => {
  241. const promiseAllArr = this.list.map((item, index) => this.queryRect(`u-tabs__wrapper__nav__item-${index}`, true));
  242. Promise.all(promiseAllArr).then((sizes) => resolve(sizes));
  243. });
  244. },
  245. queryRect(el, item) {
  246. return new Promise((resolve) => {
  247. this.$uGetRect(`.${el}`).then((size) => {
  248. resolve(size);
  249. });
  250. });
  251. }
  252. }
  253. };
  254. if (!Array) {
  255. const _easycom_u_badge2 = common_vendor.resolveComponent("u-badge");
  256. _easycom_u_badge2();
  257. }
  258. const _easycom_u_badge = () => "../u-badge/u-badge.js";
  259. if (!Math) {
  260. _easycom_u_badge();
  261. }
  262. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  263. return {
  264. a: common_vendor.f(_ctx.list, (item, index, i0) => {
  265. return {
  266. a: common_vendor.t(item[_ctx.keyName]),
  267. b: common_vendor.n(item.disabled && "u-tabs__wrapper__nav__item__text--disabled"),
  268. c: common_vendor.s($options.textStyle(index)),
  269. d: "175034e3-0-" + i0,
  270. e: common_vendor.p({
  271. show: !!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value)),
  272. isDot: item.badge && item.badge.isDot || $options.propsBadge.isDot,
  273. value: item.badge && item.badge.value || $options.propsBadge.value,
  274. max: item.badge && item.badge.max || $options.propsBadge.max,
  275. type: item.badge && item.badge.type || $options.propsBadge.type,
  276. showZero: item.badge && item.badge.showZero || $options.propsBadge.showZero,
  277. bgColor: item.badge && item.badge.bgColor || $options.propsBadge.bgColor,
  278. color: item.badge && item.badge.color || $options.propsBadge.color,
  279. shape: item.badge && item.badge.shape || $options.propsBadge.shape,
  280. numberType: item.badge && item.badge.numberType || $options.propsBadge.numberType,
  281. inverted: item.badge && item.badge.inverted || $options.propsBadge.inverted,
  282. customStyle: "margin-left: 4px;"
  283. }),
  284. f: index,
  285. g: common_vendor.o(($event) => $options.clickHandler(item, index), index),
  286. h: `u-tabs__wrapper__nav__item-${index}`,
  287. i: common_vendor.n(`u-tabs__wrapper__nav__item-${index}`),
  288. j: common_vendor.n(item.disabled && "u-tabs__wrapper__nav__item--disabled")
  289. };
  290. }),
  291. b: common_vendor.s($options.addStyle(_ctx.itemStyle)),
  292. c: common_vendor.s({
  293. flex: _ctx.scrollable ? "" : 1
  294. }),
  295. d: common_vendor.s({
  296. width: $options.addUnit(_ctx.lineWidth),
  297. transform: `translate(${$data.lineOffsetLeft}px)`,
  298. transitionDuration: `${$data.firstTime ? 0 : _ctx.duration}ms`,
  299. height: $options.addUnit(_ctx.lineHeight),
  300. background: _ctx.lineColor,
  301. backgroundSize: _ctx.lineBgSize
  302. }),
  303. e: _ctx.scrollable,
  304. f: $data.scrollLeft
  305. };
  306. }
  307. var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-175034e3"], ["__file", "C:/Users/Administrator/Desktop/\u9879\u76EE/\u76F4\u64AD/liveH5-v3/uni_modules/uview-plus/components/u-tabs/u-tabs.vue"]]);
  308. wx.createComponent(Component);