邊框線虛線動畫效果請參閱邊框虛線滾動動畫特效_虛線滾動效果_你摯愛的強哥的博客-CSDN博客【代碼】邊框虛線滾動動畫特效。_虛線滾動效果https://blog.csdn.net/qq_37860634/article/details/130507289?

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

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

?文章來源地址http://www.zghlxwxcb.cn/news/detail-696226.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)容用于對比 
            disabled_: false,
            triggerRectElement_: null,
            rangeRectElement_: null,
            minDragDis_: null,
        }
    },
    props: [
        "data",//（必選）建議用一個復(fù)雜對象，方便后續(xù)識別操作
        /* data是一個數(shù)組格式:
        [
            {
                dom:文檔對象,//必選
                index:'索引',
                id:'元素的id',
                refName:'ref別名',
                selectEvent:'選中后的操作',
                unSelectEvent:'取消選中后的操作',
            } ,
        ...
        ]
        也可以是一維數(shù)組，只包含將可能被選中的DOM數(shù)組
  

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