index.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  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. if (this.placeholder && this.fixed) {
  30. this.height = this.$refs.navBar.getBoundingClientRect().height;
  31. }
  32. },
  33. methods: {
  34. genLeft: function genLeft() {
  35. var h = this.$createElement;
  36. var leftSlot = this.slots('left');
  37. if (leftSlot) {
  38. return leftSlot;
  39. }
  40. return [this.leftArrow && h(Icon, {
  41. "class": bem('arrow'),
  42. "attrs": {
  43. "name": "arrow-left"
  44. }
  45. }), this.leftText && h("span", {
  46. "class": bem('text')
  47. }, [this.leftText])];
  48. },
  49. genRight: function genRight() {
  50. var h = this.$createElement;
  51. var rightSlot = this.slots('right');
  52. if (rightSlot) {
  53. return rightSlot;
  54. }
  55. if (this.rightText) {
  56. return h("span", {
  57. "class": bem('text')
  58. }, [this.rightText]);
  59. }
  60. },
  61. genNavBar: function genNavBar() {
  62. var _ref;
  63. var h = this.$createElement;
  64. return h("div", {
  65. "ref": "navBar",
  66. "style": {
  67. zIndex: this.zIndex
  68. },
  69. "class": [bem({
  70. fixed: this.fixed,
  71. 'safe-area-inset-top': this.safeAreaInsetTop
  72. }), (_ref = {}, _ref[BORDER_BOTTOM] = this.border, _ref)]
  73. }, [h("div", {
  74. "class": bem('content')
  75. }, [this.hasLeft() && h("div", {
  76. "class": bem('left'),
  77. "on": {
  78. "click": this.onClickLeft
  79. }
  80. }, [this.genLeft()]), h("div", {
  81. "class": [bem('title'), 'van-ellipsis']
  82. }, [this.slots('title') || this.title]), this.hasRight() && h("div", {
  83. "class": bem('right'),
  84. "on": {
  85. "click": this.onClickRight
  86. }
  87. }, [this.genRight()])])]);
  88. },
  89. hasLeft: function hasLeft() {
  90. return this.leftArrow || this.leftText || this.slots('left');
  91. },
  92. hasRight: function hasRight() {
  93. return this.rightText || this.slots('right');
  94. },
  95. onClickLeft: function onClickLeft(event) {
  96. this.$emit('click-left', event);
  97. },
  98. onClickRight: function onClickRight(event) {
  99. this.$emit('click-right', event);
  100. }
  101. },
  102. render: function render() {
  103. var h = arguments[0];
  104. if (this.placeholder && this.fixed) {
  105. return h("div", {
  106. "class": bem('placeholder'),
  107. "style": {
  108. height: this.height + "px"
  109. }
  110. }, [this.genNavBar()]);
  111. }
  112. return this.genNavBar();
  113. }
  114. });