首页uniapp中用vue3把tabs标签封装成组件

uniapp中用vue3把tabs标签封装成组件

时间: 2023-11-26 16:04:08 浏览: 161

好的，让我来为您解答。在Uniapp中，可以使用Vue3将tabs标签封装成组件，以下是一个示例： ```vue <template> <div class="tabs"> <div class="tabs-header"> <div v-for="(tab, index) in tabs" :key="index" :class="{'active': activeTab === index}" @click="changeTab(index)" > {{ tab }} </div> </div> <div class="tabs-content"> <slot :name="tabs[activeTab]"></slot> </div> </div> </template> <script> export default { name: 'Tabs', props: { tabs: { type: Array, required: true } }, data() { return { activeTab: 0 } }, methods: { changeTab(index) { this.activeTab = index } } } </script> <style scoped> .tabs { display: flex; flex-direction: column; height: 100%; } .tabs-header { display: flex; justify-content: space-around; align-items: center; height: 50px; } .tabs-header div { cursor: pointer; padding: 10px; } .tabs-header div.active { border-bottom: 2px solid black; } .tabs-content { flex: 1; overflow-y: auto; } </style> ``` 在使用该组件时，只需要传入一个包含标签名的数组即可： ```vue <template> <Tabs :tabs="['Tab 1', 'Tab 2', 'Tab 3']"> <template #Tab 1> <div>Content for Tab 1</div> </template> <template #Tab 2> <div>Content for Tab 2</div> </template> <template #Tab 3> <div>Content for Tab 3</div> </template> </Tabs> </template> <script> import Tabs from '@/components/Tabs' export default { components: { Tabs } } </script> ``` 这样就可以实现一个简单的tabs组件了。希望能对您有所帮助。

阅读全文