最近公司项目有个需求：手动写一个类似element-ui的弹框效果，点击外层遮罩触发事件，而点击内层不触发改点击事件。根据js的事件冒泡可以处理，vue的修饰符可以直接阻止事件冒泡。
<div class="select" :style="{height:maskHeight,background:selectBgc}" @click="selectInfo"> //阻止的是外层的selectInfo事件 <div class="up" @click.stop> <div class="nav-head"> <!-- 面包屑 --> <breadcrumb :breadList="breadList"></breadcrumb> <span class="vertical-line"></span> <div class="tag f12" > <div class="ellipsis"> <span> 筛选条件：</span> <span v-show="isShowTagList">全部</span> <el-tag v-for="(tag,index) in tagList" :key="index" closable @close="handleClose(tag)" > {{tag.text}} </el-tag> </div> </div> <div class="search"> <el-input v-model="inputValue" placeholder="请输入接入平台名称" clearable @input="querySearchAsync" ></el-input> <el-button class="primary-button" icon="el-icon-circle-plus-outline" size="small" @click="platAdd" ></el-button> </div> </div> <div v-show="isShowSelectList"> <choose-list :list="chooseList" :key="chooseListKey" @multiSelectVehicle="selectVehicle" ref="chooseDrawer"></choose-list> </div> </div> <div class="shrink"> //阻止的是外层的selectInfo事件,同时点击触发showSelects事件 <a @click.stop="showSelects"> <el-tooltip class="item" effect="dark" :content="this.selectContent" placement="right" > <i class="el-icon-d-arrow-right" :style="{ transform: transformIcon }" ></i> </el-tooltip> </a> </div> </div>