index.js 3.2 KB

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