@cqmcui/cqmcui
Version:
轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
212 lines (211 loc) • 7.46 kB
JavaScript
import { toRefs, ref, computed, onMounted, nextTick, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, renderSlot, createVNode, createCommentVNode, toDisplayString } from "vue";
import { c as createComponent } from "./component-81a4c1d0.js";
import { Left } from "@cqmcui/icons-vue";
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 },
//中间
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);
const navBarWrap = ref(null);
const navBarHtml = ref(null);
let navHeight = ref();
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) {
nextTick(() => {
var _a;
navHeight.value = (_a = navBarHtml == null ? void 0 : navBarHtml.value) == null ? void 0 : _a.getBoundingClientRect().height;
navBarWrap.value.style.height = navHeight.value + "px";
});
}
});
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 {
navBarWrap,
navBarHtml,
classes,
styles,
handleLeft,
handleCenter,
handleCenterIcon,
handleRight
};
}
});
const _hoisted_1 = {
key: 0,
class: "cqmc-navbar--placeholder",
ref: "navBarWrap"
};
const _hoisted_2 = {
key: 1,
class: "cqmc-navbar__text"
};
const _hoisted_3 = { class: "cqmc-navbar__title" };
const _hoisted_4 = {
key: 0,
class: "cqmc-navbar__text"
};
const _hoisted_5 = {
key: 1,
class: "cqmc-navbar__text"
};
const _hoisted_6 = { class: "cqmc-navbar__title" };
const _hoisted_7 = {
key: 0,
class: "cqmc-navbar__text"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_Left = resolveComponent("Left");
return _ctx.fixed && _ctx.placeholder ? (openBlock(), createElementBlock("view", _hoisted_1, [
createElementVNode("view", {
class: normalizeClass(_ctx.classes),
style: normalizeStyle(_ctx.styles),
ref: "navBarHtml"
}, [
createElementVNode("view", {
class: "cqmc-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),
_ctx.leftText ? (openBlock(), createElementBlock("view", _hoisted_2, toDisplayString(_ctx.leftText), 1)) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "left")
]),
createElementVNode("view", _hoisted_3, [
_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),
_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),
renderSlot(_ctx.$slots, "content")
]),
createElementVNode("view", {
class: "cqmc-navbar__right",
onClick: _cache[4] || (_cache[4] = (...args) => _ctx.handleRight && _ctx.handleRight(...args))
}, [
_ctx.desc ? (openBlock(), createElementBlock("view", _hoisted_4, toDisplayString(_ctx.desc), 1)) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "right")
])
], 6)
], 512)) : (openBlock(), createElementBlock("view", {
key: 1,
class: normalizeClass(_ctx.classes),
style: normalizeStyle(_ctx.styles)
}, [
createElementVNode("view", {
class: "cqmc-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),
_ctx.leftText ? (openBlock(), createElementBlock("view", _hoisted_5, toDisplayString(_ctx.leftText), 1)) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "left")
]),
createElementVNode("view", _hoisted_6, [
_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),
_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),
renderSlot(_ctx.$slots, "content")
]),
createElementVNode("view", {
class: "cqmc-navbar__right",
onClick: _cache[9] || (_cache[9] = (...args) => _ctx.handleRight && _ctx.handleRight(...args))
}, [
_ctx.desc ? (openBlock(), createElementBlock("view", _hoisted_7, toDisplayString(_ctx.desc), 1)) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "right")
])
], 6));
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
index as default
};