tab 选项卡-v2
- jp-tabbar 组件是通过 inject 方式实现的,对于特殊场景,如果他不适用,可以考虑扩展一下 jp-tabbar-v2 版本
基本使用
vue
<template>
<jp-tabbar-v2 v-model="attribute.active" :tab-list="[{ title: '水果' }, { title: '蔬菜' }, { title: '家电' }, { title: '熟食' }]"></jp-tabbar-v2>
<h3 class="mx-3 mt-3">内容较多时</h3>
<jp-tabbar-v2
v-model="attribute.active"
:tab-list="[
{ title: '水果' },
{ title: '蔬菜' },
{ title: '家电' },
{ title: '熟食' },
{ title: '水果' },
{ title: '蔬菜' },
{ title: '家电' },
{ title: '熟食' }
]"
></jp-tabbar-v2>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
active: 0
})
</script>
<style scoped lang="scss"></style>