VEUI

VEUI on GitHub
Play!EnglishEN
⌘ K | 全文搜索…

Tabs 标签页

示例

尺寸

可供选用的 ui 尺寸属性值：s / m / l。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-tabs
    ui="l"
    :active.sync="active"
  >
    <veui-tab
      label="回答问题"
      name="answers"
    />
    <veui-tab
      label="文章评论"
      name="articles"
    />
    <veui-tab
      label="分享朋友圈"
      name="shares"
    />
  </veui-tabs>

  <veui-tabs :active.sync="active">
    <veui-tab
      label="回答问题"
      name="answers"
    />
    <veui-tab
      label="文章评论"
      name="articles"
    />
    <veui-tab
      label="分享朋友圈"
      name="shares"
    />
  </veui-tabs>

  <veui-tabs
    ui="s"
    :active.sync="active"
  >
    <veui-tab
      label="回答问题"
      name="answers"
    />
    <veui-tab
      label="文章评论"
      name="articles"
    />
    <veui-tab
      label="分享朋友圈"
      name="shares"
    />
  </veui-tabs>
</article>
</template>

<script>
import { Tabs, Tab } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab
  },
  data () {
    return {
      active: 'answers'
    }
  }
}
</script>

样式

设置 ui 为 borderless / simple / strong 来分别启用默认样式的无分隔线样式、简单样式、加强样式。

Borderless style

Simple style

Strong style

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <h4>Borderless style</h4>
    <veui-tabs ui="borderless">
      <veui-tab label="Tab 1"/>
      <veui-tab label="Tab 2"/>
      <veui-tab label="Tab 3"/>
    </veui-tabs>
  </section>
  <section>
    <h4>Simple style</h4>
    <veui-tabs ui="simple">
      <veui-tab label="Tab 1"/>
      <veui-tab label="Tab 2"/>
      <veui-tab label="Tab 3"/>
    </veui-tabs>
  </section>
  <section>
    <h4>Strong style</h4>
    <veui-tabs ui="strong">
      <veui-tab label="Tab 1"/>
      <veui-tab label="Tab 2"/>
      <veui-tab label="Tab 3"/>
    </veui-tabs>
  </section>
</article>
</template>

<script>
import { Tabs, Tab } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

路由模式

设置 Tab 组件 to 属性来使用路由模式。

Tab content #1
在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-tabs :active="$route.fullPath">
    <veui-tab
      label="Tab 1"
      to="/components/tabs/tab"
    />
    <veui-tab
      label="Tab 2"
      to="/components/tabs/tab2"
    />
    <veui-tab
      label="Tab 3 (custom panel slot)"
      to="/components/tabs/tab3"
    >
      <h3>Tab Header</h3>
      <router-view/>
      <footer>Tab footer</footer>
    </veui-tab>
    <veui-tab
      label="Redirect to Form"
      to="/components/form"
    />
    <template #panel>
      <router-view/>
    </template>
  </veui-tabs>
</article>
</template>

<script>
import { Tabs, Tab } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab
  },
  data () {
    return {
      active: 'answers',
      index: 0
    }
  }
}
</script>

数据源

除了使用 Tab 组件，还可以设置 items 属性来设置标签页的数据源。

默认1

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-tabs :items="tabs">
      <template
        #panel="{ activeTab }"
      >
        <p>{{ activeTab.label }}</p>
      </template>
    </veui-tabs>
  </section>
</article>
</template>

