zoukankan      html  css  js  c++  java
  • 点击空白处关闭弹窗

    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
              }
            }
          })
    }
    ...
  • 相关阅读:
    (字符串)子串变位词
    反转链表 II
    翻转链表
    覆盖索引
    MySQL索引结构之Hash索引、full-text全文索引(面)
    MySQL索引结构之B+树索引(面)
    MYSQL 存储引擎(面)
    MySQL架构(面)
    如何在Linux Mint 20系统上安装Pip
    如何在CentOS 8系统服务器上安装Nginx
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/13364716.html
Copyright © 2011-2022 走看看