uniapp vue3 梯形选项卡组件

news/2025/1/15 12:25:29/

实现的效果图:

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

// 组件名为 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/news/1526231.html

相关文章

web基础之文件上传

1.下载安装 下载地址 链接&#xff1a;百度网盘-链接不存在 提取码&#xff1a;jhks 安装 直接把他放在phpstudy的WWW目录中。&#xff08;phpstudy的下载安装&#xff0c;可以自行百度一下&#xff09; 打开 访问地址&#xff1a;127.0.0.1/upload-labs 问题 这里可能…

MCU与SOC的区别

自动驾驶中 MCU 与 SoC 的区别 在自动驾驶系统中&#xff0c;**MCU&#xff08;微控制单元&#xff0c;Microcontroller Unit&#xff09;和SoC&#xff08;系统级芯片&#xff0c;System on Chip&#xff09;**都是关键的电子元件&#xff0c;但它们在性能、功能和应用领域等…

MATLAB在嵌入式系统设计中的最佳实践

嵌入式系统设计是一个复杂的过程&#xff0c;涉及硬件和软件的紧密集成。MATLAB提供了一套全面的解决方案&#xff0c;从算法开发到代码生成&#xff0c;再到硬件验证&#xff0c;极大地简化了这一过程。本文将探讨使用MATLAB进行嵌入式系统设计的最佳实践&#xff0c;包括模型…

10分钟在钉钉上增加一个AI机器人

您只需 10 分钟&#xff0c;无需任何编码&#xff0c;即可为您的组织在钉钉平台上创建一个有大模型能力加成的 AI 机器人。这个机器人可以全天候&#xff08;7x24&#xff09;响应用户咨询&#xff0c;还能解答私域问题&#xff0c;成为您业务的专属机器人&#xff0c;提升用户…

时序数据库 TDengine 的入门体验和操作记录

时序数据库 TDengine 的学习和使用经验 什么是 TDengine &#xff1f;什么是时序数据 &#xff1f;使用RPM安装包部署默认的网络端口 TDengine 使用TDengine 命令行&#xff08;CLI&#xff09;taosBenchmark服务器内存需求删库跑路测试 使用体验文档纠错 什么是 TDengine &…

k8s service如何实现流量转发

1 基本概念 Service&#xff1a;在Kubernetes&#xff08;K8s&#xff09;中&#xff0c;Service用于将流量转发到后端的Pod中。Service提供了一种稳定的网络入口&#xff0c;尽管后端的Pod可能会动态改变 kube-proxy: kube-proxy是Kubernetes集群中的核心组件之一&#xff0…

C++:opencv多边形逼近二值图轮廓--cv::approxPolyDP

cv::approxPolyDP 是 OpenCV 中一个用于多边形逼近的函数。它通过 Douglas-Peucker 算法将复杂的轮廓简化为更少的点&#xff0c;这在图像处理和计算机视觉中非常有用。例如&#xff0c;简化的轮廓可以帮助提高形状分析和轮廓检测的效率。 函数原型 void cv::approxPolyDP(co…

基于Python的自然语言处理系列(9):使用TorchText与预训练词嵌入进行新闻分类

在前一篇文章中&#xff0c;我们展示了如何使用TorchText和RNN进行新闻分类。在这篇文章中&#xff0c;我们将改进之前的模型&#xff0c;通过使用预训练词嵌入、优化器的更改、正交初始化以及打包填充序列的技巧&#xff0c;提升模型的学习效率和效果。 1. 改进方向 提高模型…