143 lines
3.4 KiB
JavaScript
143 lines
3.4 KiB
JavaScript
"use strict";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _utils = require("../utils");
|
|
|
|
var _constant = require("../utils/constant");
|
|
|
|
var _icon = _interopRequireDefault(require("../icon"));
|
|
|
|
// Utils
|
|
// Components
|
|
var _createNamespace = (0, _utils.createNamespace)('nav-bar'),
|
|
createComponent = _createNamespace[0],
|
|
bem = _createNamespace[1];
|
|
|
|
var _default = createComponent({
|
|
props: {
|
|
title: String,
|
|
fixed: Boolean,
|
|
zIndex: [Number, String],
|
|
leftText: String,
|
|
rightText: String,
|
|
leftArrow: Boolean,
|
|
placeholder: Boolean,
|
|
safeAreaInsetTop: Boolean,
|
|
border: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data: function data() {
|
|
return {
|
|
height: null
|
|
};
|
|
},
|
|
mounted: function mounted() {
|
|
var _this = this;
|
|
|
|
if (this.placeholder && this.fixed) {
|
|
var setHeight = function setHeight() {
|
|
_this.height = _this.$refs.navBar.getBoundingClientRect().height;
|
|
};
|
|
|
|
setHeight(); // https://github.com/vant-ui/vant/issues/10131
|
|
|
|
setTimeout(setHeight, 100);
|
|
}
|
|
},
|
|
methods: {
|
|
genLeft: function genLeft() {
|
|
var h = this.$createElement;
|
|
var leftSlot = this.slots('left');
|
|
|
|
if (leftSlot) {
|
|
return leftSlot;
|
|
}
|
|
|
|
return [this.leftArrow && h(_icon.default, {
|
|
"class": bem('arrow'),
|
|
"attrs": {
|
|
"name": "arrow-left"
|
|
}
|
|
}), this.leftText && h("span", {
|
|
"class": bem('text')
|
|
}, [this.leftText])];
|
|
},
|
|
genRight: function genRight() {
|
|
var h = this.$createElement;
|
|
var rightSlot = this.slots('right');
|
|
|
|
if (rightSlot) {
|
|
return rightSlot;
|
|
}
|
|
|
|
if (this.rightText) {
|
|
return h("span", {
|
|
"class": bem('text')
|
|
}, [this.rightText]);
|
|
}
|
|
},
|
|
genNavBar: function genNavBar() {
|
|
var _ref;
|
|
|
|
var h = this.$createElement;
|
|
return h("div", {
|
|
"ref": "navBar",
|
|
"style": {
|
|
zIndex: this.zIndex
|
|
},
|
|
"class": [bem({
|
|
fixed: this.fixed,
|
|
'safe-area-inset-top': this.safeAreaInsetTop
|
|
}), (_ref = {}, _ref[_constant.BORDER_BOTTOM] = this.border, _ref)]
|
|
}, [h("div", {
|
|
"class": bem('content')
|
|
}, [this.hasLeft() && h("div", {
|
|
"class": bem('left'),
|
|
"on": {
|
|
"click": this.onClickLeft
|
|
}
|
|
}, [this.genLeft()]), h("div", {
|
|
"class": [bem('title'), 'van-ellipsis']
|
|
}, [this.slots('title') || this.title]), this.hasRight() && h("div", {
|
|
"class": bem('right'),
|
|
"on": {
|
|
"click": this.onClickRight
|
|
}
|
|
}, [this.genRight()])])]);
|
|
},
|
|
hasLeft: function hasLeft() {
|
|
return this.leftArrow || this.leftText || this.slots('left');
|
|
},
|
|
hasRight: function hasRight() {
|
|
return this.rightText || this.slots('right');
|
|
},
|
|
onClickLeft: function onClickLeft(event) {
|
|
this.$emit('click-left', event);
|
|
},
|
|
onClickRight: function onClickRight(event) {
|
|
this.$emit('click-right', event);
|
|
}
|
|
},
|
|
render: function render() {
|
|
var h = arguments[0];
|
|
|
|
if (this.placeholder && this.fixed) {
|
|
return h("div", {
|
|
"class": bem('placeholder'),
|
|
"style": {
|
|
height: this.height + "px"
|
|
}
|
|
}, [this.genNavBar()]);
|
|
}
|
|
|
|
return this.genNavBar();
|
|
}
|
|
});
|
|
|
|
exports.default = _default; |