快捷導(dǎo)航

vue3 選中對(duì)話框時(shí)對(duì)話框右側(cè)出一個(gè)箭頭效果

更新時(shí)間：2024年10月28日 14:36:13 作者：你好龍卷風(fēng)

本文主要介紹了Vue3實(shí)現(xiàn)選中對(duì)話框帶箭頭效果的方法,首先通過(guò)后臺(tái)獲取數(shù)據(jù)進(jìn)行遍歷,利用ts代碼判斷選中下標(biāo)與循環(huán)游標(biāo)是否一致以改變樣式,感興趣的朋友一起看看吧

vue3 選中對(duì)話框時(shí)對(duì)話框右側(cè)出一個(gè)箭頭

先看下做出的效果：

html代碼，其中l(wèi)istPlan.records是后臺(tái)拿到的數(shù)據(jù)進(jìn)行遍歷

<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  }} 執(zhí)行一次
              </div>
              <div style="margin-top: 5px">
                創(chuàng)建時(shí)間:{{ item.createTime }}
              </div>
            </div>
          </li>
        </ul>
</template>

ts代碼

原理：選中時(shí)判斷比較選中的下標(biāo)是和循環(huán)中的游標(biāo)一致改變樣式

let planId=null;
// 當(dāng)前選中的索引
const selectedIndex = ref(-1);
// 動(dòng)態(tài)生成 li 的樣式
const liStyle = (index: number) => {
  return {
    border: '1px solid #ccc', // 添加邊框
    borderRadius: '5px',
    padding: '10px', // 內(nèi)邊距
    margin: '5px 0', // 外邊距
    cursor: 'pointer', // 鼠標(biāo)指針樣式
    position: 'relative', // 相對(duì)定位，用于放置箭頭
    borderLeft: selectedIndex.value === index ? '2px solid rgb(9 95 240)' : '1px solid #ccc', // 選中時(shí)的框樣式
    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

原理：無(wú)大小的div設(shè)置30px的邊框全透明，再單獨(dú)設(shè)置要顯示一側(cè)邊框的顏色和大框一致

<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>

下面給大家介紹通過(guò)css畫出帶箭頭的提示框效果，感興趣的朋友一起看看吧

通過(guò)css畫出帶箭頭的提示框

一、畫出一個(gè)提示框

<div id="notice">
</div>
#notice {
            width: 150px;
            height: 175px;
            border: 1px solid #9D9D9D;
            /* 移動(dòng)到屏幕中間 方便查看*/
            position: relative;
            left: 50%;
            right: 50%;
        }

效果

二、畫出一個(gè)實(shí)心箭頭

原理：無(wú)大小的div設(shè)置30px的邊框全透明，再單獨(dú)設(shè)置要顯示一側(cè)邊框的顏色和大框一致

<div id="notice">
  <div id="shixin"></div>
</div>
#shixin {
            border: 30px solid transparent;
            border-right-color: #9D9D9D; /*顏色和#notice框一致*/
            position: absolute;
            top: 10px;
            left: -60px;
        }

三、用一個(gè)空心div覆蓋在上面，只漏出1px的左邊兩個(gè)邊

<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;
            /* 移動(dòng)到屏幕中間 方便查看*/
            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; /*和實(shí)心框錯(cuò)開1px 漏出箭頭左邊兩邊*/
        }
    </style>
 <div id="notice">
        <div id="shixin"></div>
        <div id="kongxin"></div>
  </div>

到此這篇關(guān)于vue3 選中對(duì)話框時(shí)對(duì)話框右側(cè)出一個(gè)箭頭效果的文章就介紹到這了,更多相關(guān)vue3對(duì)話框右側(cè)出一個(gè)箭頭內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: