cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
331 lines (330 loc) • 11 kB
JavaScript
import { defineComponent, ref, computed, watch, onMounted, toRefs, openBlock, createElementBlock, createElementVNode, normalizeStyle, withDirectives, vShow, normalizeClass, Fragment, renderList, toDisplayString } from "vue";
import { handleComponetEvent, handlePushEvent } from "../tools.mjs";
import FiveSubMenuBg from "./images/five.mjs";
import NineSubMenuBg from "./images/nine.mjs";
import TenSubMenuBg from "./images/ten.mjs";
import "./index.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = defineComponent({
name: "CoNavSemicircle",
props: {
dataSource: {
type: Object
},
dataKey: {
type: String
},
fontFamily: {
type: String
},
firstNavFontSize: {
type: Number
},
secondNavFontSize: {
type: Number
},
centerTextFontSize: {
type: Number
},
defaultColor: {
type: String
},
activeColor: {
type: String
},
menuImgSrc: {
type: String
},
subMenuImgSrc: {
type: Array
},
isCenterTextShow: {
type: Boolean
}
},
setup(props, { emit }) {
const dataMenu = ref([]);
const dataSubMenu = ref([]);
const isOpen = ref(false);
const isSubOpen = ref(true);
const activeMenuIndex = ref(0);
const activeSubMenuIndex = ref(0);
const classType = ref(0);
const ensureSubOpen = () => {
if (props.dataSource.data.length === 8) {
if (props.dataSource.data[activeMenuIndex.value].title === "\u4E94\u5927\u632F\u5174") {
setSubMenu(activeMenuIndex.value);
isSubOpen.value = true;
} else {
dataSubMenu.value.length = 0;
isSubOpen.value = false;
}
return true;
} else {
return false;
}
};
const clickDouble = (index) => {
if (activeMenuIndex.value === index) {
return true;
} else {
activeMenuIndex.value = index;
isSubOpen.value = true;
return false;
}
};
const navHandler = () => {
const params = getParams();
handleComponetEvent(props.dataKey, "click", params);
handlePushEvent({
key: "CoNavSemicircle",
elementId: props.dataKey,
event: "click",
data: params
});
};
const subHandler = (index) => {
activeMenuIndex.value;
if (dataMenu.value[index].enableClick && dataMenu.value[index].enableClick === "false")
return;
let isClickSecond = clickDouble(index);
if (ensureSubOpen()) {
handleComponetEvent(props.dataKey, "click", {
index: activeMenuIndex.value,
subIndex: dataSubMenu.value.length ? activeSubMenuIndex.value : -1,
...dataMenu.value[activeMenuIndex.value],
...dataSubMenu.value[activeSubMenuIndex.value]
});
handlePushEvent({
key: "CoNavSemicircle",
elementId: props.dataKey,
event: "click",
data: {
index: activeMenuIndex.value,
subIndex: dataSubMenu.value.length ? activeSubMenuIndex.value : -1,
...dataMenu.value[activeMenuIndex.value],
...dataSubMenu.value[activeSubMenuIndex.value]
}
});
} else {
setSubMenu(activeMenuIndex.value);
isSubOpen.value = !isSubOpen.value;
if (!isClickSecond) {
activeSubMenuIndex.value = 0;
dispatchEventMenu();
let timer = setTimeout(() => {
isSubOpen.value = !isSubOpen.value;
window.clearTimeout(timer);
}, 300);
} else {
dispatchEventMenu();
}
}
};
const dispatchEventMenu = () => {
const params = getParams();
handleComponetEvent(props.dataKey, "click", params);
handlePushEvent({
key: "CoNavSemicircle",
elementId: props.dataKey,
event: "click",
data: params
});
};
const dispatchAction = (index) => {
let tempIndex = activeSubMenuIndex.value;
activeSubMenuIndex.value = index;
const params = getParams();
if (params.enableClick && params.enableClick === "false") {
activeSubMenuIndex.value = tempIndex;
return;
}
handleComponetEvent(props.dataKey, "click", params);
handlePushEvent({
key: "CoNavSemicircle",
elementId: props.dataKey,
event: "click",
data: params
});
};
const getParams = () => {
return {
index: activeMenuIndex.value,
subIndex: activeSubMenuIndex.value,
...dataMenu.value[activeMenuIndex.value],
...dataSubMenu.value[activeSubMenuIndex.value]
};
};
const setMenu = () => {
classType.value = `class${props.dataSource.data.length}`;
dataMenu.value = [];
props.dataSource.data.forEach((item, i) => {
dataMenu.value.push({
title: item.title,
enableClick: item.enableClick
});
});
};
const setSubMenu = (index = 0) => {
if (!props.dataSource.data[index].items.length)
return;
const content = props.dataSource.data.length === 8 ? `content${index - index}` : `content${index}`;
dataSubMenu.value = [];
props.dataSource.data[index].items.forEach((item, i) => {
dataSubMenu.value.push({
...item,
content
});
});
};
const menuBg = computed(() => {
return {
backgroundImage: "url(" + props.menuImgSrc + ")"
};
});
const subMenuBg = computed(() => {
if (props.subMenuImgSrc && !props.subMenuImgSrc[0].title) {
props.subMenuImgSrc.length = 0;
props.subMenuImgSrc.push(FiveSubMenuBg, NineSubMenuBg, TenSubMenuBg);
}
if (ensureSubOpen()) {
let imgUrl = props.subMenuImgSrc[0];
return {
backgroundImage: "url(" + imgUrl + ")"
};
} else {
let imgUrl = props.subMenuImgSrc[activeMenuIndex.value].imgSrc ? props.subMenuImgSrc[activeMenuIndex.value].imgSrc : props.subMenuImgSrc[activeMenuIndex.value];
return {
backgroundImage: "url(" + imgUrl + ")"
};
}
});
watch(
() => props.dataSource,
() => {
setMenu();
setSubMenu();
},
{
deep: true
}
);
onMounted(() => {
setMenu();
setSubMenu();
});
return {
dataMenu,
dataSubMenu,
isOpen,
isSubOpen,
activeMenuIndex,
activeSubMenuIndex,
menuBg,
subMenuBg,
classType,
navHandler,
subHandler,
dispatchAction,
...toRefs(props)
};
}
});
const _hoisted_1 = { class: "co-nav-semicircle" };
const _hoisted_2 = { class: "container" };
const _hoisted_3 = ["onClick"];
const _hoisted_4 = ["onClick"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("section", _hoisted_1, [
createElementVNode("div", {
class: "btn-open",
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.navHandler && _ctx.navHandler(...args)),
style: normalizeStyle({ fontSize: _ctx.centerTextFontSize + "px" })
}, [
withDirectives(createElementVNode("span", null, "\u653F\u7B56\u8BE6\u60C5", 512), [
[vShow, _ctx.isCenterTextShow]
])
], 4),
createElementVNode("div", _hoisted_2, [
createElementVNode("div", {
class: normalizeClass(["globalmenu", { isSubOpen: _ctx.isOpen }])
}, [
createElementVNode("div", {
class: "menu-inner",
style: normalizeStyle(_ctx.menuBg)
}, null, 4),
createElementVNode("div", {
class: "menu-mid",
style: normalizeStyle(_ctx.menuBg)
}, [
createElementVNode("div", {
class: normalizeClass([_ctx.classType, "active" + _ctx.activeMenuIndex])
}, null, 2),
createElementVNode("ul", null, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.dataMenu, (menu, index) => {
return openBlock(), createElementBlock("li", {
key: menu.title,
class: normalizeClass([_ctx.classType]),
onClick: ($event) => _ctx.subHandler(index)
}, [
createElementVNode("a", {
class: normalizeClass(menu.enableClick === "false" ? "enable" : "")
}, [
createElementVNode("span", {
class: normalizeClass([menu.enableClick === "false" ? "enable-color" : ""]),
style: normalizeStyle([
{ color: _ctx.activeMenuIndex === index ? _ctx.activeColor : _ctx.defaultColor },
{ fontSize: _ctx.firstNavFontSize + "px" }
])
}, toDisplayString(menu.title), 7)
], 2)
], 10, _hoisted_3);
}), 128))
])
], 4),
createElementVNode("div", {
class: "menu-mid-boder",
style: normalizeStyle(_ctx.menuBg)
}, null, 4),
createElementVNode("div", {
class: "menu-outer",
style: normalizeStyle(_ctx.menuBg)
}, null, 4)
], 2),
createElementVNode("div", {
class: normalizeClass(["submenu", { "opened-nav": _ctx.isSubOpen }]),
style: normalizeStyle(_ctx.subMenuBg)
}, [
createElementVNode("div", {
class: normalizeClass([
"menu" + (_ctx.dataMenu.length === 8 ? _ctx.activeMenuIndex - _ctx.activeMenuIndex : _ctx.activeMenuIndex),
"active" + _ctx.activeSubMenuIndex
])
}, null, 2),
createElementVNode("ul", null, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.dataSubMenu, (submenu, index) => {
return openBlock(), createElementBlock("li", {
key: submenu.subTitle,
class: normalizeClass([submenu.content]),
onClick: ($event) => _ctx.dispatchAction(index)
}, [
createElementVNode("a", {
class: normalizeClass(submenu.enableClick === "false" ? "enable" : "")
}, [
createElementVNode("span", {
style: normalizeStyle([
{ color: _ctx.activeSubMenuIndex === index ? _ctx.activeColor : _ctx.defaultColor },
{ fontSize: _ctx.secondNavFontSize + "px" }
]),
class: normalizeClass([submenu.enableClick === "false" ? "enable-color" : ""])
}, toDisplayString(submenu.subTitle), 7)
], 2)
], 10, _hoisted_4);
}), 128))
])
], 6)
])
]);
}
var NavSemicircle = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e18c3306"]]);
export { NavSemicircle as default };