| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 | // Utilsimport { createNamespace } from '../utils';import { BORDER_BOTTOM } from '../utils/constant'; // Componentsimport Icon from '../icon';var _createNamespace = createNamespace('nav-bar'),    createComponent = _createNamespace[0],    bem = _createNamespace[1];export 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, {        "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[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();  }});
 |