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

Posted 2021-03-22 lovebear123

html：

<div class="divInput" v-close>
    <div class="input" @click="opensort">
      <input v-model="sortvalue" type="text" placeholder="分类" />
      <vicon :type="‘triangle‘" class="topimg" />
    </div>
    <div class="list" v-show="show">
      <ul>
        <li
          @click="getvalue(index, sortitem)"
          v-for="(sortitem, index) in tableData"
          :key="sortitem.index"
        >
          {{ sortitem.name }}
        </li>
      </ul>
    </div>
  </div>

View Code

js：

<script>
export default {
  name: "docselect",
  data() {
    return {
      tableData: [
        {
          name: "专业论文"
        },
        {
          name: "植物设计"
        },
        {
          name: "景观设计"
        },
        {
          name: "规划研究"
        },
        {
          name: "生态理念"
        },
        {
          name: "施工技术"
        },
        {
          name: "工程管理"
        }
      ],
      show: false,
      sortvalue: ""
    };
  },
  methods: {
    opensort() {
      this.show = !this.show;
    },
    getvalue(index, sortitem) {
      this.sortvalue = sortitem.name;
      this.show = false;
    }
  },
  components: {
    vicon
  }
};
</script>

View Code

 css：

<style>
.divInput {
  width: 78px;
  height: auto;
  /* margin-left: 48px; */
  display: inline-block;
}
ul li {
  list-style: none;
}
.input {
  width: 74px;
  height: 20px;
  line-height: 40px;
  padding-left: 5px;
  /* border: 1px solid #cccccc; */
  position: relative;
  cursor: pointer;
}
.input input:focus {
  outline: 0 !important;
}
.input input {
  border: none;
  outline: none;
  width: 55px;
  float: left;
  margin: auto;
  cursor: pointer;
  margin-top: 2px;
}

.input img {
  position: absolute;
  right: 34px;
  top: 48%;
}
.list {
  background: #ffffff;
  width: 72px;
  overflow: hidden;
  position: absolute;
  box-shadow: 0px 3px 6px rgba(191, 191, 191, 1);
  opacity: 1;
  z-index: 1;
  display: block;
}
.list.close {
  display: none;
}
.topimg {
  width: 18px;
  height: 15px;
  float: left;
}
.list ul li {
  height: 30px;
  cursor: pointer;
  margin: 0px 4px 0px -35px;
  font-size: 12px;
}
.list ul li:hover {
  background-color: #e6e6e6;
}
</style>

View Code

 

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

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


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

 

效果图：