uniapp vue3 梯形选项卡组件

实现的结果图：

切换选项卡表现不同的内容，把这个选项卡做成了一个组件，必要的自取。

1. // 组件名为 trapezoidalTab
2. <template>  
3. <view class="pd24">
4.          <view class="nav">
5.            <!-- 左侧 -->
6.            <view class="item" :class="{ active: activeIndex === 0 }" @click="changeTab(0)">
7.                          <view :class=" activeIndex === 0 ? 'activeTxt black' : 'itemTxt' ">
8.                                  {{leftLabel}}
9.                          </view>
10.            </view>
11.                  <!-- 右侧 -->
12.                  <view class="item" :class="{ active: activeIndex === 1 }"  @click="changeTab(1)">
13.                          <view :class="activeIndex == 1 ? 'activeTxt black' : 'itemTxt' ">
14.                                  {{rightLabel}}
15.                          </view>
16.                  </view>
17.          </view>
18.          
19.          <view class="content">
20.                  <view v-if='activeIndex === 0'>
21.                          <slot name="left"></slot>
22.                  </view>
23.                  <view v-if='activeIndex === 1'>
24.                           <slot name="right"></slot>
25.                  </view>
26.          </view>
27. </view>
28. </template>  
29.   
30. <script setup>
31.         import {
32.                 ref,
33.                 defineProps,
34.                 defineEmits,
35.         } from 'vue'
36.        
37.         const props = defineProps({
38.                 leftLabel: {
39.                   type: String,
40.                   default: '到店取'
41.                 },
42.                 rightLabel: {
43.                   type: String,
44.                   default: '直达送'
45.                 },
46.                 activeIndex: {
47.                   type: Number,
48.                   default: 0
49.                 },
50.         })
51.         const emit = defineEmits(['changeTab'])
52.         const changeTab=(val)=> {
53.                 emit('changeTab',val)
54.         }  
55. </script>  
56.   
57. <style lang="scss" scoped>
58.         .nav{
59.                 display: flex;
60.                 align-items: flex-end;
61.         }
62.         .nav .item{
63.                 flex: 1;
64.                 height: 80rpx;
65.                 background: #E6E6E6;
66.                 border-radius: 10rpx 10rpx 0 0;
67.                 position: relative;
68.                 list-style: none;
69.         }
70.         .nav .item.active{
71.                 height: 96rpx;
72.                 background: #FFF;
73.         }
74.         .nav .item:first-child:before,  
75.         .nav .item:last-child:before {  
76.             content: '';  
77.             display: none;  
78.             width: 20rpx;  
79.             height: 100%;  
80.             background: #FFF;  
81.             position: absolute;  
82.             top: 0;  
83.             z-index: 10;  
84.         }  
85.           
86.         .nav .item:first-child:before {  
87.             right: -10rpx;  
88.             border-radius: 0 10rpx 0 0;  
89.             transform: skew(10deg);  
90.         }  
91.           
92.         .nav .item:last-child:before {  
93.             left: -10rpx;  
94.             border-radius: 10rpx 0 0 0;  
95.             transform: skew(-10deg);  
96.         }  
97.           
98.         .nav .item.active:first-child:before,  
99.         .nav .item.active:last-child:before {  
100.             display: block;  
101.         }
102.         .itemTxt{
103.                 height: 80rpx;
104.                 text-align: center;
105.                 line-height: 80rpx;
106.                 font-weight: 500;
107.                 font-size: 28rpx;
108.                 color: rgba(0,0,0,0.4);
109.         }
110.         .activeTxt{
111.                 text-align: center;
112.                 height: 96rpx;
113.                 line-height: 96rpx;
114.                 font-weight: bold;
115.                 font-size: 32rpx;
116.         }
117.        
118.         .content{
119.                 width: 100%;
120.                 background: #fff;
121.         }
122. </style>

复制代码

使用组件：

1. <trapezoidal-tab @changeTab="changeTab" :activeIndex='activeIndex'>
2.         <template v-slot:left>
3.                 <view>左边部分内容</view>
4.         </template>
5.                        
6.         <template v-slot:right>
7.                 <view>右边部分内容</view>
8.         </template>
9. </trapezoidal-tab>
11. const activeIndex = ref(0) //tab选项卡 0：到店取 1：直达送
12. // 切换tab选项卡
13. const changeTab =(val)=>{
14.         activeIndex.value = val
15. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。