vue3中，当前页中封装tab切换模块

vue3中，当前页中封装tab切换模块

效果

代码

1、主页面

index.vue

<template> <div class="main-content"> <ChangeCurBtn :btn-data-source="btnDataSource" class="changeCurBtn" :cur-page="curPage" @click-page="handleCurPage" /> <div v-show="curPage == 'baseInfo'">baseInfo</div> <div v-show="curPage == 'otherUnit'">otherUnit</div> <div v-show="curPage == 'persInfo'">persInfo</div> <div v-show="curPage == 'labInfo'">labInfo</div> <div v-show="curPage == 'scientificTeam'">scientificTeam</div> <div v-show="curPage == 'appendix'">appendix</div> </div> </template> <script setup> import ChangeCurBtn from '@/views/components/changeCurTab.vue' const btnDataSource = ref([ { key: 'baseInfo', type: '', label: '基本信息', }, { key: 'otherUnit', type: '', label: '其他参与单位信息', }, { key: 'persInfo', type: '', label: '人员基本情况', }, { key: 'labInfo', type: '', label: '实验室信息', }, { key: 'scientificTeam', type: '', label: '科研攻关团队信息', }, { key: 'appendix', type: '', label: '附件上传', }, ]) const curPage = ref('baseInfo') const handleCurPage = (params) => { curPage.value = params } </script> <style lang="scss" scoped> @import url('../style/main.scss'); .changeCurBtn { margin-bottom: 40px; } </style> 

2、样式文件

src\app\science\views\style\main.scss

.main-content{ 
    color: red; } 

3、组件文件

src\app\science\views\components\changeCurTab.vue

<template> <div class="item-content"> <el-button v-for="item in dataSource" :key="item.key" :class="curBtn === item.key ? 'cur-btn' : ''" :type="item.type" @click="handleClick(item.key)" > { 
  { item.label }} </el-button> </div> </template> <script> export default defineComponent({ name: 'ChangeCurTab', props: { curPage: { require: true, type: String, default: 'baseInfo', }, btnDataSource: { require: true, type: Array, default: () => [], }, }, emits: ['clickPage'], setup(props, { emit }) { const { btnDataSource, curPage } = toRefs(props) const state = reactive({ curBtn: curPage, dataSource: btnDataSource, }) const handleClick = (params) => { // state.curBtn = params emit('clickPage', params) state.dataSource.map((item) => { if (item.key === params) { item = { ...item, type: 'primary' } } else { item = { ...item, type: '' } } return item }) } return { ...toRefs(state), handleClick, } }, }) </script> <style lang="scss" scoped> .item-content { width: 80%; display: flex; flex-flow: row nowrap; justify-content: flex-start; .cur-btn { color: #00a797; background: #e6f6f5; border-color: #b3e5e0; } } </style> 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10745.html