vue3 选中对话框时,对话框右侧出一个箭头

先看下做出的效果:

html代码,其中listPlan.records是后台拿到的数据进行遍历

<template><ul class="list"><li  style="height: 180px;width: 95%":key="index"v-for="(item, index) in listPlan.records":style="liStyle(index)"@click="selectItem(index,item.id)" ><span v-if="selectedIndex === index" class="shixin"></span><span v-if="selectedIndex === index" class="kongxin"></span><div   class="notice"><div class="fsPnameDiv"><div  class="fsPname" >{{ item.fsPname }}</div><div v-if="item.fsStatus=='00'" style="color: #0a8fe9"><span class="ant-badge-status-dot" style="background: rgb(68, 160, 239);"></span>激活</div><div v-if="item.fsStatus!='00'" style="color: rgb(208 213 217)"><span class="ant-badge-status-dot" style="background: rgb(208 213 217);"></span>禁用</div></div><div style="margin-top: 5px">每隔{{ item.fsExecinterval }}  {{ item.fsExecintervaltype  }} 执行一次</div><div style="margin-top: 5px">创建时间:{{ item.createTime }}</div></div></li></ul></template>

ts代码

原理:选中时判断比较选中的下标是和循环中的游标一致改变样式

let planId=null;// 当前选中的索引
const selectedIndex = ref(-1);
// 动态生成 li 的样式
const liStyle = (index: number) => {return {border: '1px solid #ccc', // 添加边框borderRadius: '5px',padding: '10px', // 内边距margin: '5px 0', // 外边距cursor: 'pointer', // 鼠标指针样式position: 'relative', // 相对定位,用于放置箭头borderLeft: selectedIndex.value === index ? '2px solid rgb(9 95 240)' : '1px solid #ccc', // 选中时的框样式borderBottom: selectedIndex.value === index ? '2px solid rgb(9 95 240)' : '1px solid #ccc',borderTop: selectedIndex.value === index ? '2px solid rgb(9 95 240)' : '1px solid #ccc',borderRight: selectedIndex.value === index ? '2px solid rgb(9 95 240)' : '1px solid #ccc',};
};

css

原理:无大小的div设置30px的边框全透明,再单独设置要显示一侧边框的颜色和大框一致

<style lang="less" scoped>.notice{align-items: flex-start;display: flex;flex-direction: column;padding: 8px 8px 12px;
}.shixin {border: 10px solid transparent;border-left-color: #095ff0;position: absolute;top: 45%;right: -20px;
}
.kongxin {border: 10px solid transparent;border-left-color: #fff;position: absolute;top: 45%;right: -18px;
}
</style>

参考:通过css画出带箭头的提示框 - 简书

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/883257.shtml

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

相关文章

任务看板是什么?如何选择合适的任务看板工具?

一、任务看板是什么&#xff1f; 任务看板是一种可视化的项目管理工具&#xff0c;它通常以板状的形式呈现&#xff0c;将任务以卡片的形式展示在不同的列中&#xff0c;每一列代表任务的不同状态。例如&#xff0c;待办事项、进行中、已完成等。任务看板能够帮助团队成员清晰…

Android--简易计算器实现

以下实验是利用逍遥模拟器搭建的简易计算器页面 对现有功能说明&#xff1a;可实现双目运算和开方单目运算&#xff1b; 待改进&#xff1a;需要实现表达式的计算&#xff1b;以及负数参与运算&#xff1b; //XML代码<?xml version"1.0" encoding"utf-8&q…

单片机入门教程

单片机入门教程 单片机是一种将中央处理器&#xff08;CPU&#xff09;、存储器、输入输出接口等集成在一个芯片上的微型计算机系统。本教程将带你从零开始学习如何使用一款常见的单片机——ATmega328P&#xff0c;并编写简单的控制程序。 1. 单片机简介 1.1 什么是单片机&a…

讲解 SpringMVC 中数据绑定的实现方式

在 Spring MVC 中,数据绑定是一个重要的特性,它允许将请求参数自动绑定到控制器方法的参数上,以及将模型数据自动填充到视图中。以下是 SpringMVC 中数据绑定的实现方式: 一、基本概念 数据绑定是将用户输入的数据(通常来自 HTTP 请求)与 Java 对象进行自动映射的过程。这…

排序(一)插入排序,希尔排序,选择排序,堆排序,冒泡排序

目录 一.排序 1.插入排序 2.希尔排序 3.选择排序 4.堆排序 5.冒泡排序 二.整体代码 1.Sort.h 2.Sort.c 3.test.c 一.排序 1.插入排序 插入排序基本思想:把待排序的记录按其关键码值的大小逐个插入到一个已经排好序的有序序列中&#xff0c;直到所有的记录插入完为 止…

ubuntu20.04上使用 Verdaccio 搭建 npm 私有仓库

安装nvm 首先安装必要的工具&#xff1a; apt update apt install curl下载并执行nvm安装脚本&#xff1a; curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash添加环境变量&#xff08;如果安装脚本没有自动添加&#xff09;。编辑 ~/.bash…

精通正则表达式:在Python中实现高效的文本匹配与替换

精通正则表达式:在Python中实现高效的文本匹配与替换 正则表达式是文本处理中的一项强大工具,尤其是在Python中,它为我们提供了灵活而高效的文本匹配与替换能力。无论是在数据清洗、文本解析还是格式化输出中,正则表达式都能够大幅提高我们的工作效率。在这篇博文中,我们…

mysql建表

作业要求&#xff1a; 根据以下需求完成图书管理系统数据库及表设计&#xff0c;并建库建表&#xff0c;并截图创建表的详细信息(desc 表名),不用添加数据 1. 用户表: 字段: 姓名&#xff0c;用户名&#xff0c;密码&#xff0c;电话&#xff0c;住址&#xff0c;专业及年级…

命名空间std, using namespace std

命名空间std&#xff0c;using namespace std 在标准C以前&#xff0c;都是用#include<iostream.h>这样的写法的&#xff0c;因为要包含进来的头文件名就是iostream.h。标准C引入了名字空间的概念&#xff0c;并把iostream等标准库中的东东封装到了std名字空间中&#x…

系统设计-通用用户权限管理系统

通用用户权限管理系统 一、系统安全二、登录授权三、系统内部安全1. 相关实体1.1 实体关系(ER)2. 菜单权限3. 接口权限3.1 权限获取3.2 接口调用鉴权4. 数据权限四、其他一个没有权限控制的系统,是非常不安全的。 在日常业务运营的系统中台,基本都会存在用户的菜单权限控制,…

【华为路由】OSPF多区域配置

网络拓扑 设备接口地址 设备 端口 IP地址 RTA Loopback 0 1.1.1.1/32 G0/0/0 10.1.1.1/24 RTB Loopback 0 2.2.2.2/32 G0/0/0 10.1.1.2/24 G0/0/1 10.1.2.1/24 RTC Loopback 0 3.3.3.3/32 G0/0/0 10.1.2.2/24 G0/0/1 10.1.3.1/24 RTD Loopback 0 4.4.4…

与ai聊我的代码架构

以包目录结构模块&#xff0c;以*.py脚本收纳模块。 (笔记模板由python脚本于2024年10月25日 18:39:10创建&#xff0c;本篇笔记适合编程基础的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;大咖免费“圣经”教程《…

在线教育(培训+考试)/企业培训-企业培训平台-企业培训平台系统-企业内部培训系统-在线教育-Java语言开发

介绍 企业培训平台支持企业培训考试全流程&#xff0c;在线学习、在线考试&#xff0c;成熟的企业培训考试解决方案&#xff0c;充分满足企业培训需求。 独立部署&#xff0c;仅内部员工登录使用&#xff0c;稳定、安全、高效&#xff0c;满足企业、政府、教育行业的各种在线学…

STM32-Modbus协议(一文通)

Modbus协议原理 RT-Thread官网开源modbus RT-Thread官方提供 FreeModbus开源。 野火有移植的例程。 QT经常用 libModbus库。 Modbus是什么&#xff1f; Modbus协议&#xff0c;从字面理解它包括Mod和Bus两部分&#xff0c;首先它是一种bus&#xff0c;即总线协议&#xff0c;和…

希尔排序的增量和缩小增量问题

对于这个问题&#xff0c;我犹豫了很久。现在鼓起勇气来聊一聊。但是我仍然觉的自己会说不好。这里藏着一些令人惊讶的东西&#xff0c;一直沉睡在没有被注意的角落里。 现在不用y_tab解释器。直接用c 语言。 void shellsort(int a[], int n) {int i,j,t, gapn;for(gap/2;gap…

Maya---骨骼绑定

调节骨骼大小 回车键确认骨骼 FK子集跟父集走 IK子集不跟父集走 前视图中按shift键添加骨骼 清零、删除历史记录&#xff0c;创建新的物体

多元线性回归【正规方程/sklearn】

多元线性回归【正规方程/sklearn】 1. 基本概念1.1 线性回归1.2 一元简单线性回归1.3 最优解1.4 多元线性回归 2. 正规方程求最优解2.1 线性回归的损失函数&#xff08;最小二乘法&#xff09;2.2 推导正规方程2.3 正规方程练习2.4 使用sklearn计算多元线性方程2.5 凸函数 3. 线…

哪款宠物空气净化器噪音低?希喂、美的、安德迈测评分享

今年双11&#xff0c;宠物空气净化器到底应该如何选&#xff1f;在所有的家电品类里&#xff0c;宠物空气净化器算是比较特殊的那个&#xff0c;产品迭代太快&#xff0c;我们把今年双11在售的各大主流品牌的宠物空气净化器统一汇总整理&#xff0c;发现基本一多半都是24年下半…

【Unity 安装教程】

Unity 中国官网地址链接 Unity - 实时内容开发平台 | 3D、2D、VR & AR可视化https://unity.cn/首先我们想要安装Unity之前&#xff0c;需要安装Unity Hub&#xff1a; Unity Hub 是 Unity Technologies 开发的一个集成软件&#xff0c;它为使用 Unity 引擎的开发者提供了一…

jaavascript使用正则表达式校验字符串pwd,是否符合 包含大写小写数字特殊字符长度超过8位

当然&#xff0c;您可以使用JavaScript中的正则表达式来校验一个字符串&#xff08;例如密码&#xff09;是否符合包含大写字母、小写字母、数字和特殊字符&#xff0c;并且长度超过8位的要求。以下是一个示例代码&#xff1a; function validatePassword(password) {// 定义正…