@cqmcui/cqmcui
Version:
轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
131 lines (130 loc) • 4.59 kB
JavaScript
import { c as createComponent } from "./component-81a4c1d0.js";
import { r as renderIcon } from "./renderIcon-3d0fd47c.js";
import { inject, reactive, getCurrentInstance, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createVNode, normalizeProps, guardReactiveProps, withCtx, createElementVNode, renderSlot, createCommentVNode, createBlock, resolveDynamicComponent, toDisplayString } from "vue";
import { u as useRouter } from "./index-54d03fc1.js";
import Badge from "./Badge.js";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
const { create } = createComponent("tabbar-item");
const _sfc_main = create({
components: { [Badge.name]: Badge },
props: {
tabTitle: {
// 标签页的标题
type: String,
default: ""
},
name: {
type: String
},
icon: {
// 标签页显示的icon
type: Object
},
href: {
// 标签页的跳转链接
type: String,
default: ""
},
to: [Object, String]
},
setup(props, { emit, slots }) {
const isHaveSlot = (slot) => {
return slots[slot];
};
const parent = inject("parent");
const state = reactive({
unactiveColor: parent.unactiveColor,
// 未选中的颜色
activeColor: parent.activeColor,
// 选中的颜色
index: 0
});
const router = useRouter();
const relation = (child) => {
if (child.proxy) {
parent.children.push(child.proxy);
const index2 = parent.children.indexOf(child.proxy);
state.index = props.name ?? index2;
}
};
relation(getCurrentInstance());
const active = computed(() => state.index === parent.modelValue);
function change() {
var _a, _b;
let key = props.name ?? state.index;
let indexValue = null;
if (props.name) {
indexValue = parent.children.findIndex((item) => {
return item.name == key;
});
}
parent.changeIndex(indexValue ?? key, state.index);
let index2 = indexValue ?? key;
if ((_a = parent.children[index2]) == null ? void 0 : _a.href) {
window.location.href = parent.children[index2].href;
return;
}
if ((_b = parent.children[index2]) == null ? void 0 : _b.to) {
let to = parent.children[index2].to;
if (to && router) {
router.push(to);
} else {
location.replace(to);
}
}
}
return {
state,
active,
renderIcon,
isHaveSlot,
change
};
}
});
const _hoisted_1 = { class: "cqmc-tabbar-item_icon-box" };
const _hoisted_2 = {
key: 0,
class: "cqmc-tabbar-item_icon-box_icon"
};
const _hoisted_3 = { key: 1 };
const _hoisted_4 = { key: 0 };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_nut_badge = resolveComponent("cqmc-badge");
return openBlock(), createElementBlock("div", {
class: normalizeClass(["cqmc-tabbar-item", { "cqmc-tabbar-item__icon--unactive": !_ctx.active }]),
style: normalizeStyle({
color: _ctx.active ? _ctx.state.activeColor : _ctx.state.unactiveColor
}),
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.change())
}, [
createVNode(_component_nut_badge, normalizeProps(guardReactiveProps(_ctx.$attrs)), {
default: withCtx(() => [
createElementVNode("view", _hoisted_1, [
_ctx.isHaveSlot("icon") ? (openBlock(), createElementBlock("div", _hoisted_2, [
renderSlot(_ctx.$slots, "icon", { active: _ctx.active })
])) : createCommentVNode("", true),
_ctx.icon && !_ctx.isHaveSlot("icon") ? (openBlock(), createElementBlock("view", _hoisted_3, [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.renderIcon(_ctx.icon)), { class: "cqmc-popover-item-img" }))
])) : createCommentVNode("", true),
createElementVNode("view", {
class: normalizeClass([
"cqmc-tabbar-item_icon-box_nav-word",
{ "cqmc-tabbar-item_icon-box_big-word": !_ctx.icon && !_ctx.isHaveSlot("icon") }
])
}, [
renderSlot(_ctx.$slots, "default", {}, () => [
_ctx.tabTitle ? (openBlock(), createElementBlock("view", _hoisted_4, toDisplayString(_ctx.tabTitle), 1)) : createCommentVNode("", true)
])
], 2)
])
]),
_: 3
}, 16)
], 6);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
index as default
};