index.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports.default = void 0;
  5. var _utils = require("../utils");
  6. var _utils2 = require("./utils");
  7. var _router = require("../utils/router");
  8. var _style = require("../utils/dom/style");
  9. var _event = require("../utils/dom/event");
  10. var _unit = require("../utils/format/unit");
  11. var _constant = require("../utils/constant");
  12. var _interceptor = require("../utils/interceptor");
  13. var _scroll = require("../utils/dom/scroll");
  14. var _relation = require("../mixins/relation");
  15. var _bindEvent = require("../mixins/bind-event");
  16. var _Title = _interopRequireDefault(require("./Title"));
  17. var _sticky = _interopRequireDefault(require("../sticky"));
  18. var _Content = _interopRequireDefault(require("./Content"));
  19. // Utils
  20. // Mixins
  21. // Components
  22. var _createNamespace = (0, _utils.createNamespace)('tabs'),
  23. createComponent = _createNamespace[0],
  24. bem = _createNamespace[1];
  25. var _default2 = createComponent({
  26. mixins: [(0, _relation.ParentMixin)('vanTabs'), (0, _bindEvent.BindEventMixin)(function (bind) {
  27. if (!this.scroller) {
  28. this.scroller = (0, _scroll.getScroller)(this.$el);
  29. }
  30. bind(window, 'resize', this.resize, true);
  31. if (this.scrollspy) {
  32. bind(this.scroller, 'scroll', this.onScroll, true);
  33. }
  34. })],
  35. inject: {
  36. vanPopup: {
  37. default: null
  38. }
  39. },
  40. model: {
  41. prop: 'active'
  42. },
  43. props: {
  44. color: String,
  45. border: Boolean,
  46. sticky: Boolean,
  47. animated: Boolean,
  48. swipeable: Boolean,
  49. scrollspy: Boolean,
  50. background: String,
  51. lineWidth: [Number, String],
  52. lineHeight: [Number, String],
  53. beforeChange: Function,
  54. titleActiveColor: String,
  55. titleInactiveColor: String,
  56. type: {
  57. type: String,
  58. default: 'line'
  59. },
  60. active: {
  61. type: [Number, String],
  62. default: 0
  63. },
  64. ellipsis: {
  65. type: Boolean,
  66. default: true
  67. },
  68. duration: {
  69. type: [Number, String],
  70. default: 0.3
  71. },
  72. offsetTop: {
  73. type: [Number, String],
  74. default: 0
  75. },
  76. lazyRender: {
  77. type: Boolean,
  78. default: true
  79. },
  80. swipeThreshold: {
  81. type: [Number, String],
  82. default: 5
  83. }
  84. },
  85. data: function data() {
  86. return {
  87. position: '',
  88. currentIndex: null,
  89. lineStyle: {
  90. backgroundColor: this.color
  91. }
  92. };
  93. },
  94. computed: {
  95. // whether the nav is scrollable
  96. scrollable: function scrollable() {
  97. return this.children.length > this.swipeThreshold || !this.ellipsis;
  98. },
  99. navStyle: function navStyle() {
  100. return {
  101. borderColor: this.color,
  102. background: this.background
  103. };
  104. },
  105. currentName: function currentName() {
  106. var activeTab = this.children[this.currentIndex];
  107. if (activeTab) {
  108. return activeTab.computedName;
  109. }
  110. },
  111. offsetTopPx: function offsetTopPx() {
  112. return (0, _unit.unitToPx)(this.offsetTop);
  113. },
  114. scrollOffset: function scrollOffset() {
  115. if (this.sticky) {
  116. return this.offsetTopPx + this.tabHeight;
  117. }
  118. return 0;
  119. }
  120. },
  121. watch: {
  122. color: 'setLine',
  123. active: function active(name) {
  124. if (name !== this.currentName) {
  125. this.setCurrentIndexByName(name);
  126. }
  127. },
  128. children: function children() {
  129. var _this = this;
  130. this.setCurrentIndexByName(this.active);
  131. this.setLine();
  132. this.$nextTick(function () {
  133. _this.scrollIntoView(true);
  134. });
  135. },
  136. currentIndex: function currentIndex() {
  137. this.scrollIntoView();
  138. this.setLine(); // scroll to correct position
  139. if (this.stickyFixed && !this.scrollspy) {
  140. (0, _scroll.setRootScrollTop)(Math.ceil((0, _scroll.getElementTop)(this.$el) - this.offsetTopPx));
  141. }
  142. },
  143. scrollspy: function scrollspy(val) {
  144. if (val) {
  145. (0, _event.on)(this.scroller, 'scroll', this.onScroll, true);
  146. } else {
  147. (0, _event.off)(this.scroller, 'scroll', this.onScroll);
  148. }
  149. }
  150. },
  151. mounted: function mounted() {
  152. var _this2 = this;
  153. this.init(); // https://github.com/vant-ui/vant/issues/7959
  154. if (this.vanPopup) {
  155. this.vanPopup.onReopen(function () {
  156. _this2.setLine();
  157. });
  158. }
  159. },
  160. activated: function activated() {
  161. this.init();
  162. this.setLine();
  163. },
  164. methods: {
  165. // @exposed-api
  166. resize: function resize() {
  167. this.setLine();
  168. },
  169. init: function init() {
  170. var _this3 = this;
  171. this.$nextTick(function () {
  172. _this3.inited = true;
  173. _this3.tabHeight = (0, _scroll.getVisibleHeight)(_this3.$refs.wrap);
  174. _this3.scrollIntoView(true);
  175. });
  176. },
  177. // update nav bar style
  178. setLine: function setLine() {
  179. var _this4 = this;
  180. var shouldAnimate = this.inited;
  181. this.$nextTick(function () {
  182. var titles = _this4.$refs.titles;
  183. if (!titles || !titles[_this4.currentIndex] || _this4.type !== 'line' || (0, _style.isHidden)(_this4.$el)) {
  184. return;
  185. }
  186. var title = titles[_this4.currentIndex].$el;
  187. var lineWidth = _this4.lineWidth,
  188. lineHeight = _this4.lineHeight;
  189. var left = title.offsetLeft + title.offsetWidth / 2;
  190. var lineStyle = {
  191. width: (0, _utils.addUnit)(lineWidth),
  192. backgroundColor: _this4.color,
  193. transform: "translateX(" + left + "px) translateX(-50%)"
  194. };
  195. if (shouldAnimate) {
  196. lineStyle.transitionDuration = _this4.duration + "s";
  197. }
  198. if ((0, _utils.isDef)(lineHeight)) {
  199. var height = (0, _utils.addUnit)(lineHeight);
  200. lineStyle.height = height;
  201. lineStyle.borderRadius = height;
  202. }
  203. _this4.lineStyle = lineStyle;
  204. });
  205. },
  206. // correct the index of active tab
  207. setCurrentIndexByName: function setCurrentIndexByName(name) {
  208. var matched = this.children.filter(function (tab) {
  209. return tab.computedName === name;
  210. });
  211. var defaultIndex = (this.children[0] || {}).index || 0;
  212. this.setCurrentIndex(matched.length ? matched[0].index : defaultIndex);
  213. },
  214. setCurrentIndex: function setCurrentIndex(currentIndex) {
  215. var newIndex = this.findAvailableTab(currentIndex);
  216. if (!(0, _utils.isDef)(newIndex)) {
  217. return;
  218. }
  219. var newTab = this.children[newIndex];
  220. var newName = newTab.computedName;
  221. var shouldEmitChange = this.currentIndex !== null;
  222. this.currentIndex = newIndex;
  223. if (newName !== this.active) {
  224. this.$emit('input', newName);
  225. if (shouldEmitChange) {
  226. this.$emit('change', newName, newTab.title);
  227. }
  228. }
  229. },
  230. findAvailableTab: function findAvailableTab(index) {
  231. var diff = index < this.currentIndex ? -1 : 1;
  232. while (index >= 0 && index < this.children.length) {
  233. if (!this.children[index].disabled) {
  234. return index;
  235. }
  236. index += diff;
  237. }
  238. },
  239. // emit event when clicked
  240. onClick: function onClick(item, index) {
  241. var _this5 = this;
  242. var _this$children$index = this.children[index],
  243. title = _this$children$index.title,
  244. disabled = _this$children$index.disabled,
  245. computedName = _this$children$index.computedName;
  246. if (disabled) {
  247. this.$emit('disabled', computedName, title);
  248. } else {
  249. (0, _interceptor.callInterceptor)({
  250. interceptor: this.beforeChange,
  251. args: [computedName],
  252. done: function done() {
  253. _this5.setCurrentIndex(index);
  254. _this5.scrollToCurrentContent();
  255. }
  256. });
  257. this.$emit('click', computedName, title);
  258. (0, _router.route)(item.$router, item);
  259. }
  260. },
  261. // scroll active tab into view
  262. scrollIntoView: function scrollIntoView(immediate) {
  263. var titles = this.$refs.titles;
  264. if (!this.scrollable || !titles || !titles[this.currentIndex]) {
  265. return;
  266. }
  267. var nav = this.$refs.nav;
  268. var title = titles[this.currentIndex].$el;
  269. var to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
  270. (0, _utils2.scrollLeftTo)(nav, to, immediate ? 0 : +this.duration);
  271. },
  272. onSticktScroll: function onSticktScroll(params) {
  273. this.stickyFixed = params.isFixed;
  274. this.$emit('scroll', params);
  275. },
  276. // @exposed-api
  277. scrollTo: function scrollTo(name) {
  278. var _this6 = this;
  279. this.$nextTick(function () {
  280. _this6.setCurrentIndexByName(name);
  281. _this6.scrollToCurrentContent(true);
  282. });
  283. },
  284. scrollToCurrentContent: function scrollToCurrentContent(immediate) {
  285. var _this7 = this;
  286. if (immediate === void 0) {
  287. immediate = false;
  288. }
  289. if (this.scrollspy) {
  290. var target = this.children[this.currentIndex];
  291. var el = target == null ? void 0 : target.$el;
  292. if (el) {
  293. var to = (0, _scroll.getElementTop)(el, this.scroller) - this.scrollOffset;
  294. this.lockScroll = true;
  295. (0, _utils2.scrollTopTo)(this.scroller, to, immediate ? 0 : +this.duration, function () {
  296. _this7.lockScroll = false;
  297. });
  298. }
  299. }
  300. },
  301. onScroll: function onScroll() {
  302. if (this.scrollspy && !this.lockScroll) {
  303. var index = this.getCurrentIndexOnScroll();
  304. this.setCurrentIndex(index);
  305. }
  306. },
  307. getCurrentIndexOnScroll: function getCurrentIndexOnScroll() {
  308. var children = this.children;
  309. for (var index = 0; index < children.length; index++) {
  310. var top = (0, _scroll.getVisibleTop)(children[index].$el);
  311. if (top > this.scrollOffset) {
  312. return index === 0 ? 0 : index - 1;
  313. }
  314. }
  315. return children.length - 1;
  316. }
  317. },
  318. render: function render() {
  319. var _this8 = this,
  320. _ref;
  321. var h = arguments[0];
  322. var type = this.type,
  323. animated = this.animated,
  324. scrollable = this.scrollable;
  325. var Nav = this.children.map(function (item, index) {
  326. var _item$badge;
  327. return h(_Title.default, {
  328. "ref": "titles",
  329. "refInFor": true,
  330. "attrs": {
  331. "type": type,
  332. "dot": item.dot,
  333. "info": (_item$badge = item.badge) != null ? _item$badge : item.info,
  334. "title": item.title,
  335. "color": _this8.color,
  336. "isActive": index === _this8.currentIndex,
  337. "disabled": item.disabled,
  338. "scrollable": scrollable,
  339. "activeColor": _this8.titleActiveColor,
  340. "inactiveColor": _this8.titleInactiveColor
  341. },
  342. "style": item.titleStyle,
  343. "class": item.titleClass,
  344. "scopedSlots": {
  345. default: function _default() {
  346. return item.slots('title');
  347. }
  348. },
  349. "on": {
  350. "click": function click() {
  351. _this8.onClick(item, index);
  352. }
  353. }
  354. });
  355. });
  356. var Wrap = h("div", {
  357. "ref": "wrap",
  358. "class": [bem('wrap', {
  359. scrollable: scrollable
  360. }), (_ref = {}, _ref[_constant.BORDER_TOP_BOTTOM] = type === 'line' && this.border, _ref)]
  361. }, [h("div", {
  362. "ref": "nav",
  363. "attrs": {
  364. "role": "tablist"
  365. },
  366. "class": bem('nav', [type, {
  367. complete: this.scrollable
  368. }]),
  369. "style": this.navStyle
  370. }, [this.slots('nav-left'), Nav, type === 'line' && h("div", {
  371. "class": bem('line'),
  372. "style": this.lineStyle
  373. }), this.slots('nav-right')])]);
  374. return h("div", {
  375. "class": bem([type])
  376. }, [this.sticky ? h(_sticky.default, {
  377. "attrs": {
  378. "container": this.$el,
  379. "offsetTop": this.offsetTop
  380. },
  381. "on": {
  382. "scroll": this.onSticktScroll
  383. }
  384. }, [Wrap]) : Wrap, h(_Content.default, {
  385. "attrs": {
  386. "count": this.children.length,
  387. "animated": animated,
  388. "duration": this.duration,
  389. "swipeable": this.swipeable,
  390. "currentIndex": this.currentIndex
  391. },
  392. "on": {
  393. "change": this.setCurrentIndex
  394. }
  395. }, [this.slots()])]);
  396. }
  397. });
  398. exports.default = _default2;