宜昌营销网站建设,长沙房地产市场分析,网站怎么做漂亮点,附近找装修公司实现的效果图#xff1a; 切换选项卡显示不同的内容#xff0c;把这个选项卡做成了一个组件#xff0c;需要的自取。
// 组件名为 trapezoidalTab
template view classpd24view classnav!-- 左侧 --view cla…实现的效果图 切换选项卡显示不同的内容把这个选项卡做成了一个组件需要的自取。
// 组件名为 trapezoidalTab
template view classpd24view classnav!-- 左侧 --view classitem :class{ active: activeIndex 0 } clickchangeTab(0) view :class activeIndex 0 ? activeTxt black : itemTxt {{leftLabel}}/view/view!-- 右侧 --view classitem :class{ active: activeIndex 1 } clickchangeTab(1) view :classactiveIndex 1 ? activeTxt black : itemTxt {{rightLabel}}/view/view/view view classcontentview v-ifactiveIndex 0slot nameleft/slot/viewview v-ifactiveIndex 1slot nameright/slot/view/view/view
/template script setup import {ref,defineProps,defineEmits,} from vueconst props defineProps({leftLabel: {type: String,default: 到店取},rightLabel: {type: String,default: 直达送},activeIndex: {type: Number,default: 0},})const emit defineEmits([changeTab])const changeTab(val) {emit(changeTab,val) }
/script style langscss scoped.nav{display: flex;align-items: flex-end;}.nav .item{flex: 1;height: 80rpx;background: #E6E6E6;border-radius: 10rpx 10rpx 0 0;position: relative;list-style: none;}.nav .item.active{height: 96rpx;background: #FFF;}.nav .item:first-child:before, .nav .item:last-child:before { content: ; display: none; width: 20rpx; height: 100%; background: #FFF; position: absolute; top: 0; z-index: 10; } .nav .item:first-child:before { right: -10rpx; border-radius: 0 10rpx 0 0; transform: skew(10deg); } .nav .item:last-child:before { left: -10rpx; border-radius: 10rpx 0 0 0; transform: skew(-10deg); } .nav .item.active:first-child:before, .nav .item.active:last-child:before { display: block; }.itemTxt{height: 80rpx;text-align: center;line-height: 80rpx;font-weight: 500;font-size: 28rpx;color: rgba(0,0,0,0.4);}.activeTxt{text-align: center;height: 96rpx;line-height: 96rpx;font-weight: bold;font-size: 32rpx;}.content{width: 100%;background: #fff;}
/style
使用组件
trapezoidal-tab changeTabchangeTab :activeIndexactiveIndextemplate v-slot:leftview左边部分内容/view/templatetemplate v-slot:rightview右边部分内容/view/template
/trapezoidal-tabconst activeIndex ref(0) //tab选项卡 0到店取 1直达送
// 切换tab选项卡
const changeTab (val){activeIndex.value val
}
