点击空白处关闭弹窗

html:

<div class="myTree" id="myTree">
        <el-form-item :label="labelTitle" :label-width="labelWidth" :prop="prop">
              <el-input v-model="orgName" :placeholder="placeholder1"  @click.native.stop="showTree" v-bind:class="{inputWidth : isNeed}"></el-input>
              <div class="myTree-list" :style="{height: popHeight}" v-show="isShowTree" @click.stop="stopMp">
                 <div class="tree-wrapper" :style="{height:height}">
                      <el-input class="tree-input"  prefix-icon="el-icon-search" :placeholder="placeHolder" v-model="filterText"></el-input>
                      <el-tree
                        class="filter-tree"
                        :empty-text="emptyText"
                        :highlight-current="true"
                        :expand-on-click-node="false"
                        auto-expand-parent
                        default-expand-all
                        :node-key="nodeKey"
                        :lazy = "lazy"
                        :data="data"
                        :props="defaultProps"
                        @node-click="handleNodeClick"
                        :filter-node-method="filterNode"
                        :default-expanded-keys="expandedKkeys"
                        ref="tree">
                        <div slot-scope="{ node, data }" :class="{'isXm':data.isLeaf, 'isOrg': !data.isLeaf&&!isSeletOrg}">
                          {{data.name}}
                        </div>
                      </el-tree>
                    </div>
                </div>
        </el-form-item>
    </div>

js:

...
mounted () {
    document.addEventListener('mouseup',(e) =>{
        var _con = document.getElementById('myTree')
        if(_con) {
          if(!_con.contains(e.target)) {
            this.isShowTree = false
          }
        }
      })
}
...

 

posted @ 2020-07-23 10:11  front-gl  阅读(419)  评论(0编辑  收藏  举报