<script>
import { Tabs } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs
  },
  data () {
    return {
      tabs: [
        { label: '默认1', name: '默认1' },
        { label: '默认2', name: '默认2' },
        { label: '默认3', name: '默认3' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

可增删

使用 addable 属性来显示添加按钮。

为 Tab 组件添加 removable 或为 Tabs 的 items 项目添加 removable 字段来将单个标签页设置为可以被删除。

Tab 1

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-tabs
      ref="tabs"
      addable
      :items="realTabs"
      :active.sync="active"
      @add="addTab"
      @remove="removeTab"
    >
      <template #panel="{ activeTab }">
        <p>{{ activeTab.label }}</p>
      </template>
    </veui-tabs>
  </section>
</article>
</template>

<script>
import { Tabs } from 'veui'
import { findIndex } from 'lodash'

export default {
  components: {
    'veui-tabs': Tabs
  },
  data () {
    return {
      tabs: [
        { label: 'Tab 1', name: 't1' },
        { label: 'Tab 2', name: 't2' },
        { label: 'Tab 3', name: 't3' }
      ],
      active: 't1',
      count: 3
    }
  },
  computed: {
    realTabs () {
      let { tabs } = this
      return tabs.length === 1
        ? [{ ...tabs[0], removable: false }]
        : tabs.map(tab => ({ ...tab, removable: true }))
    }
  },
  methods: {
    addTab () {
      this.count++

      let name = `t${this.count}`

      this.tabs.push({
        label: `Tab ${this.count}`,
        name
      })

      this.active = name
    },
    removeTab ({ name }) {
      let index = findIndex(this.tabs, tab => tab.name === name)

      if (index !== -1) {
        this.tabs.splice(index, 1)
        this.active = (this.tabs[index - 1] || this.tabs[0]).name
      }
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

标签状态

设置 Tab 组件 status 属性来给页签添加状态。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-tabs>
    <veui-tab
      label="Address 1"
      status="success"
    />
    <veui-tab
      label="Address 2"
      status="info"
    />
    <veui-tab
      label="Address 3"
      status="warning"
    />
    <veui-tab
      label="Address 4"
      status="error"
    />
  </veui-tabs>
</article>
</template>

<script>
import { Tabs, Tab } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

可排序

设置 sortable 属性来启用页签排序功能，推荐和 items 属性一起使用。

Tab 1

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-tabs
      sortable
      :items="tabs"
      @sort="handleSort"
    >
      <template #panel="{ activeTab }">
        <p>{{ activeTab.label }}</p>
      </template>
    </veui-tabs>
  </section>
</article>
</template>

<script>
import { Tabs } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs
  },
  data () {
    return {
      tabs: [
        { label: 'Tab 1', name: 't1' },
        { label: 'Tab 2', name: 't2' },
        { label: 'Tab 3', name: 't3' }
      ]
    }
  },
  methods: {
    handleSort (fromIndex, toIndex) {
      const item = this.tabs[fromIndex]
      this.tabs.splice(fromIndex, 1)
      this.tabs.splice(toIndex, 0, item)
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

禁用状态

设置 Tab 组件 disabled 属性来使标签页处于禁用状态。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-tabs>
    <veui-tab label="Tab 1">
      <p>This is Tab 1</p>
    </veui-tab>
    <veui-tab
      label="Tab 2"
      disabled
    >
      <p>This is Tab 2</p>
    </veui-tab>
    <veui-tab label="Tab 3">
      <p>This is Tab 3</p>
    </veui-tab>
    <veui-tab label="Tab 4">
      <p>This is Tab 4</p>
    </veui-tab>
  </veui-tabs>
</article>
</template>

<script>
import { Tabs, Tab } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab
  }
}
</script>

自定义页签

设置 tab-item 与 tab-label 插槽内容，或 Tab 组件的 item 与 label 插槽，来自定义页签内容。

Customizing tab item

Customizing tab label

Tabs 组件的 tab-item 和 tab-label 插槽会自动对所有页签生效。可以使用单个 Tab 组件的 item 和 label 插槽定义单个页签的内容，优先级高于 Tabs 组件整体自定义的逻辑。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <h4>Customizing tab item</h4>
    <veui-tabs ui="borderless">
      <veui-tab label="Tab 1"/>
      <veui-tab label="Tab 2"/>
      <veui-tab label="Tab 3"/>
      <template #tab-item="{ label, attrs, activate, index, active }">
        <button
          v-bind="attrs"
          :style="{
            fontWeight: active ? '600' : '400',
            textDecoration: active ? 'underline' : 'none'
          }"
          @click="activate"
        >
          #{{ index + 1 }} {{ label }}
        </button>
      </template>
    </veui-tabs>
  </section>
  <section>
    <h4>Customizing tab label</h4>
    <veui-tabs>
      <veui-tab label="Tab 1">
        <template #label="{ label, active }">
          <veui-icon :name="active ? 'envelope-open' : 'envelope'"/> {{ label }}
        </template>
      </veui-tab>
      <veui-tab label="Tab 2"/>
      <veui-tab label="Tab 3"/>
      <template #tab-label="{ label, active }">
        <veui-icon :name="active ? 'folder-open' : 'folder'"/> {{ label }}
      </template>
    </veui-tabs>
  </section>
</article>
</template>

<script>
import { Tabs, Tab, Icon } from 'veui'
import 'veui-theme-dls-icons/envelope'
import 'veui-theme-dls-icons/envelope-open'
import 'veui-theme-dls-icons/folder'
import 'veui-theme-dls-icons/folder-open'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab,
    'veui-icon': Icon
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}
</style>

扩展内容

设置 extra 插槽内容来为标签行提供额外内容。

This is an extra message.
在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-tabs>
    <veui-tab label="Tab 1"/>
    <veui-tab label="Tab 2"/>
    <veui-tab label="Tab 3"/>
    <template #extra>
      <veui-message status="aux">
        This is an extra message.
      </veui-message>
    </template>
  </veui-tabs>
</article>
</template>

<script>
import { Tabs, Tab, Message } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab,
    'veui-message': Message
  }
}
</script>

API

属性

名称类型默认值描述
uistring-

预设样式。

值描述
s小尺寸样式。
m中尺寸样式。
l大尺寸样式。
borderless无底部分隔线样式。
simple简单样式。
strong加强样式。
itemsArray<Object>[]

标签页数据源，项目类型为 { label, name, disabled, status, removable, to, native ... }。

名称类型描述
labelstring标签页页签的标题。
namestring标签页的名称。
status'success' | 'warning' | 'info' | 'error'标签页的状态。
disabledboolean标签页是否为禁用。
removableboolean标签页是否可删除。
tostring | Object-
nativebooleanfalse
activestring-

.sync

表示当前哪个标签页处于激活状态。具体映射的值受标签的属性影响，优先级 to > name。

matchesfunction(Route, Route): booleantabs.matches

用于给内部的 Tab 组件设置统一的路由匹配逻辑。具体参见 Tab 组件的 to 属性。

addablebooleanfalse是否可以增加标签。
maxnumber-可增加标签的上限值。
tipstring-提示文本。
add-labelstring-“添加”按钮的文字内容。
eagerbooleanfalse是否立即渲染所有非当前激活项的标签面板内容（并隐藏）。
sortablebooleanfalse是否可以拖拽标签项目来排序，推荐和 items 属性一起使用。

插槽

名称描述
default允许直接内联 Tab 组件。无默认内容。
panel页签下方面板区域。
extra位于页签右侧的扩展区域。
tab-item

页签区域，默认内容为页签对应的按钮/链接。插槽参数为标签属性描述对象。

名称类型描述
labelstring标签页页签文本。
namestring标签页名称。
disabledboolean标签页是否禁用。
tostring标签页路由信息。
activeboolean标签页是否是激活项。
indexnumber标签页位于列表中的索引值。
nativeboolean路由模式是否强制使用原生的 <a> 元素。
removableboolean是否可删除。
statusstring标签页状态。
attrsObject<string, string>其它需要输出到页签元素上的 HTML 属性，例如 role / aria-selected / aria-controls 等。
activatefunction(): void激活当前标签页的方法。
tab-label页签文本区域，默认内容为页签文本。插槽参数同 tab-item 插槽，attrs / activate 除外。

事件

名称描述
change切换时触发。回调参数为 (tab: Object)，tab 与 tab-label 插槽中的插槽参数一致。
add点击添加按钮触发的事件，无回调参数。
remove删除标签时触发的事件。回调参数为 (tab: Object)，tab 与 tab-label 插槽中的插槽参数一致。
sort排序时触发的事件。回调参数为 (fromIndex: number, toIndex: number)，表示从原来位置（fromIndex）移动到新位置（toIndex）。

方法

名称描述
scrollTabIntoView

在页签容器产生横向滚动时，将指定的页签滚动到视图内。

function scrollTabIntoView(tabName: string): void

全局配置

名称类型默认值描述
tabs.matchesfunction见描述。

函数签名与 Tab 组件的 to 属性相同。默认值为：

function (current, to) {
  return current.fullPath === to.fullPath
}

图标

名称描述
add添加按钮。
remove清除按钮。
prev往左翻页按钮。
next往右翻页按钮。
success成功状态。
warning警示状态。
info普通信息状态。
error错误状态。
在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2024