uniapp vue3 梯形选项卡组件

embedded/2024/12/22 2:05:38/

实现的效果图:

切换选项卡显示不同的内容,把这个选项卡做成了一个组件,需要的自取。

// 组件名为 trapezoidalTab
<template>  <view class="pd24"><view class="nav"><!-- 左侧 --><view class="item" :class="{ active: activeIndex === 0 }" @click="changeTab(0)"> <view :class=" activeIndex === 0 ? 'activeTxt black' : 'itemTxt' ">{{leftLabel}}</view></view><!-- 右侧 --><view class="item" :class="{ active: activeIndex === 1 }"  @click="changeTab(1)"> <view :class="activeIndex == 1 ? 'activeTxt black' : 'itemTxt' ">{{rightLabel}}</view></view></view> <view class="content"><view v-if='activeIndex === 0'><slot name="left"></slot></view><view v-if='activeIndex === 1'><slot name="right"></slot></view></view></view> 
</template>  <script setup> import {ref,defineProps,defineEmits,} from 'vue'const 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 lang="scss" 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 @changeTab="changeTab" :activeIndex='activeIndex'><template v-slot:left><view>左边部分内容</view></template><template v-slot:right><view>右边部分内容</view></template>
</trapezoidal-tab>const activeIndex = ref(0) //tab选项卡 0:到店取 1:直达送
// 切换tab选项卡
const changeTab =(val)=>{activeIndex.value = val
}


http://www.ppmy.cn/embedded/112110.html

相关文章

uni-app和Node.js使用uni-push2.0实现通知栏消息推送功能

前言 uniapp 提供了 unipush 统一推送服务,但是每次要推送消息的时候都要登陆 Dcloud 开发者后台&#xff0c;有点不方便&#xff0c;运营需要在我们的后台系统就可以完成操作。 效果演示 消息下发流程 名词解释 名词解释通知消息指定通知标题和内容后&#xff0c;由个推 SD…

【App】React Native

React Native 的优势&#xff1a; 开发体验好 用统一的代码规范开发移动端程序&#xff0c;不用关注移动端的差异.开发成本低 开发一次&#xff0c;可以生成 Android 和 IOS 俩个系统上的 App学习成本低 只要掌握 JavaScript 和 React 就可以进行移动端开发 React Native 的不…

优惠券线下使用情况数据分析

提升自己&#xff0c;掌握数据分析的能力&#xff0c;最快的方式就是实践&#xff01; 这里又是一个经典的数据分析项目——物流数据行业数据分析&#xff0c;有需要项目配套数据集的可以关注私信我免费获取(●◡●) PS&#xff1a;本文中全部代码都在Jupyter Notebook中编写…

旅游景区生活污水处理设备处理工艺和用途

诸城市鑫淼环保小编带大家了解一下旅游景区生活污水处理设备处理工艺和用途 旅游景区生活污水处理设备根据处理工艺和用途的不同&#xff0c;可分为多种类型&#xff1a; 物理处理设备&#xff1a;主要包括格栅、沉砂池、沉淀池等。这些设备通过物理方法去除污水中的固体物质、…

新能源汽车安全问题如何解决?细看“保护罩”连接器的守护使命

「当前市场上绝大部分电池的安全系数远远不够」。 在一场世界动力电池大会上&#xff0c;宁德时代的董事长曾毓群这样犀利直言。 从汽车开始向电动化转型升级那天起&#xff0c;动力电池的安全隐患就一直是个老生常谈的话题了。曾毓群的这句话&#xff0c;直接点明了行业的发展…

F5设备绑定EIP

公网IP 公网IP&#xff08;Public IP Address&#xff09;是指可以直接在互联网上访问的IP地址&#xff0c;用于标识网络上的设备或主机。它允许外部网络访问您的云服务器&#xff0c;如提供远程登录服务、访问Web服务器等。然而&#xff0c;这并不意味着公网IP不需要路由。 …

基于HTML5的下拉刷新效果

基于HTML5的下拉刷新效果 效果示例图示例代码 效果示例图 示例代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport&quo…

王者荣耀改重复名(java源码)

王者荣耀改重复名 项目简介 “王者荣耀改重复名”是一个基于 Spring Boot 的应用程序&#xff0c;用于生成王者荣耀游戏中的唯一名称。通过简单的接口和前端页面&#xff0c;用户可以输入旧名称并获得一个新的、不重复的名称。 功能特点 生成新名称&#xff1a;提供一个接口…