vue3 选中对话框时对话框右侧出一个箭头效果
作者：你好龙卷风
本文主要介绍了Vue3实现选中对话框带箭头效果的方法,首先通过后台获取数据进行遍历,利用ts代码判断选中下标与循环游标是否一致以改变样式,感兴趣的朋友一起看看吧
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画出带箭头的提示框效果，感兴趣的朋友一起看看吧
通过css画出带箭头的提示框
一、画出一个提示框
<div id="notice">
</div>
#notice {
width: 150px;
height: 175px;
border: 1px solid #9D9D9D;
/* 移动到屏幕中间 方便查看*/
position: relative;
left: 50%;
right: 50%;
}效果
二、画出一个实心箭头
原理：无大小的div设置30px的边框全透明，再单独设置要显示一侧边框的颜色和大框一致
<div id="notice">
<div id="shixin"></div>
</div>
#shixin {
border: 30px solid transparent;
border-right-color: #9D9D9D; /*颜色和#notice框一致*/
position: absolute;
top: 10px;
left: -60px;
}
三、用一个空心div覆盖在上面，只漏出1px的左边两个边
<div id="notice">
<div id="shixin"></div>
<div id="kongxin"></div>
</div>
#kongxin {
border: 30px solid transparent;
border-right-color: #fff;
position: absolute;
top: 10px;
left: -59px; /**/
}
完整代码
<style>
#notice {
width: 150px;
height: 175px;
border: 1px solid #9D9D9D;
/* 移动到屏幕中间 方便查看*/
position: relative;
left: 50%;
right: 50%;
}
#shixin {
border: 30px solid transparent;
border-right-color: #9D9D9D; /*和#notice框一致*/
position: absolute;
top: 10px;
left: -60px;
}
#kongxin {
border: 30px solid transparent;
border-right-color: #fff; /*空心，和背景色一致*/
position: absolute;
top: 10px;
left: -59px; /*和实心框错开1px 漏出箭头左边两边*/
}
</style>
<div id="notice">
<div id="shixin"></div>
<div id="kongxin"></div>
</div>到此这篇关于vue3 选中对话框时对话框右侧出一个箭头效果的文章就介绍到这了,更多相关vue3对话框右侧出一个箭头内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！