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

更新時間：2024年10月28日 14:36:13 作者：你好龍卷風

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

vue3 選中對話框時對話框右側(cè)出一個箭頭

先看下做出的效果：

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

<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)建時間:{{ item.createTime }}
              </div>
            </div>
          </li>
        </ul>
</template>

ts代碼

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

let planId=null;
// 當前選中的索引
const selectedIndex = ref(-1);
// 動態(tài)生成 li 的樣式
const liStyle = (index: number) => {
  return {
    border: '1px solid #ccc', // 添加邊框
    borderRadius: '5px',
    padding: '10px', // 內(nèi)邊距
    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的邊框全透明，再單獨設置要顯示一側(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>

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

通過css畫出帶箭頭的提示框

一、畫出一個提示框

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

效果

二、畫出一個實心箭頭

原理：無大小的div設置30px的邊框全透明，再單獨設置要顯示一側(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;
        }

三、用一個空心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>

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

您可能感興趣的文章: