如何使用Tab选项卡组件,有哪些方式_移动开发平台 mPaaS-阿里云帮助中心

本文介绍了使用 Tab 选项卡组件的不同方式以及相关 API。

在 Kylin 工程中使用该组件。
在其他工程中使用，请通过 ESModule 的方式导入组件。
API 说明提供了 props、slots、events 的接口信息。

此外，如需查看该组件的视觉效果及示例代码，请参考本文的 Demo。

Kylin

<dependency component="{ Tab, TabItem }" src="@alipay/antui-vue" ></dependency>

ESModule

import { Tab, TabItem } from '@alipay/antui-vue';

API 说明

Tab
TabItem

Tab

props

属性	类型	默认值	说明
scroll	boolean	false	是否支持滚动。
value	Number，String	null	选中的 `tab-item` 的 ID，支持 v-model。
initial-value	Number，String	null	初始选中的 `tab-item` 的 ID，支持非 v-model 场景。
resistant	Number	0.2	滑动超出屏幕范围时的速度比率，单位为 px/s。
reverseTime	Number	0.15	超出屏幕范围回弹时间，单位为秒。
slideTime	Number	0.3	滑动后的惯性时间，单位为秒。
slideRate	Number	0.1	滑动后的惯性距离比例（distance = slideRate * speed）。

slots：用于填充 TabItem。

events

属性	函数	说明
input	Function (value: [string, number]): void	改变选中的 item 时触发。

TabItem

props

属性	类型	说明
id	String，Number	标识每个 item 的 id。

slots：填充内容的占位。

Demo

效果示例

代码示例

<template>
  <Tab v-model="selected">
    <TabItem v-for="i in 3" v-bind:key="i" :id="i">选项 {{ i }}</TabItem>
  </Tab>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        selected: 1,
      };
    },
  };
</script>