index.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  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 _constant = require("../utils/constant");
  7. var _icon = _interopRequireDefault(require("../icon"));
  8. // Utils
  9. // Components
  10. var _createNamespace = (0, _utils.createNamespace)('nav-bar'),
  11. createComponent = _createNamespace[0],
  12. bem = _createNamespace[1];
  13. var _default = createComponent({
  14. props: {
  15. title: String,
  16. fixed: Boolean,
  17. zIndex: [Number, String],
  18. leftText: String,
  19. rightText: String,
  20. leftArrow: Boolean,
  21. placeholder: Boolean,
  22. safeAreaInsetTop: Boolean,
  23. border: {
  24. type: Boolean,
  25. default: true
  26. }
  27. },
  28. data: function data() {
  29. return {
  30. height: null
  31. };
  32. },
  33. mounted: function mounted() {
  34. var _this = this;
  35. if (this.placeholder && this.fixed) {
  36. var setHeight = function setHeight() {
  37. _this.height = _this.$refs.navBar.getBoundingClientRect().height;
  38. };
  39. setHeight(); // https://github.com/vant-ui/vant/issues/10131
  40. setTimeout(setHeight, 100);
  41. }
  42. },
  43. methods: {
  44. genLeft: function genLeft() {
  45. var h = this.$createElement;
  46. var leftSlot = this.slots('left');
  47. if (leftSlot) {
  48. return leftSlot;
  49. }
  50. return [this.leftArrow && h(_icon.default, {
  51. "class": bem('arrow'),
  52. "attrs": {
  53. "name": "arrow-left"
  54. }
  55. }), this.leftText && h("span", {
  56. "class": bem('text')
  57. }, [this.leftText])];
  58. },
  59. genRight: function genRight() {
  60. var h = this.$createElement;
  61. var rightSlot = this.slots('right');
  62. if (rightSlot) {
  63. return rightSlot;
  64. }
  65. if (this.rightText) {
  66. return h("span", {
  67. "class": bem('text')
  68. }, [this.rightText]);
  69. }
  70. },
  71. genNavBar: function genNavBar() {
  72. var _ref;
  73. var h = this.$createElement;
  74. return h("div", {
  75. "ref": "navBar",
  76. "style": {
  77. zIndex: this.zIndex
  78. },
  79. "class": [bem({
  80. fixed: this.fixed,
  81. 'safe-area-inset-top': this.safeAreaInsetTop
  82. }), (_ref = {}, _ref[_constant.BORDER_BOTTOM] = this.border, _ref)]
  83. }, [h("div", {
  84. "class": bem('content')
  85. }, [this.hasLeft() && h("div", {
  86. "class": bem('left'),
  87. "on": {
  88. "click": this.onClickLeft
  89. }
  90. }, [this.genLeft()]), h("div", {
  91. "class": [bem('title'), 'van-ellipsis']
  92. }, [this.slots('title') || this.title]), this.hasRight() && h("div", {
  93. "class": bem('right'),
  94. "on": {
  95. "click": this.onClickRight
  96. }
  97. }, [this.genRight()])])]);
  98. },
  99. hasLeft: function hasLeft() {
  100. return this.leftArrow || this.leftText || this.slots('left');
  101. },
  102. hasRight: function hasRight() {
  103. return this.rightText || this.slots('right');
  104. },
  105. onClickLeft: function onClickLeft(event) {
  106. this.$emit('click-left', event);
  107. },
  108. onClickRight: function onClickRight(event) {
  109. this.$emit('click-right', event);
  110. }
  111. },
  112. render: function render() {
  113. var h = arguments[0];
  114. if (this.placeholder && this.fixed) {
  115. return h("div", {
  116. "class": bem('placeholder'),
  117. "style": {
  118. height: this.height + "px"
  119. }
  120. }, [this.genNavBar()]);
  121. }
  122. return this.genNavBar();
  123. }
  124. });
  125. exports.default = _default;