uniapp vue3 梯形选项卡组件

实现的效果图:

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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

idea启动oom了解决

解决 Error:java: java.lang.OutOfMemoryError: WrappedJavaFileObject[org.jetbrains.jps.javac.InputFileObject[file:///D:/mingan/pb/backend/src/main/java/com/cy/backend/service/impl/StorageServiceImpl.java]]pos36199: WrappedJavaFileObject[org.jetbrains.jps.j…

你是不是分不清哪些字体是商用,哪些非商用?快来看,免得莫名其妙负债。

前言 最近发现有好多小伙伴在做PPT的时候&#xff0c;都有一个很不好的习惯&#xff1a;没有调整好字体。 这里说的没有调整好字体的意思是&#xff1a;在一些公开发布的内容上使用一些可能造成侵权的字体。 字体侵权‌的后果相当严重。轻者可能面临法律纠纷&#xff0c;重者…

consul服务注册发现与配置中心

目录 1 consul安装与运行 1.1 下载方式 1.2 安装 1.3 启动 1.4 访问方式 2 consul 实现服务注册与发现 2.1 引入 2.2 服务注册 2.3 服务发现 3 consul配置中心 3.1 基础配置 Eureka已经停止更新了&#xff0c;consul是独立且和微服务功能解耦的注册中心&#xff0c;…

Nginx配置虚拟主机

基于域名的虚拟主机 修改配置 进入nginx里的conf目录 修改nginx配置文件nginx.conf vi nginx.conf worker_processes auto;(自动识别CPU数) worker_rlimit_nofile 20480;&#xff08;指定 worker 子进程可以打开的最大文件句柄数&#xff0c;默认为1024&#xff09; use …

杀死端口占用的进程

1、查看端口的进程&#xff0c;以9023为例 &#xff08;1&#xff09;方法1 netstat -tunpl|grep 9023 &#xff08;2&#xff09;方法2 ss -tulpan |grep 9023 &#xff08;3&#xff09;方法3 netstat -ntlp |grep 9023 &#xff08;4&#xff09;方法4 lsof -i:9023 …

百度移动刷下拉词工具:快速出下拉词的技术分析

都2024年了&#xff0c;你还在做SEO百度下拉&#xff1f;答案当然是肯定的&#xff0c;虽然百度的搜索流量不如从前&#xff0c;但移动端的流量依然是巨大的&#xff01;除了百度SEO快排以外&#xff0c;下拉也是一大流量入口&#xff0c;尤其是在移动端搜索的流量越来越大时&a…

计算机组成原理-数值的表示与运算(进制)

在冯诺依曼体系结构中&#xff0c;计算机的3个特点中&#xff0c;有软件以二进制&#xff08;2#&#xff09;的形式表示&#xff0c;也就是数据以二进制的形式存入计算机中 其运算规则为 在有符号数中&#xff1a;1.xxx表示-0.xxx&#xff0c;1表示负号 上述的小数点是我们的认…

鸿蒙手势交互(三:组合手势)

三、组合手势 由多种单一手势组合而成&#xff0c;通过在GestureGroup中使用不同的GestureMode来声明该组合手势的类型&#xff0c;支持顺序识别、并行识别和互斥识别三种类型。 GestureGroup(mode:GestureMode, gesture:GestureType[]) //- mode&#xff1a;为GestureMode枚…

vue2中字符串动态拼接字段给到接口

【设计初衷是用户可根据给定的字段进行准确描述】 实现功能&#xff1a; 1. 文本域内容串动态配置字段&#xff0c;以$ {英文}拼接格式给到接口。 &#xff08;传参如&#xff1a;$ {heat_status_code}正常&#xff0c;$ {wdy_temp}也正常&#xff01;&#xff09; 2. 编辑时根…

table表格,让thead固定,tbody内容滚动,关键是都对齐的纯css写法

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f…

Postman如何测试WebSocket接口!

01、WebSocket 简介 WebSocket是一种在单个TCP连接上进行全双工通信的协议。 WebSocket使得客户端和服务器之间的数据交换变得更加简单&#xff0c;允许服务端主动向客户端推送数据。在WebSocket API中&#xff0c;浏览器和服务器只需要完成一次握手&#xff0c;两者之间就直…

【Linux 20】线程控制

文章目录 &#x1f308; 一、创建线程⭐ 1. 线程创建函数⭐ 2. 创建单线程⭐ 3. 给线程传参⭐ 4. 创建多线程⭐ 5. 获取线程 ID &#x1f308; 二、终止线程⭐1. 使用 return 终止线程⭐ 2. 使用 pthread_exit 函数终止线程⭐ 3. 使用 pthread_cancel 函数终止线程 &#x1f30…

HTTP协议详解以及常见的状态码

HTTP协议的定义&#xff1a; HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;是一种建立在TCP&#xff08;传输控制协议&#xff09;之上的无状态连接协议。它是互联网的基础协议之一&#xff0c;用于客户端与服务器之间的通信。HTTP规定…

【Python】练习:控制语句(二)第1关

第1关&#xff1a;分支结构基础实训 第一题第二题第三题第四题&#xff08;※&#xff09;第五题&#xff08;※&#xff09;第六题第七题 第一题 #第一题 for temp in [-280, -100, 0, 20, 120, 200]:#请在下面编写代码# ********** Begin ********** #if temp>-273.15:F9/…

如何选择适合客户运营团队的帮助中心搭建工具?8款工具盘点

在竞争激烈的商业环境中&#xff0c;客户运营团队需要高效、便捷的工具来搭建帮助中心&#xff0c;以提升客户服务质量和用户体验。选择合适的帮助中心搭建工具&#xff0c;不仅能提高团队工作效率&#xff0c;还能增强客户满意度和忠诚度。本文将为您盘点八款适合客户运营团队…

中间件安全(二)

本文仅作为学习参考使用&#xff0c;本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 前言: 前文链接&#xff1a;中间件安全&#xff08;一&#xff09; 本文主要讲解Couchdb数据库未授权越权漏洞&#xff08;CVE-2017-12635&#xff09;。 靶场链接&#xff1a;Vu…

爱普生相机SD卡格式化后数据恢复指南

我借了朋友的‌爱普生相机&#xff0c;想查看一下内存&#xff0c;哎呀&#xff0c;一不小心按错了&#xff0c;竟然执行了格式化操作&#xff0c;这可真是太让人郁闷了&#xff0c;这还有机会挽救数据吗&#xff1f;心塞&#xff0c;求帮助&#xff01; 随着数码摄影的普及&am…

java框架

Oozie任务调度框架 Hue hadoop的WEB工具 seatunnel 数据同步框架 TIDB 大数据库支持事物 StreamX fink和spark的集成 OceanBase 阿里巴巴数据库 dooringx-lib、AntV 可视化H5工具 lowcode、Appsmith&#xff08;推荐&#xff09;、nocoBase 、Budibase、taskbuilder 低代…

【最经典的79个】软件测试面试题(内含答案)

001.软件的生命周期(prdctrm) 计划阶段(planning)-〉需求分析(requirement)-〉设计阶段(design)-〉编码(coding)->测试(testing)->运行与维护(running maintrnacne) 测试用例 用例编号 测试项目 测试标题 重要级别 预置条件 输入数据 执行步骤 预期结果 0002.问&…

Linux基础权限

Linux基础权限 shell的概念Linux基础权限Linux的两种用户Linux的权限管理权限认知权限设置权限掩码粘滞位 shell的概念 &#xff08;shell&#xff09;命令行解释器 的存在意义&#xff1a; 将用户的命令翻译给操作系统&#xff0c;然后返回OS的结果给用户&#xff1b;保护OS…