~~~ <script> import render from "./render"; export default { name: "ErsMenu", mixins: [render], data() { return {}; }, props: { // 可选 "dark" "light" theme: { type: String, default: () => "light" }, // 使用对象哪个字段当作标识(用于高亮、折叠、路由跳转) nameType: { type: String, default: () => "name" }, // 是否需要返回选中的item对象字符串 returnObjStr: { type: Boolean, default: () => false }, // 菜单数据 menuData: { type: Array, default: () => [] }, // 高亮标识 activeName: { type: [String, Number], default: () => "" }, // 折叠标识 openNames: { type: Array, default: () => [] } }, watch: { // 异步获取数据更新时，需要进行高亮、展开节点更新 // 无须 <NrMenu v-if="menuData.length !== 0"/> 这种写法 menuData() { this.$nextTick(() => { this.$refs.menu.updateActiveName(); this.$refs.menu.updateOpened(); }); }, activeName(value) { // 手动更新 // 参考：https://www.iviewui.com/components/menu#Menu_methods this.$nextTick(() => { this.$refs.menu.updateActiveName(); }); }, openNames(value) { // 手动更新 // 参考：https://www.iviewui.com/components/menu#Menu_methods this.$nextTick(() => { this.$refs.menu.updateOpened(); }); } }, methods: { selectMenuItem(name) { // 选中事件 // @arg 返回对应的标识 this.$emit("on-select", name); }, hasChild(item) { return item.children && item.children.length !== 0; }, computedName(item) { const type = this.nameType; return item[type]; }, handleAdd(e, item) { e.stopPropagation(); this.$emit("on-add", item); } } }; </script> <style scoped lang="scss"> // 背景颜色 $mBgColor: #f8f8f8; $mBglightColor: #f8f8f8; // 选中颜色 $mSelectedColor: #1890ff; // 选中背景颜色 $mSelectedBgColor: #222222; $mSelectedBgLightColor: #e6f7ff; // menuItem的字体样式 @mixin menuTitleStyle { font-size: 0.94rem; font-weight: 500; } @mixin center { display: flex; align-items: center; } .ers-menu { .ers-menu-title { width: 60%; @include menuTitleStyle; display: inline-block; // vertical-align: middle; @include ellipsis; } // .point { // float: right; // position: relative; // top: 4px; // margin-right: 8px; // } // 覆盖iview样式 &.ivu-menu { width: 100%; color: #666666; .ers-icon { font-size: 0.83rem; } .iconfont { font-size: 0.94rem; vertical-align: middle; } .ivu-menu-item { @include menuTitleStyle; background: $mBgColor; padding: 0; padding-left: 1.2rem; line-height: 1.88rem; height: 1.88rem; @include center; &.ivu-menu-item-active { &.ivu-menu-item-selected { color: #ffffff; border-right: 2px solid $mSelectedColor; background: $mSelectedBgColor !important; // iview用的important，只能用important覆盖 &:hover { background: none; } } } &::after { display: none; } &.ivu-menu-item-disabled { cursor: not-allowed; opacity: 0.4; &:hover { color: inherit; } } } .ivu-menu-submenu { /deep/ .ivu-menu-submenu-title { position: relative; background: none; padding: 0; padding-left: 1.2rem; height: 2.5rem; line-height: 2.5rem; @include center; .ivu-menu-submenu-title-icon { top: 50%; transform: translateY(-50%); } } // &.ivu-menu-child-item-active { // /deep/ .ivu-menu-submenu-title { // color: $colorffffff; // } // } } &.ivu-menu-vertical { &.ivu-menu-light:after { width: 0; } } &.ivu-menu-dark { background: none; } .menu-add-btn { position: absolute; right: 50px; } } // 解决icon换行问题 /deep/ .ivu-menu-submenu-title-icon { position: absolute; right: 16px; top: 18px; } } // light主题样式 .ers-menu.ers-menu-light { .ivu-menu-item { background: $mBglightColor; &.ivu-menu-item-active { &.ivu-menu-item-selected { color: #1d1d1d; border-right: 2px solid $mSelectedColor; background: $mSelectedBgLightColor !important; // iview用的important，只能用important覆盖 &:hover { background: none; } } } } .ivu-menu-submenu { background: $mBglightColor; // &.ivu-menu-child-item-active { // /deep/ .ivu-menu-submenu-title { // color: $color666666; // } // } } } </style> ~~~