点击空白处关闭弹窗

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 @   front-gl  阅读(434)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
历史上的今天:
2019-07-23 button按钮的状态为disabled禁用状态,click事件无法触发,但是为什么touchstart下却依然可以触发
2018-07-23 vue项目如何刷新当前页面
2018-07-23 IE在开发工具启动的情况下(打开F12)时 JS才能执行
2018-07-23 ES6+Vue+webpack项目,在ie11中请求后台接口后数据更新,但是页面没有刷新?
2018-07-23 IE9样式错乱,IE11无法正常加载v-loading等问题 引入了babel-polyfill插件,依然出现”polyfill-eventsource added missing EventSource to window”的奇怪问题(ie所有版本都有出现)
点击右上角即可分享
微信分享提示