index.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  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. if (this.placeholder && this.fixed) {
  35. this.height = this.$refs.navBar.getBoundingClientRect().height;
  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.default, {
  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[_constant.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. });
  120. exports.default = _default;