学习使用vue-router tab切换（四）

2023-11-13 20:28:46

原文地址：https://bhuh12.github.io/vue-router-tab/zh/guide/custom/transition.html

过渡效果

您可以通过配置 RouterTab 组件的 tab-transition 和 page-transition 属性，分别替换默认的页签和页面过渡效果

注意

  • 如果是组件作用域内的 CSS(配置了 scoped)，需要在选择器前添加 >>>、 /deep/ 或 ::v-deep 才能生效

  • 页签项 .router-tab-item 默认设置了 transition 和 transform-origin 的样式，您可能需要覆盖它已避免影响到自定义的过渡效果

示例：

<template>
  <router-tab page-transition="page-fade" tab-transition="tab-scale" />
</template>

<style lang="scss" scoped>
::v-deep {
  // 页面 fade 过渡
  .page-fade {
    &-enter-active,
    &-leave-active {
      transition: opacity 0.5s;
    }

    &-enter,
    &-leave-to {
      opacity: 0;
    }
  }

  // 页签 scale 过渡
  .tab-scale {
    &-enter-active,
    &-leave-active {
      transition: opacity 0.5s, transform 0.5s;
    }

    &-enter,
    &-leave-to {
      transform: scale(1.5);
      opacity: 0;
    }
  }
}
</style>

详细配置

您还可以使用对象的方式设置 tab-transition 和 page-transition 的值，以实现详细的过渡效果配置

配置参考: Vue - transition

<router-tab
  :tab-transition="{
    name: 'my-transition',
    'enter-class': 'my-transition-enter'
  }"
/>

自定义插槽

RouterTab 支持通过以下插槽个性化页签组件：

插槽名称 作用域 说明
default tab 页签项
start - 页签栏开始
end - 页签栏结束

#自定义页签项

通过 RouterTab 组件的默认作用域插槽，我们可以自定义页签显示的内容

插槽的作用域提供页签项信息 tab 供模板使用，包括以下属性或方法

属性 类型 说明
base Component RouterTab 实例
data Object 页签数据
id String 页签 ID
title String 标题
tips String 提示
icon String 图标
tabClass String 页签 class
closable Boolean 是否可关闭
index Number 页签索引
close Function 页签关闭方法
 

示例：

<template>
  <router-tab :class="{ 'is-fullscreen': fullscreen }">
    <!-- 页签开始 -->
    <template #start>
      <router-link
        class="tab-slot-icon rt-icon-home"
        to="/slot/"
        title="首页"
      />
    </template>

    <!-- 页签结束 -->
    <template #end>
      <a
        class="tab-slot-icon"
        :class="fullscreen ? 'rt-icon-fullscreen-exit' : 'rt-icon-fullscreen'"
        :title="fullscreen ? '退出全屏' : '全屏'"
        @click="fullscreen = !fullscreen"
      />
    </template>

    <!-- 页签项插槽 -->
    <template #default="tab">
      <i v-if="tab.icon" class="router-tab__item-icon" :class="tab.icon" />
      <span class="router-tab__item-title" :title="tab.tips">{{
        tab.title
      }}</span>
      <span class="tab-badge">{{ tab.index }}</span>
      <i
        v-if="tab.closable"
        class="router-tab__item-close"
        @click.prevent="tab.close"
      />
    </template>
  </router-tab>
</template>

<script>
// 引入全屏混入
import fullscreen from '../../mixins/fullscreen'

export default {
  mixins: [fullscreen]
}
</script>

<style lang="scss" scoped>
.tab-badge {
  $s: 1.2em;
  display: inline-block;
  width: $s;
  height: $s;
  margin-left: 3px;
  color: #fff;
  font-size: 12px;
  line-height: $s;
  text-align: center;
  vertical-align: super;
  background-color: #f80;
  border-radius: 100%;
}

.router-tab__item.is-active .tab-badge {
  background-color: #f50;
}

// 页签前后插槽样式
.router-tab ::v-deep {
  .router-tab__slot-start,
  .router-tab__slot-end {
    display: flex;
    align-items: center;
  }
}

.tab-slot-icon {
  margin: 0 5px;
  color: #2c3e50;
  font-size: 20px;
  text-decoration: none;
  cursor: pointer;

  &:active {
    opacity: 0.8;
  }
}
</style>

右键菜单

 

禁用右键菜单

你可以通过配置 :contextmenu="false" 来禁用右键菜单

示例：

<router-tab :contextmenu="false" />

自定义右键菜单

通过数组方式配置 contextmenu，可以自定义右键菜单

提示

参考：内置右键菜单(opens new window)

示例：

<template>
  <router-tab
    :class="{ 'is-fullscreen': fullscreen }"
    :contextmenu="contextmenu"
  />
</template>

<script>
// 引入全屏混入
import fullscreen from '../../mixins/fullscreen'

