Skip to content

Latest commit

 

History

History
139 lines (130 loc) · 4.39 KB

57-%E5%A4%9A%E9%A1%B5%E7%AD%BE%E6%93%8D%E4%BD%9C%E5%88%97%E8%A1%A8%E5%8A%9F%E8%83%BD%E5%BC%80%E5%8F%91.md

File metadata and controls

139 lines (130 loc) · 4.39 KB

目标

完成操作列表功能开发

开发

这节课我们来开发一下右侧操作功能和右键操作功能。
首先我们先来开发一下右侧的操作功能，我们用到tabs的右侧的插槽来处理这一部分的代码。
代码如下：

<script lang="ts" setup>
  import type { DropdownOption } from 'naive-ui'
  const dropdownOptions = computed<DropdownOption[]>(() => [
  {
    label: '关闭当前',
    key: 'closeCurrent,
      // 如果当前只剩下一页的话，我们是不允许关闭的，所以我们就通过计算属性的方式
      // 来处理
    disabled: tabList.value?.length === 1,
  },
  {
    label: '刷新当前页',
    key: 'refreshCurrent',
  },
])

const handleMenuChange = (key: string) => {
  if (key === 'closeCurrent')
    // closeTab()
  else if (key === 'refreshCurrent')
    // refresh()
}
</script>

  ...
<template #suffix>
      <div class="pr-16px">
        <n-dropdown
          trigger="click"
          :options="dropdownOptions"
          @select="handleMenuChange"
        >
          <n-icon size="16">
            <MoreOutlined />
          </n-icon>
        </n-dropdown>
      </div>
    </template>
...

接下来我们就要实现这个关闭当前页签和刷新当前页签的功能

关闭页签

首先我们先来实现一下关闭页签的功能。
我们在multi-tab-state.ts中

  const closeTab = (path?: string) => {
    // 判断path是否存在，如果不存在就关闭当前页
    if (!path)
      path = current.value
    // 如果当前页面是最后一个页面，就不能进行关闭
    if (tabList.value?.length === 1) {
      // 这里是可以支持多语言的，可以自己去实现
      message?.info('这是最后一个标签，无法被关闭')
      return
    }
    // 获取当前页面的索引地址
    const currentIndex = tabList.value.findIndex(item => item.path === path)
    // 判断当前页面是否不是当前选中的页面，如果不是就直接删除
    if (path !== current.value) {
      state.tabList.splice(currentIndex, 1)
      return
    }
    // 如果删除的是当前页面，那么我们就需要处理一下，
    // 如果删除的是当前页面的话，我们需要跳转到指定的目标页面
    // 我们需要判断当前是不是在第一页，如果不是正常跳转到上一个页签。
    const targetIndex = currentIndex === 0 ? currentIndex + 1 : currentIndex - 1
    router.replace(state.tabList[targetIndex].route).then(() => {
      // 完成跳转后再删除跳转前的页签
      state.tabList.splice(currentIndex, 1)
    }).catch()
  }

刷新当前页签

首先我们想要实现刷新页面的话， 我们在这里一版本会通过重定向的方式进行实现，所以我们必须先要有一个支持重定向的页面，所以我们先来创建一下这个页面。
在pages下创建一个redirect的文件夹同时创建一个index.vue的文件。
然后我们在静态路由配置。
在routes中的static-routes.ts中增加路由部分。

 {
   // 我们配置一个路由，通过动态路由参数的方式进行配置，我们命名动态路由参数的名称为path
    path: '/redirect/:path(.*)',
    component: () => import('~/pages/redirect/index.vue'),
  },
  {
    path: '/:pathMatch(.*)',
    component: () => import('~/pages/exception/error.vue'),
  },

然后改造一下我们的重定向页面部分

<script lang="ts" setup>
  // 这一部分在配置完成路由后再实现
const router = useRouter()
const path = router.currentRoute.value.params?.path
if (path)
  router.replace(`/${path}`)

else
  router.replace('/')
</script>

<template>
  <div />
</template>

然后我们再multi-tab-state.ts中增加一个方法

 const refresh = (path?: string) => {
    if (!path)
      path = current.value
    router.replace({
      path: `/redirect${path}`,
    }).catch().then(() => {
      // TODO
    })
  }

最后我们在multi-tab中的index.vue进行配置

const handleMenuChange = (key: string) => {
  if (key === 'closeCurrent')
    closeTab()
  else if (key === 'refreshCurrent')
    refresh()
}

最后我们进行测试