vue 下拉框自定义 以及点击空白空白处关闭下拉框

html：

class="divInput" v-close>
    
class="input" @click="opensort">
      "sortvalue" type="text" placeholder="分类" />
      "'triangle'" class="topimg" />
    
    
class="list" v-show="show">
      

        <li
          @click="getvalue(index, sortitem)"
          v-for="(sortitem, index) in tableData"
          :key="sortitem.index"
        >
          {{ sortitem.name }}
        
      
    
  

View Code

js：

View Code

 css：

View Code

 

然后发现下拉框点击空白处不关闭，然后在加上一个事件

  //点击空白处关闭下拉框的div事件
  directives: {
    close: {
      inserted(el, binding, vnode) {
        window.onclick = function(e) {
          if (!el.contains(e.target)) {
            vnode.context.show = false;
          }
        };
      }
    }
  },


注意：这个事件和data是同级的

 

效果图：

           

最后发现如果两个下拉框就只能触发一个下拉框点击空白处关闭，之后在给事件修改一下，

directives: {
    close: {
      inserted(el, binding, vnode) {
        window.addEventListener("click", e => {
          if (!el.contains(e.target)) {
            vnode.context.show = false;
          }
        });
      }
    }
  },