邊框線(xiàn)虛線(xiàn)動(dòng)畫(huà)效果請(qǐng)參閱邊框虛線(xiàn)滾動(dòng)動(dòng)畫(huà)特效_虛線(xiàn)滾動(dòng)效果_你摯愛(ài)的強(qiáng)哥的博客-CSDN博客【代碼】邊框虛線(xiàn)滾動(dòng)動(dòng)畫(huà)特效。_虛線(xiàn)滾動(dòng)效果https://blog.csdn.net/qq_37860634/article/details/130507289?

碰撞檢測(cè)原理請(qǐng)前往?原生JS完成“一對(duì)一、一對(duì)多”矩形DIV碰撞檢測(cè)、碰撞檢查，通過(guò)計(jì)算接觸面積(重疊覆蓋面積)大小來(lái)判斷接觸對(duì)象DOM_js 碰撞檢測(cè)_你摯愛(ài)的強(qiáng)哥的博客-CSDN博客這里就需要去遍歷所有的target，計(jì)算每個(gè)重疊面積大小，挑出面積最大的那一個(gè)。stackArea=0代表沒(méi)有重疊；stackArea >0代表有交集。為了方便計(jì)算比較，我們通常是在上面的代碼基礎(chǔ)上加一個(gè)面積大小判斷，_js 碰撞檢測(cè)https://blog.csdn.net/qq_37860634/article/details/121688431

還可以用此組件實(shí)現(xiàn)類(lèi)似資源管理器的圈選效果

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-567271.html

sgRectSelect框選組件源碼??

<template>
    <div :class="$options.name" v-if="startPoint && endPoint" :style="style"
        :borderAnimate="borderAnimate === '' || borderAnimate">
        <slot></slot>
    </div>
</template>
  
<script>
import $g from "@/js/sg";
export default {
    name: 'sgRectSelect',
    data() {
        return {
            targets: [],//圈選目標(biāo)數(shù)組
            startPoint: null,
            endPoint: null,
            style: {
                width: '0px',
                height: '0px',
                top: '0px',
                left: '0px',
            },
            oldSelectedDoms: [],//記錄上一次圈選內(nèi)容用于對(duì)比 
            disabled_: false,
            triggerRectElement_: null,
            rangeRectElement_: null,
            minDragDis_: null,
        }
    },
    props: [
        "data",//（必選）建議用一個(gè)復(fù)雜對(duì)象，方便后續(xù)識(shí)別操作
        /* data是一個(gè)數(shù)組格式:
        [
            {
                dom:文檔對(duì)象,//必選
                index:'索引',
                id:'元素的id',
                refName:'ref別名',
                selectEvent:'選中后的操作',
                unSelectEvent:'取消選中后的操作',
            } ,
        ...
        ]
        也可以是一維數(shù)組，只包含將可能被選中的DOM數(shù)組
  

到了這里，關(guān)于【sgRectSelect】Vue實(shí)現(xiàn)拖拽鼠標(biāo)圈選、劃區(qū)域、框選組件：矩形區(qū)域選中checkbox，并回調(diào)相關(guān)選中、取消選中的操作的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！