RouteNavigation.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  1. <template>
  2. <right-click-menu
  3. :mouse-position="mousePosition"
  4. :config="opt"/>
  5. <div class="route_navigation_main"
  6. ref="tagRef">
  7. <div v-for="(item,index) in menuList"
  8. :class="index === currentIndex ? 'active_text item' : 'item'"
  9. :key="index"
  10. @contextmenu.prevent="contextmenuItem(item,index,$event)"
  11. @click="handleRouterPush(item)">
  12. {{ item?.title }}
  13. <el-icon @click.stop.prevent="closeRouter(index,item.path)">
  14. <Close/>
  15. </el-icon>
  16. </div>
  17. <div class="active_box" :style="selectedStyle"/>
  18. </div>
  19. </template>
  20. <script setup lang="ts">
  21. import {ref} from "vue";
  22. import tabsHook from "@/layout/HeaderV2/tabs-hook";
  23. import RightClickMenu from "@/components/menu-item/RightClickMenu";
  24. import router from '@/router'
  25. import XEUtils from "xe-utils";
  26. import {stringIsBlank} from "@/utils/blank-utils";
  27. const tagRef = ref<HTMLElement | null>(null)
  28. const opt = [
  29. {
  30. name: '关闭', click: (data, index) => {
  31. closeRouter(index, data.path)
  32. }
  33. },
  34. {
  35. name: '关闭其他选项卡', click: (data, index) => {
  36. router.push(data.path)
  37. setLabel([data])
  38. }
  39. },
  40. {
  41. name: '关闭所有选项卡', click: (data, index) => {
  42. menuList.value = []
  43. menuKey.value = []
  44. backToTheHomepage()
  45. }
  46. },
  47. {
  48. name: '关闭左侧选项卡', click: (data, index) => {
  49. if (index === 0) return
  50. if (index > currentIndex.value) {
  51. router.push(data.path)
  52. }
  53. let temp = []
  54. for (let i = index; i < menuList.value.length; i++) {
  55. temp.push(menuList.value[i])
  56. }
  57. setLabel(temp)
  58. }
  59. },
  60. {
  61. name: '关闭右侧选项卡', click: (data, index) => {
  62. if (index + 1 === menuList.value.length) return
  63. if (index < currentIndex.value) {
  64. router.push(data.path)
  65. }
  66. let temp = []
  67. for (let i = 0; i < index + 1; i++) {
  68. temp.push(menuList.value[i])
  69. }
  70. setLabel(temp)
  71. }
  72. }
  73. ]
  74. const mousePosition = ref()
  75. const contextmenuItem = async (item, index, event) => {
  76. mousePosition.value = {
  77. event,
  78. data: item,
  79. index
  80. }
  81. }
  82. const menuList = ref(tabsHook.getItem())
  83. const menuKey = ref(tabsHook.getItemKey())
  84. const currentPath = ref('')
  85. const currentIndex = ref(-1)
  86. const closeRouter = (index, path) => {
  87. menuList.value.splice(index, 1)
  88. menuKey.value.splice(index, 1)
  89. if (menuList.value.length === 0) {
  90. let data = {
  91. path: '/dashboard',
  92. title: '首页',
  93. }
  94. menuList.value.push(data)
  95. menuKey.value.push(JSON.stringify(data))
  96. router.push('/dashboard')
  97. } else {
  98. if (router.currentRoute.value.path === path || router.currentRoute.value.meta.activeMenu === path) {
  99. let temp = index === menuList.value.length ? menuList.value.length - 1 : index
  100. router.push(menuList.value[temp]?.path)
  101. }
  102. }
  103. }
  104. // 设置标签
  105. const setLabel = (data) => {
  106. menuList.value = data
  107. menuKey.value.value = []
  108. for (let i = 0, len = menuList.value.length; i < len; i++) {
  109. menuKey.value.value.push(JSON.stringify(menuList.value[i]))
  110. }
  111. }
  112. // 回到首页
  113. const backToTheHomepage = () => {
  114. router.push('/dashboard')
  115. }
  116. // 设置滚动条位置
  117. const handleScrolling = async (str) => {
  118. currentIndex.value = menuList.value.findIndex((item) => {
  119. return item.name === str.name
  120. })
  121. if (currentIndex.value === -1) return
  122. let itemData = tagRef.value!.querySelectorAll('.item')
  123. let scroll = 0;
  124. for (let i = 0; i < currentIndex.value; i++) {
  125. let item = itemData[i]
  126. scroll += item.scrollWidth
  127. }
  128. selectedStyle.value = {
  129. width: itemData[currentIndex.value].clientWidth + 'px',
  130. transform: `translateX(${scroll}px)`
  131. }
  132. tagRef.value!.scrollTo({top: 0, left: scroll, behavior: 'smooth'})
  133. }
  134. const selectedStyle = ref({})
  135. function handleRouterPush(item) {
  136. router.push({
  137. name: item.name,
  138. query: item.query
  139. })
  140. }
  141. watch(() => menuList.value, () => {
  142. tabsHook.setItem(menuList.value)
  143. routingChanges(false)
  144. }, {deep: true})
  145. const createLabels = (str, data) => {
  146. if (menuKey.value.indexOf(str) > -1) return
  147. menuList.value.push(data)
  148. tabsHook.setItem(menuList.value)
  149. menuKey.value.push(str)
  150. }
  151. const routingChanges = (createTabs = true) => {
  152. const currentRoute = router.currentRoute.value
  153. currentPath.value = currentRoute.path
  154. const data = {
  155. path: currentRoute.path,
  156. title: currentRoute.meta.title,
  157. name: currentRoute.name,
  158. query: currentRoute.query
  159. }
  160. const routerInfoToStr = JSON.stringify(data)
  161. nextTick(() => {
  162. handleScrolling(data)
  163. })
  164. if (XEUtils.get(currentRoute, 'meta.hideTabs', true)) {
  165. return;
  166. }
  167. if (stringIsBlank(currentRoute.name)) {
  168. return;
  169. }
  170. if (createTabs) {
  171. createLabels(routerInfoToStr, data)
  172. }
  173. }
  174. watch(() => router.currentRoute.value, () => {
  175. routingChanges()
  176. }, {immediate: true})
  177. </script>
  178. <style scoped lang="scss">
  179. $item-height: 40px;
  180. .route_navigation_main {
  181. flex: 1;
  182. display: flex;
  183. height: 100%;
  184. width: 100%;
  185. position: relative;
  186. overflow-x: auto;
  187. overflow-y: hidden;
  188. margin-right: 16px;
  189. }
  190. .active_text {
  191. color: var(--xc-header-active-text-color);
  192. opacity: 1 !important;
  193. }
  194. .active_box {
  195. position: absolute;
  196. height: $item-height;
  197. border-radius: 4px;
  198. background-color: var(--xc-header-active-bg-color);
  199. box-shadow: var(--el-box-shadow-light);
  200. transition: all .2s;
  201. -webkit-transition: all .2s;
  202. }
  203. .route_navigation_main::-webkit-scrollbar {
  204. height: 4px;
  205. background-color: #eaeaea;
  206. }
  207. .route_navigation_main:hover ::-webkit-scrollbar-track-piece {
  208. /*鼠标移动上去再显示滚动条*/
  209. background-color: #fff;
  210. /* 滚动条的背景颜色 */
  211. border-radius: 6px;
  212. /* 滚动条的圆角宽度 */
  213. }
  214. .route_navigation_main:hover::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
  215. border-radius: 10px;
  216. -webkit-box-shadow: inset 0 0 5px rgba(28, 28, 28, 0.2);
  217. background: #919191;
  218. }
  219. .route_navigation_main::-webkit-scrollbar-track {
  220. background: white;
  221. }
  222. .item {
  223. display: flex;
  224. align-items: center;
  225. justify-content: center;
  226. padding: 0 20px;
  227. cursor: pointer;
  228. z-index: 1;
  229. height: $item-height;
  230. user-select: none;
  231. transition: all .2s;
  232. white-space: nowrap;
  233. -webkit-transition: all .2s;
  234. opacity: .7;
  235. &:hover {
  236. opacity: 1;
  237. }
  238. i {
  239. padding: 2px;
  240. font-size: 12px;
  241. margin-left: 5px;
  242. color: rgb(0, 0, 0);
  243. &:hover {
  244. background-color: #0a84fd;
  245. color: white;
  246. border-radius: 50%;
  247. }
  248. }
  249. }
  250. </style>