切换栏
使用方式
<template>
<sp-tab>
<sp-tab-item text="项目一" @click="project = 0"></sp-tab-item>
<sp-tab-item text="项目二" @click="project = 1"></sp-tab-item>
<sp-tab-item text="项目三" @click="project = 2"></sp-tab-item>
</sp-tab>
<div v-if="project == 0" style="height:3000px">1</div>
<div v-if="project == 1">2</div>
<div v-if="project == 2">3</div>
</template>
</script>
sp-tab
props / 属性
| 参数 |
类型 |
默认值 |
作用 |
| active |
Number |
0 |
默认激活的下标 |
| lineHeight |
Number |
2 |
线的高度 |
| autoFixed |
Number |
false |
tab到顶部后是否自动定位到顶部 |
| fixed |
Boolean |
false |
开启后，tab会直接定位到顶部。如果该属性开启后autoFixed无效 |
sp-tab-item
props / 属性
| 参数 |
类型 |
默认值 |
作用 |
| text |
String |
null |
显示的文本 |
methods / 暴露方法
| 参数 |
作用 |
返回参数 |
| click |
sp-tab-item点击事件 |
index,该元素的下标 |