123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- import { ref, unref, watch } from 'vue'
- import { useRouter } from 'vue-router'
- const findViewIndex = (viewList, view) => {
- return viewList.findIndex(v => v.fullPath === view.fullPath)
- }
- export const useCacheView = (updateCache) => {
- const cacheViewList = ref([])
- // 添加
- const addCacheView = (path) => {
- // 判断是否需要添加
- if (!cacheViewList.value.includes(path)) {
- cacheViewList.value.push(path)
- updateCache(cacheViewList.value)
- }
- }
- // 删除
- const removeCacheView = (path) => {
- const index = cacheViewList.value.indexOf(path)
- if (index > -1) {
- cacheViewList.value.splice(index, 1)
- updateCache(cacheViewList.value)
- }
- }
- // 重置
- const resetCacheList = () => {
- cacheViewList.value = []
- updateCache(cacheViewList.value)
- }
- return {
- cacheViewList,
- addCacheView,
- removeCacheView,
- resetCacheList
- }
- }
- export const useActiveOrder = () => {
- const activeOrderList = ref([])
- const updateActiveOrder = (view) => {
- const activeIndex = findViewIndex(activeOrderList.value, view)
- if (activeIndex > -1) activeOrderList.value.splice(activeIndex, 1)
- activeOrderList.value.push(view)
- }
- const removeActiveOrder = (view) => {
- const activeIndex = findViewIndex(activeOrderList.value, view)
- if (activeIndex > -1) activeOrderList.value.splice(activeIndex, 1)
- }
- const resetActiveOrderList = () => {
- activeOrderList.value = []
- }
- const getNextActiveOrder = () => {
- const activeOrderListLength = activeOrderList.value.length
- if (activeOrderListLength > 2) {
- return activeOrderList.value[activeOrderListLength - 2]
- }
- }
- return {
- activeOrderList,
- updateActiveOrder,
- removeActiveOrder,
- resetActiveOrderList,
- getNextActiveOrder
- }
- }
- // activeView - ref({}) 当前激活的路由
- export const useOpenedView = (homeView) => {
- const router = useRouter()
- const activeView = ref({})
- const { updateActiveOrder, removeActiveOrder, resetActiveOrderList, getNextActiveOrder } = useActiveOrder()
- const isActiveView = (view) => {
- return unref(activeView).fullPath === view?.fullPath
- }
- const setActiveView = (view) => {
- activeView.value = view
- router.push(view.fullPath)
- }
- // TODO: 考虑固定打开的ViewList
- const openedViewList = ref(homeView ? [homeView] : [])
- const getNextActiveView = () => {
- return getNextActiveOrder() || homeView
- }
- watch(activeView, (val) => {
- updateActiveOrder(val)
- }, { immediate: true })
- // 添加一个视图
- const addOpenedView = (view) => {
- openedViewList.value.push(view)
- setActiveView(view)
- }
- // 修改一个视图
- const updateOpenedView = (index, view) => {
- openedViewList.value.splice(index, 1, view)
- setActiveView(view)
- }
- // 关闭一个视图
- const removeOpenedView = (view) => {
- if (isActiveView(view)) setActiveView(getNextActiveView()) // 获取上一个激活的
- // 删除openedView时需要同时删除opened和active
- const index = findViewIndex(openedViewList.value, view)
- if (index > -1)openedViewList.value.splice(index, 1)
- removeActiveOrder(view)
- }
- // 关闭其他视图 view允许为空
- const removeOtherView = (view) => {
- if (!isActiveView(view)) {
- setActiveView(view)
- }
- openedViewList.value = [unref(homeView), activeView.value]
- }
- const findViewByOpenedViewList = (fullPath) => {
- return openedViewList.value.find(openedView => openedView.fullPath === fullPath)
- }
- // 关闭所有
- const resetOpenedList = () => {
- resetActiveOrderList()
- if (homeView) {
- openedViewList.value = [unref(homeView)]
- setActiveView(homeView)
- } else {
- // 默认方案
- openedViewList.value = [{ fullPath: '/', title: '首页' }]
- setActiveView({ fullPath: '/', title: '首页' })
- }
- }
- return {
- activeView,
- openedViewList,
- addOpenedView,
- updateOpenedView,
- removeOpenedView,
- removeOtherView,
- resetOpenedList,
- setActiveView,
- findViewByOpenedViewList
- }
- }
|