{"remainingRequest":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\layout\\navMenu\\horizontal.vue?vue&type=style&index=0&id=b7124ca6&scoped=true&lang=scss","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\layout\\navMenu\\horizontal.vue","mtime":1761185180057},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQo6OnYtZGVlcCAuZWwtc2Nyb2xsYmFyX19iYXIuaXMtaG9yaXpvbnRhbCB7DQogIGhlaWdodDogMDsNCn0NCi5lbC1tZW51LWhvcml6b250YWwtd2FycCB7DQogIGZsZXg6IDE7DQogIG92ZXJmbG93OiBoaWRkZW47DQogIG1hcmdpbi1yaWdodDogMzBweDsNCiAgOjp2LWRlZXAgLmVsLXNjcm9sbGJhcl9fYmFyLmlzLXZlcnRpY2FsIHsNCiAgICBkaXNwbGF5OiBub25lOw0KICB9DQogIDo6di1kZWVwIC5lbC1zY3JvbGxiYXJfX3dyYXAgew0KICAgIG92ZXJmbG93LXk6IGhpZGRlbiAhaW1wb3J0YW50Ow0KICB9DQogIDo6di1kZWVwYSB7DQogICAgd2lkdGg6IDEwMCU7DQogIH0NCiAgLmVsLW1lbnUuZWwtbWVudS0taG9yaXpvbnRhbCB7DQogICAgZGlzcGxheTogZmxleDsNCiAgICBoZWlnaHQ6IDEwMCU7DQogICAgd2lkdGg6IDEwMCU7DQogICAgYm94LXNpemluZzogYm9yZGVyLWJveDsNCiAgfQ0KfQ0K"},{"version":3,"sources":["horizontal.vue"],"names":[],"mappings":";AAgIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"horizontal.vue","sourceRoot":"src/layout/navMenu","sourcesContent":["<template>\r\n  <div class=\"el-menu-horizontal-warp\">\r\n    <el-scrollbar @wheel.native.prevent=\"onElMenuHorizontalScroll\" ref=\"elMenuHorizontalScrollRef\">\r\n      <el-menu\r\n        router\r\n        :default-active=\"activePath || defaultActive\"\r\n        background-color=\"transparent\"\r\n        mode=\"horizontal\"\r\n        @select=\"onHorizontalSelect\"\r\n      >\r\n        <template v-for=\"val in menuList\">\r\n          <el-submenu :index=\"val.path\" v-if=\"val.is_show && val.children && val.children.length > 0\" :key=\"val.path\">\r\n            <template slot=\"title\">\r\n              <!-- <i class=\"ivu-icon\" :class=\"val.icon ? 'el-icon-' + val.icon : ''\"></i> -->\r\n              <span>{{ $t(val.title) }}</span>\r\n            </template>\r\n            <SubItem :chil=\"val.children\" />\r\n          </el-submenu>\r\n          <template v-else-if=\"val.is_show\">\r\n            <el-menu-item :index=\"val.path\" :key=\"val.path\">\r\n              <template slot=\"title\" v-if=\"!val.isLink || (val.isLink && val.isIframe)\">\r\n                <!-- <i class=\"ivu-icon\" :class=\"val.icon ? 'el-icon-' + val.icon : ''\"></i> -->\r\n                {{ $t(val.title) }}\r\n              </template>\r\n              <template slot=\"title\" v-else>\r\n                <a :href=\"val.isLink\" target=\"_blank\">\r\n                  <Icon :type=\"val.icon ? val.icon : ''\" />\r\n                  {{ $t(val.title) }}\r\n                </a>\r\n              </template>\r\n            </el-menu-item>\r\n          </template>\r\n        </template>\r\n      </el-menu>\r\n    </el-scrollbar>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport SubItem from '@/layout/navMenu/subItem.vue';\r\nimport { mapState } from 'vuex';\r\nexport default {\r\n  name: 'navMenuHorizontal',\r\n  components: { SubItem },\r\n  props: {\r\n    menuList: {\r\n      type: Array,\r\n      default: () => [],\r\n    },\r\n  },\r\n  computed: {\r\n    ...mapState('menu', ['activePath']),\r\n  },\r\n  data() {\r\n    return {\r\n      defaultActive: null,\r\n    };\r\n  },\r\n  mounted() {\r\n    this.initElMenuOffsetLeft();\r\n    this.setCurrentRouterHighlight(this.$route.path);\r\n  },\r\n  methods: {\r\n    // 设置横向滚动条可以鼠标滚轮滚动\r\n    onElMenuHorizontalScroll(e) {\r\n      const eventDelta = e.wheelDelta || -e.deltaY * 40;\r\n      this.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft =\r\n        this.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft + eventDelta / 4;\r\n    },\r\n    // 初始化数据，页面刷新时，滚动条滚动到对应位置\r\n    initElMenuOffsetLeft() {\r\n      this.$nextTick(() => {\r\n        let els = document.querySelector('.el-menu.el-menu--horizontal li.is-active');\r\n        if (!els) return false;\r\n        this.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft = els.offsetLeft;\r\n      });\r\n    },\r\n    // 路由过滤递归函数\r\n    filterRoutesFun(arr) {\r\n      return arr\r\n        .filter((item) => !item.isHide)\r\n        .map((item) => {\r\n          item = Object.assign({}, item);\r\n          if (item.children) item.children = this.filterRoutesFun(item.children);\r\n          return item;\r\n        });\r\n    },\r\n    // 传送当前子级数据到菜单中\r\n    setSendClassicChildren(path) {\r\n      const currentPathSplit = path.split('/');\r\n      let currentData = {};\r\n      this.filterRoutesFun(this.$store.state.routesList.routesList).map((v, k) => {\r\n        if (v.path === `/${currentPathSplit[1]}`) {\r\n          v['k'] = k;\r\n          currentData['item'] = [{ ...v }];\r\n          currentData['children'] = [{ ...v }];\r\n          if (v.children) currentData['children'] = v.children;\r\n        }\r\n      });\r\n      return currentData;\r\n    },\r\n    // 菜单激活回调\r\n    onHorizontalSelect(path) {\r\n      this.bus.$emit('setSendClassicChildren', this.setSendClassicChildren(path));\r\n    },\r\n    // 设置页面当前路由高亮\r\n    setCurrentRouterHighlight(path) {\r\n      const currentPathSplit = path.split('/');\r\n      if (this.$store.state.themeConfig.themeConfig.layout === 'classic') {\r\n        this.defaultActive = `/${currentPathSplit[1]}`;\r\n      } else {\r\n        this.defaultActive = path;\r\n      }\r\n    },\r\n  },\r\n  watch: {\r\n    // 监听路由的变化\r\n    $route: {\r\n      handler(to) {\r\n        this.setCurrentRouterHighlight(to.path);\r\n      },\r\n      deep: true,\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n::v-deep .el-scrollbar__bar.is-horizontal {\r\n  height: 0;\r\n}\r\n.el-menu-horizontal-warp {\r\n  flex: 1;\r\n  overflow: hidden;\r\n  margin-right: 30px;\r\n  ::v-deep .el-scrollbar__bar.is-vertical {\r\n    display: none;\r\n  }\r\n  ::v-deep .el-scrollbar__wrap {\r\n    overflow-y: hidden !important;\r\n  }\r\n  ::v-deepa {\r\n    width: 100%;\r\n  }\r\n  .el-menu.el-menu--horizontal {\r\n    display: flex;\r\n    height: 100%;\r\n    width: 100%;\r\n    box-sizing: border-box;\r\n  }\r\n}\r\n</style>\r\n"]}]}