@gyenno/nutui-taro/dist/packages/_es/Navbar.js

京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）

import { toRefs, ref, computed, onMounted, resolveComponent, openBlock, createElementBlock, normalizeStyle, createElementVNode, normalizeClass, renderSlot, createVNode, createCommentVNode, createTextVNode, toDisplayString } from "vue";
import { c as createComponent } from "./component-25dcca32.js";
import Taro from "@tarojs/taro";
import { Left } from "@nutui/icons-vue-taro";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
const { componentName, create } = createComponent("navbar");
const _sfc_main = create({
  components: { Left },
  props: {
    leftShow: { type: Boolean, default: false },
    //左侧  是否显示返回icon
    title: { type: String, default: "" },
    //中间  文字标题
    titleIcon: { type: Boolean, default: false },
    //中间  标题icon
    leftText: { type: String, default: "" },
    //左侧文字
    desc: { type: String, default: "" },
    //右侧   按钮文字
    fixed: {
      type: Boolean,
      default: false
    },
    safeAreaInsetTop: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    },
    placeholder: {
      // 生成一个等高的占位元素
      type: Boolean,
      default: true
    },
    zIndex: {
      type: [Number, String],
      default: 10
    }
  },
  emits: ["on-click-back", "on-click-title", "on-click-icon", "on-click-right"],
  setup(props, { emit }) {
    const { border, fixed, safeAreaInsetTop, placeholder, zIndex } = toRefs(props);
    let navHeight = ref(0);
    const classes = computed(() => {
      const prefixCls = componentName;
      return {
        [prefixCls]: true,
        [`${prefixCls}--border`]: border.value,
        [`${prefixCls}--fixed`]: fixed.value,
        [`${prefixCls}--safe-area-inset-top`]: safeAreaInsetTop.value
      };
    });
    const styles = computed(() => {
      return {
        zIndex: zIndex.value
      };
    });
    onMounted(() => {
      if (fixed.value && placeholder.value) {
        setTimeout(() => {
          const query = Taro.createSelectorQuery();
          query.select(".navBarHtml").boundingClientRect();
          query.exec((res) => {
            navHeight.value = res[0].height;
          });
        }, 500);
      }
    });
    function handleLeft() {
      emit("on-click-back");
    }
    function handleCenter() {
      emit("on-click-title");
    }
    function handleCenterIcon() {
      emit("on-click-icon");
    }
    function handleRight() {
      emit("on-click-right");
    }
    return {
      navHeight,
      classes,
      styles,
      handleLeft,
      handleCenter,
      handleCenterIcon,
      handleRight
    };
  }
});
const _hoisted_1 = {
  key: 1,
  class: "nut-navbar__text"
};
const _hoisted_2 = { class: "nut-navbar__title" };
const _hoisted_3 = {
  key: 0,
  class: "nut-navbar__text"
};
const _hoisted_4 = {
  key: 1,
  class: "nut-navbar__text"
};
const _hoisted_5 = { class: "nut-navbar__title" };
const _hoisted_6 = {
  key: 0,
  class: "nut-navbar__text"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_Left = resolveComponent("Left");
  return _ctx.fixed && _ctx.placeholder ? (openBlock(), createElementBlock("view", {
    key: 0,
    class: "nut-navbar--placeholder",
    style: normalizeStyle({ height: _ctx.navHeight + "px" })
  }, [
    createElementVNode("view", {
      class: normalizeClass([_ctx.classes, "navBarHtml"]),
      style: normalizeStyle(_ctx.styles)
    }, [
      createElementVNode("view", {
        class: "nut-navbar__left",
        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleLeft && _ctx.handleLeft(...args))
      }, [
        _ctx.leftShow ? renderSlot(_ctx.$slots, "left-show", { key: 0 }, () => [
          createVNode(_component_Left, {
            height: "12px",
            color: "#979797"
          })
        ]) : createCommentVNode("", true),
        createTextVNode(),
        _ctx.leftText ? (openBlock(), createElementBlock("view", _hoisted_1, toDisplayString(_ctx.leftText), 1)) : createCommentVNode("", true),
        createTextVNode(),
        renderSlot(_ctx.$slots, "left")
      ]),
      createTextVNode(),
      createElementVNode("view", _hoisted_2, [
        _ctx.title ? (openBlock(), createElementBlock("view", {
          key: 0,
          class: "title",
          onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleCenter && _ctx.handleCenter(...args))
        }, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
        createTextVNode(),
        _ctx.titleIcon ? (openBlock(), createElementBlock("view", {
          key: 1,
          class: "icon",
          onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleCenterIcon && _ctx.handleCenterIcon(...args))
        }, [
          renderSlot(_ctx.$slots, "title-icon", {
            onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleCenterIcon && _ctx.handleCenterIcon(...args))
          })
        ])) : createCommentVNode("", true),
        createTextVNode(),
        renderSlot(_ctx.$slots, "content")
      ]),
      createTextVNode(),
      createElementVNode("view", {
        class: "nut-navbar__right",
        onClick: _cache[4] || (_cache[4] = (...args) => _ctx.handleRight && _ctx.handleRight(...args))
      }, [
        _ctx.desc ? (openBlock(), createElementBlock("view", _hoisted_3, toDisplayString(_ctx.desc), 1)) : createCommentVNode("", true),
        createTextVNode(),
        renderSlot(_ctx.$slots, "right")
      ])
    ], 6)
  ], 4)) : (openBlock(), createElementBlock("view", {
    key: 1,
    class: normalizeClass(_ctx.classes),
    style: normalizeStyle(_ctx.styles)
  }, [
    createElementVNode("view", {
      class: "nut-navbar__left",
      onClick: _cache[5] || (_cache[5] = (...args) => _ctx.handleLeft && _ctx.handleLeft(...args))
    }, [
      _ctx.leftShow ? renderSlot(_ctx.$slots, "left-show", { key: 0 }, () => [
        createVNode(_component_Left, {
          height: "12px",
          color: "#979797"
        })
      ]) : createCommentVNode("", true),
      createTextVNode(),
      _ctx.leftText ? (openBlock(), createElementBlock("view", _hoisted_4, toDisplayString(_ctx.leftText), 1)) : createCommentVNode("", true),
      createTextVNode(),
      renderSlot(_ctx.$slots, "left")
    ]),
    createTextVNode(),
    createElementVNode("view", _hoisted_5, [
      _ctx.title ? (openBlock(), createElementBlock("view", {
        key: 0,
        class: "title",
        onClick: _cache[6] || (_cache[6] = (...args) => _ctx.handleCenter && _ctx.handleCenter(...args))
      }, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
      createTextVNode(),
      _ctx.titleIcon ? (openBlock(), createElementBlock("view", {
        key: 1,
        class: "icon",
        onClick: _cache[8] || (_cache[8] = (...args) => _ctx.handleCenterIcon && _ctx.handleCenterIcon(...args))
      }, [
        renderSlot(_ctx.$slots, "title-icon", {
          onClick: _cache[7] || (_cache[7] = (...args) => _ctx.handleCenterIcon && _ctx.handleCenterIcon(...args))
        })
      ])) : createCommentVNode("", true),
      createTextVNode(),
      renderSlot(_ctx.$slots, "content")
    ]),
    createTextVNode(),
    createElementVNode("view", {
      class: "nut-navbar__right",
      onClick: _cache[9] || (_cache[9] = (...args) => _ctx.handleRight && _ctx.handleRight(...args))
    }, [
      _ctx.desc ? (openBlock(), createElementBlock("view", _hoisted_6, toDisplayString(_ctx.desc), 1)) : createCommentVNode("", true),
      createTextVNode(),
      renderSlot(_ctx.$slots, "right")
    ])
  ], 6));
}
const index_taro = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  index_taro as default
};