点击空白处关闭弹窗
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 } } }) } ...
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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所有版本都有出现)