su-tabbar.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. "use strict";
  2. const common_vendor = require("../../../common/vendor.js");
  3. const sheep_helper_index = require("../../helper/index.js");
  4. const sheep_index = require("../../index.js");
  5. require("../../helper/test.js");
  6. require("../../helper/digit.js");
  7. require("../../api/index.js");
  8. require("../../api/distri/score.js");
  9. require("../../request/index.js");
  10. require("../../config/index.js");
  11. require("../../store/index.js");
  12. require("../../store/app.js");
  13. require("../../api/promotion/diy.js");
  14. require("../../platform/index.js");
  15. require("../../platform/provider/wechat/index.js");
  16. require("../../platform/provider/wechat/miniProgram.js");
  17. require("../../api/member/auth.js");
  18. require("../../api/member/social.js");
  19. require("../../api/member/user.js");
  20. require("../../platform/provider/apple/index.js");
  21. require("../../platform/share.js");
  22. require("../../router/index.js");
  23. require("../../hooks/useModal.js");
  24. require("../../api/member/signin.js");
  25. require("../../helper/throttle.js");
  26. require("../../url/index.js");
  27. require("../../platform/pay.js");
  28. require("../../api/pay/order.js");
  29. require("../../store/user.js");
  30. require("../../store/cart.js");
  31. require("../../api/trade/cart.js");
  32. require("../../api/pay/wallet.js");
  33. require("../../api/trade/order.js");
  34. require("../../api/promotion/coupon.js");
  35. require("../../store/sys.js");
  36. require("../../store/modal.js");
  37. require("../../api/distri/share.js");
  38. require("../../api/distri/team.js");
  39. require("../../api/infra/file.js");
  40. require("../../api/member/address.js");
  41. require("../../api/member/point.js");
  42. require("../../api/migration/app.js");
  43. require("../../api/migration/chat.js");
  44. require("../../api/migration/index.js");
  45. require("../../api/migration/third.js");
  46. require("../../api/pay/channel.js");
  47. require("../../api/product/category.js");
  48. require("../../api/product/comment.js");
  49. require("../../api/product/favorite.js");
  50. require("../../api/product/history.js");
  51. require("../../api/product/spu.js");
  52. require("../../api/promotion/activity.js");
  53. require("../../api/promotion/article.js");
  54. require("../../api/promotion/bargain.js");
  55. require("../../api/promotion/combination.js");
  56. require("../../api/promotion/rewardActivity.js");
  57. require("../../api/promotion/seckill.js");
  58. require("../../api/system/area.js");
  59. require("../../api/system/voice.js");
  60. require("../../api/trade/afterSale.js");
  61. require("../../api/trade/brokerage.js");
  62. require("../../api/trade/config.js");
  63. require("../../api/trade/delivery.js");
  64. require("../../config/zIndex.js");
  65. const _sfc_main = {
  66. name: "su-tabbar",
  67. props: {
  68. customStyle: {
  69. type: [Object, String],
  70. default: () => ({})
  71. },
  72. customClass: {
  73. type: String,
  74. default: ""
  75. },
  76. // 跳转的页面路径
  77. url: {
  78. type: String,
  79. default: ""
  80. },
  81. // 页面跳转的类型
  82. linkType: {
  83. type: String,
  84. default: "navigateTo"
  85. },
  86. // 当前匹配项的name
  87. value: {
  88. type: [String, Number, null],
  89. default: ""
  90. },
  91. // 是否为iPhoneX留出底部安全距离
  92. safeAreaInsetBottom: {
  93. type: Boolean,
  94. default: true
  95. },
  96. // 是否显示上方边框
  97. border: {
  98. type: Boolean,
  99. default: true
  100. },
  101. // 元素层级z-index
  102. zIndex: {
  103. type: [String, Number],
  104. default: 10
  105. },
  106. // 选中标签的颜色
  107. activeColor: {
  108. type: String,
  109. default: "#1989fa"
  110. },
  111. // 未选中标签的颜色
  112. inactiveColor: {
  113. type: String,
  114. default: "#7d7e80"
  115. },
  116. // 是否固定在底部
  117. fixed: {
  118. type: Boolean,
  119. default: true
  120. },
  121. // fixed定位固定在底部时,是否生成一个等高元素防止塌陷
  122. placeholder: {
  123. type: Boolean,
  124. default: true
  125. },
  126. midTabBar: {
  127. type: Boolean,
  128. default: false
  129. }
  130. },
  131. data() {
  132. return {
  133. placeholderHeight: 0,
  134. safeBottomHeight: sheep_index.sheep.$platform.device.safeAreaInsets.bottom
  135. };
  136. },
  137. computed: {
  138. tabbarStyle() {
  139. const style = {
  140. zIndex: this.zIndex
  141. };
  142. return sheep_helper_index.deepMerge(style, sheep_helper_index.addStyle(this.customStyle));
  143. },
  144. // 监听多个参数的变化,通过在computed执行对应的操作
  145. updateChild() {
  146. return [this.value, this.activeColor, this.inactiveColor];
  147. },
  148. updatePlaceholder() {
  149. return [this.fixed, this.placeholder];
  150. }
  151. },
  152. watch: {
  153. updateChild() {
  154. this.updateChildren();
  155. },
  156. updatePlaceholder() {
  157. this.setPlaceholderHeight();
  158. }
  159. },
  160. created() {
  161. this.children = [];
  162. },
  163. mounted() {
  164. this.setPlaceholderHeight();
  165. },
  166. methods: {
  167. updateChildren() {
  168. this.children.length && this.children.map((child) => child.updateFromParent());
  169. },
  170. getRect(selector, all) {
  171. return new Promise((resolve) => {
  172. common_vendor.index.createSelectorQuery().in(this)[all ? "selectAll" : "select"](selector).boundingClientRect((rect) => {
  173. if (all && Array.isArray(rect) && rect.length) {
  174. resolve(rect);
  175. }
  176. if (!all && rect) {
  177. resolve(rect);
  178. }
  179. }).exec();
  180. });
  181. },
  182. // 设置用于防止塌陷元素的高度
  183. async setPlaceholderHeight() {
  184. if (!this.fixed || !this.placeholder)
  185. return;
  186. await sheep_helper_index.sleep(20);
  187. this.getRect(".u-tabbar__content").then(({ height = 50 }) => {
  188. this.placeholderHeight = height;
  189. });
  190. }
  191. }
  192. };
  193. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  194. return common_vendor.e({
  195. a: $props.safeAreaInsetBottom
  196. }, $props.safeAreaInsetBottom ? {
  197. b: common_vendor.s({
  198. height: $data.safeBottomHeight + "px"
  199. })
  200. } : {}, {
  201. c: common_vendor.o(() => {
  202. }),
  203. d: common_vendor.n($props.border && "u-border-top"),
  204. e: common_vendor.n($props.fixed && "u-tabbar--fixed"),
  205. f: common_vendor.n({
  206. "mid-tabbar": $props.midTabBar
  207. }),
  208. g: common_vendor.s($options.tabbarStyle),
  209. h: $props.placeholder
  210. }, $props.placeholder ? {
  211. i: $data.placeholderHeight + "px"
  212. } : {});
  213. }
  214. const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b5af0eb7"], ["__file", "D:/zx/mall-front-app/sheep/ui/su-tabbar/su-tabbar.vue"]]);
  215. wx.createComponent(Component);