export default {
  mixins: [fullscreen],

  computed: {
    // 右键菜单
    contextmenu() {
      return [
        // 使用内置菜单
        'refresh',

        // 扩展内置菜单：添加图标
        {
          id: 'close',
          icon: 'rt-icon-close'
        },

        // 扩展内置菜单：修改执行方法
        {
          id: 'closeOthers',
          handler({ $menu }) {
            $menu.closeMulti($menu.others)
            alert('关闭其他页签')
          }
        },

        // 自定义菜单
        {
          id: 'custom',
          title: '自定义操作',
          tips: '这是一个自定义操作',
          icon: 'rt-icon-doc',
          class: 'custom-action',
          // 是否显示，不提供则默认显示
          visible(context) {
            return context.$tabs.items.length < 3
          },

          // 是否启用，不提供则默认启用
          enable(context) {
            return !(context.data.index % 2)
          },

          // 点击触发
          handler(context) {
            console.log(context)
            alert('这是自定义操作，请打开控制台查看输出参数')
          }
        },

        // 拥有状态的菜单 - 全屏
        {
          id: 'fullscreen',
          title: () => (this.fullscreen ? '退出全屏' : '全屏'),
          icon: () =>
            this.fullscreen ? 'rt-icon-fullscreen-exit' : 'rt-icon-fullscreen',

          // 点击触发
          handler: () =>
            setTimeout(() => {
              this.fullscreen = !this.fullscreen
            }, 300)
        }
      ]
    }
  }
}
</script>

多语言支持

#页签国际化

#一. 配置自定义国际化方法

RouterTab 组件提供了 i18n 属性，用以配置自定义的国际化转换方法，从而实现路由页签的多语言展示。

示例：

<template>
  <router-tab :i18n="i18n" />
</template>

<script>
  export default {
    methods: {
      // 自定义国际化转换方法
      i18n(key, params) {
        // $getI18n 为实际项目中的全局国际化方法
        return this.$getI18n(key, params)
      }
    }
  }
</script>

二. 路由配置页签国际化

页签支持国际化的字段有： title 页签标题，tips 页签提示

定义国际化的方式：

  1. 'i18n:custom.i18n.key' 字符串方式: i18n: 前缀 + 国际化字段的 key

  2. ['custom.i18n.key', ...params] 数组方式: 第一项为国际化字段的 key，后面为参数列表。适用于动态的国际化内容。

参考: 动态页签

const routes = [
  {
    path: '/page1',
    component: pageComponent,
    meta: {
      title: 'i18n:routerTab.page1', // 通过配置 'i18n:key' 的方式来设置国际化字段 'routerTab.page1'
      icon: 'icon-user', // 页签图标，可选
      tips: 'i18n:routerTab.page1Tips' // 页签提示同样支持国际化
    }
  },
  {
    path: '/page2',
    component: pageComponent,
    meta: {
      title: ['routerTab.page2'], // 通过数组方式来设置国际化字段 'routerTab.page2'
      icon: 'icon-user' // 页签图标，可选
    }
  }
]

组件语言

通过配置 RouterTab 组件的 lang 属性，可以设置组件显示的语言 (主要表现为页签右键菜单)。

RouterTab 默认会根据浏览器语言自动识别组件语言。

目前组件内置的语言有：'zh'、'en'。

指定组件显示

<router-tab lang="zh" />

自定义的语言 (参考配置 (opens new window))

<template>
  <router-tab :lang="customLanguage" />
</template>

<script>
export default {
  name: 'LangCustom',
  data() {
    return {
      customLanguage: {
        tab: {
          untitled: 'Untitled Page'
        },

        contextmenu: {
          refresh: 'Refresh This',
          refreshAll: 'Refresh All',
          close: 'Close This',
          closeLefts: 'Close to the Left',
          closeRights: 'Close to the Right',
          closeOthers: 'Close Others'
        },

        msg: {
          keepLastTab: 'Keep at least 1 tab'
        }
      }
    }
  }
}
</script>

页签行为

#拖拽排序

RouterTab 默认支持页签拖拽排序，你可以通过配置 :dragsort="false" 来禁用该功能

示例：

<router-tab :dragsort="false" />

新页签插入位置

RouterTab 可以通过配置 append 来指定新页签插入位置，支持以下两种选项：

  • last 页签末尾（默认）

  • next 当前页签下一个

示例：

<router-tab append="next" />

关闭最后的页签

默认情况下，RouterTab 最后一个页签不允许手动关闭。

通过配置 :keep-last-tab="false" 可以修改这一行为。

在关闭最后的页签后，RouterTab 会为你跳转到默认路由。

示例：

<router-tab :keep-last-tab="false" />

滚动位置

通过设置滚动元素，已经缓存的页签在重新激活时，将会保持滚动位置。

#全局滚动元素

当滚动条在页面节点外部时，可以通过 RouterTab 组件的page-scroller 属性设置全局滚动元素。

RouterTab 默认设置的全局滚动元素是 .router-tab__container, 你也可以设置其它的滚动元素。

示例：

<template>
  <router-tab page-scroller=".global-page-scroller" />
</template>

页面滚动元素

当滚动条在页面节点内部时，可以通过页面组件选项 pageScroller 设置页面滚动元素。

示例：

一个滚动元素

export default {
  name: 'MyPage',
  pageScroller: '.custom-scroller'
}

多个滚动元素

export default {
  name: 'MyPage',
  pageScroller: ['.custom-scroller-1', '.custom-scroller-2']
}

异步滚动

当页面内有异步加载的内容时，可以在异步完成后，通过页面实例 $emit('page-loaded') 来通知 RouterTab 还原滚动位置。

示例：

export default {
  name: 'ScrollAsync',

  data() {
    return { list: [] }
  },

  activated() {
    setTimeout(() => {
      this.list = new Array(100)
      this.$emit('page-loaded')
    }, Math.random() * 1000)
  }
}

 

上一篇：mediasoup中router的创建过程


下一篇：vue3.0 基本用法