209 lines
5.2 KiB
JavaScript
209 lines
5.2 KiB
JavaScript
"use strict";
|
|
const common_vendor = require("../../common/vendor.js");
|
|
const _sfc_main = {
|
|
name: "uniNavMenu",
|
|
props: {
|
|
data: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
// 模式 可选值 horizontal / vertical
|
|
mode: {
|
|
type: String,
|
|
default: "vertical"
|
|
},
|
|
// 是否水平折叠收起菜单(仅在 mode 为 vertical 时可用)
|
|
collapse: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 菜单的背景色
|
|
backgroundColor: {
|
|
type: String,
|
|
default: "#fff"
|
|
},
|
|
// 菜单的文字颜色
|
|
textColor: {
|
|
type: String,
|
|
default: "#303133"
|
|
},
|
|
// 当前激活菜单的文字颜色
|
|
activeTextColor: {
|
|
type: String,
|
|
default: "#42B983"
|
|
},
|
|
// 当前激活菜单的背景色
|
|
activeBackgroundColor: {
|
|
type: String,
|
|
default: "inherit"
|
|
},
|
|
// 如果 index 为 Object ,需要指定选中字段的名称
|
|
activeKey: {
|
|
type: String,
|
|
default: "id"
|
|
},
|
|
// 当前激活菜单的 index
|
|
active: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
// 当前打开的 sub-menu 的 index 的数组
|
|
defaultOpeneds: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
// 是否只保持一个子菜单的展开
|
|
uniqueOpened: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// TODO 子菜单打开的触发方式(只在 mode 为 horizontal 时有效) ,可选值 hover / click
|
|
menuTrigger: {
|
|
type: String,
|
|
default: "hover"
|
|
},
|
|
router: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 是否开启折叠动画
|
|
collapseTransition: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
activeIndex: this.active
|
|
};
|
|
},
|
|
watch: {
|
|
active(newVal) {
|
|
this.activeIndex = newVal;
|
|
},
|
|
activeIndex(newVal, oldVal) {
|
|
if (this.itemChildrens.length > 0) {
|
|
let isActive = false;
|
|
for (let i = 0; i < this.itemChildrens.length; i++) {
|
|
const item = this.itemChildrens[i];
|
|
isActive = this.isActive(item);
|
|
if (isActive)
|
|
break;
|
|
}
|
|
if (!isActive) {
|
|
this.closeAll();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.itemChildrens = [];
|
|
this.subChildrens = [];
|
|
},
|
|
methods: {
|
|
// menu 菜单激活回调
|
|
select(key, keyPath) {
|
|
this.$emit("select", key, keyPath);
|
|
},
|
|
// sub-menu 展开的回调
|
|
open(key, keyPath) {
|
|
this.$emit("open", key, keyPath);
|
|
},
|
|
// sub-menu 收起的回调
|
|
close(key, keyPath) {
|
|
this.$emit("close", key, keyPath);
|
|
},
|
|
// 判断当前选中,只有初始值会使用
|
|
isActive(subItem) {
|
|
let active = "";
|
|
let isActive = false;
|
|
if (typeof subItem.index === "object") {
|
|
active = subItem.index[this.activeKey] || "";
|
|
} else {
|
|
active = subItem.index;
|
|
}
|
|
if (subItem.index && this.activeIndex === active) {
|
|
isActive = true;
|
|
subItem.$subMenu.forEach((item, index) => {
|
|
if (!item.disabled && !subItem.disabled) {
|
|
subItem.indexPath.push(item.index);
|
|
item.isOpen = true;
|
|
}
|
|
});
|
|
if (!subItem.active) {
|
|
subItem.onClickItem("init");
|
|
}
|
|
}
|
|
return isActive;
|
|
},
|
|
// 打开关闭 sunMenu
|
|
selectMenu(subMenu) {
|
|
this.subChildrens.forEach((item, index) => {
|
|
if (item === subMenu) {
|
|
subMenu.isOpen = !subMenu.isOpen;
|
|
subMenu.indexPath.push(subMenu.index);
|
|
} else {
|
|
if (item.isOpen && this.uniqueOpened)
|
|
item.isOpen = false;
|
|
}
|
|
});
|
|
subMenu.$subMenu.forEach((sub, idx) => {
|
|
sub.isOpen = true;
|
|
subMenu.indexPath.unshift(sub.index);
|
|
});
|
|
if (subMenu.isOpen) {
|
|
this.open(subMenu.indexPath[subMenu.indexPath.length - 1], subMenu.indexPath);
|
|
} else {
|
|
this.close(subMenu.indexPath[subMenu.indexPath.length - 1], subMenu.indexPath);
|
|
}
|
|
subMenu.indexPath = [];
|
|
},
|
|
// 关闭其他选中
|
|
closeOtherActive(itemMenu) {
|
|
itemMenu.indexPath = [];
|
|
itemMenu.$subMenu.forEach((item) => {
|
|
if (!item.disabled) {
|
|
itemMenu.indexPath.push(item.index);
|
|
}
|
|
});
|
|
this.itemChildrens.map((item) => {
|
|
if (item.active) {
|
|
item.active = false;
|
|
}
|
|
return item;
|
|
});
|
|
},
|
|
// 关闭所有
|
|
closeAll() {
|
|
this.subChildrens.forEach((item) => {
|
|
if (item.isOpen) {
|
|
item.isOpen = false;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
if (!Array) {
|
|
const _easycom_uni_menu_sidebar2 = common_vendor.resolveComponent("uni-menu-sidebar");
|
|
_easycom_uni_menu_sidebar2();
|
|
}
|
|
const _easycom_uni_menu_sidebar = () => "../uni-menu-sidebar/uni-menu-sidebar.js";
|
|
if (!Math) {
|
|
_easycom_uni_menu_sidebar();
|
|
}
|
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return {
|
|
a: common_vendor.p({
|
|
data: $props.data
|
|
}),
|
|
b: $props.backgroundColor
|
|
};
|
|
}
|
|
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
wx.createComponent(Component);
|
|
//# sourceMappingURL=../../../.sourcemap/mp-weixin/components/uni-nav-menu/uni-nav-menu.js.map
|