~~~ <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> ~~~