Vue+Element UI 개요 팝 업 창 구현 전 과정

장면:하나의 순찰 증빙 서 류 는 n 개의 순찰 내 역 이 있 고 하나의 순찰 내 역 은 n 개의 순찰 항목 이 있다.
구현 효과:내 역 줄 의 개요 아이콘 으로 마 우 스 를 옮 길 때 현재 줄 의 순찰 항목 카드 팝 업 창 을 표시 하고 팝 업 창 을 옮 길 때 팝 업 창 을 닫 습 니 다.
순시 검사 증빙서류 의 상세 한 상황.

항목 개요 아이콘 으로 마우스 이동


효과 실현
data 에서 설명 하 는 변수

//     
outlineDialog: false,
//        
standSummary: [],
//         
outlineCard: {
    pageY: null,
    pageX: null,
    display: "none"
}

1.윈도우 코드
outline Dialog:기본 false,개요 팝 업 창 표시 표지
outline Style:팝 업 창의 동적 스타일 설정,computed 에서 모니터링 및 양 방향 데이터 바 인 딩 전시
leave:마우스 가 팝 업 카드 를 떠 난 이벤트

<!--      -->
<div class="summary-div" v-show="outlineDialog" ref="box-cardDiv" :style="outlineStyle"  @mouseleave="leave">
    <div class="summary-title">    </div>
    <ul class="summary-ul">
        <li class="summary-li"><span>    </span><span>    </span><span>    </span></li>
        <li v-for="(item, index) in standSummary" :key="index" class="summary-li"><span>{{item.inspectdetailName}}</span><span>{{item.isRequired ? ' ':' '}}</span> <span>{{item.isDisplay ? ' ':' '}}</span> </li>
    </ul>
</div>

2.팝 업 창 스타일 코드

<style lang="scss">
#box-cardDiv {
    position: absolute;
}

.summary-div {
    border: solid 1px #eee;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    padding: 10px 10px 0 10px;
    width: 300px;
    position: absolute;
    font-size: 13px;
}

.summary-ul {
    list-style: none;
    padding-left: 0;
    max-height: 350px;
    overflow-x: hidden;
    overflow-y: auto;
}

.summary-li {
    margin: 10px 10px 15px 10px;
    width: 250px;
    text-overflow: ellipsis;
    overflow: hidden;
    /* white-space: nowrap; */
    display: flex;

    span {
        margin: auto;
        width: 55px;
    }
}

.summary-li:first-child span:not(:first-child) {
    margin-left: 40px;
}

.summary-li:not(:first-child) span:nth-child(1) {
    width: 90px;
}

.summary-li:not(:first-child) span:nth-child(2) {
    width: 50px;
    margin-left: 45px;
}

.summary-li:not(:first-child) span:nth-child(3) {
    margin-left: 60px;
}

.summary-title {
    color: #cccccc;
    margin-left: 10px;
}
</style>

3.명세서 의 항목 개요 열 코드
checkStandSunmmary:개요 아이콘 으로 마우스 이동 이벤트

<el-table-column label="    " align="center" width="500">
    <template slot="header">
        <span>    </span>
        <span class="vertical"></span>
    </template>
    <template slot-scope="scope">
        <div class="col-summmary-div">
            <span class="col-summmary-format"><span>{{scope.row.firstListItem}}</span></span>
            <span>&nbsp; &nbsp;{{scope.row.equInspectplanItemList.length}}&nbsp; &nbsp;</span>
            <i class="el-icon-arrow-down" @mouseenter="checkStandSunmmary(scope.row)"></i>
        </div>
    </template>
</el-table-column>

4.outline Style 팝 업 창 카드 동적 스타일 제어
내 역 이 페이지 하단 에 있 을 때 카드 는 예전 처럼 전시회 가 일부분 덮 여 있 으 므 로 개요 아이콘 의 위치 에 따라 카드 가 열 린 위 치 를 동적 으로 계산 하고 밑 에 있 으 면 카드 를 위로 열 어야 한다.

computed: {
    outlineStyle() {
        let h = 45 * this.standSummary.length;
        let browser = document.body.clientHeight - 50;
        let pageY = this.outlineCard.pageY - 50;
        let pageX = this.outlineCard.pageX - 280;
        if (pageY + h > browser) {
            return `left: ${ pageX }px; top: ${ (pageY-h) }px; position: absolute; display: ${ this.outlineCard.display }`;
        } else {
            return `left: ${ pageX }px; top: ${ (pageY-60) }px; position: absolute; display: ${ this.outlineCard.display }`;
        }
    }
},

5.leave 마우스 가 팝 업 카드 를 떠 난 사건
마우스 가 카드 를 꺼 내 면 카드display스타일 을 none 으로 설정 하고v-showfalse 팝 업 창 으로 표시 하지 않 습 니 다.

/**
 *         
 */
leave() {
    this.outlineCard.display = "none";
    this.outlineDialog = false;
},

6.checkStandSunmmary 마 우 스 를 개요 아이콘 으로 옮 긴 이벤트
팝 업 카드 열기
현재 줄 의 검사 항목 집합 가 져 오기
현재 브 라 우 저의 X 축 Y 축 위치 가 져 오기
동적 설정 팝 업 카드 스타일 은 null 입 니 다.(display 는 none 을 쓰 는 것 을 제외 하고 다른 값 은 표시 되 지 않 습 니 다)

/**
 *        
 */
checkStandSunmmary(row) {
    this.outlineDialog = true;
    this.standSummary = row.equInspectplanItemList;
    this.outlineCard.pageY = window.event.clientY;
    this.outlineCard.pageX = window.event.clientX;
    this.outlineCard.display = null;
},

총결산
Vue+Element UI 구현 개요 작은 팝 업 창 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue+Element UI 작은 팝 업 창 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!