vue阻止事件冒泡

最近公司项目有个需求：手动写一个类似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>