vue实现自定义下拉菜单

最新推荐文章于 2022-08-08 14:18:18 发布

百事可口

最新推荐文章于 2022-08-08 14:18:18 发布

阅读量1.4k

点赞数

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/qq_38594056/article/details/115145425

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<template>
  <div class="selectBox" style="padding:50px">
    <input type="text" v-model="inputValue" @click.stop="showActive" />
    <ul class="list" v-show="isShow">
      <li
        :class="isActive == index ? 'blue' : ''"
        @click="clickName(item, index)"
        v-for="(item, index) in list"
        :key="index"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      isActive: -1, //，选中颜色
      inputValue: "",
      isShow: false,
      list: ["jack", "lucy", "Tom"],
    };
  },

  mounted() {
    let that = this;
    //点击页面空白处隐藏下拉列表
    document.addEventListener("click", function() {
      that.isShow = false;
    });
  },
  components: {},
  methods: {
    clickName(name, index) {
      new Promise((resolve, reject) => {
        this.inputValue = name;
        this.isActive = index;
        resolve("success");
      }).then((resolve) => {
        this.showNone();
      });
    },
    showActive() {
      this.isShow = true;
    },
    showNone() {
      this.isShow = false;
    },
  },
};
</script>
<style scoped>
.blue {
  background: #dae8fd;
  font-weight: 700;
}

.list li {
  cursor: pointer;
  font-size: 20px;
  line-height: 26px;
  padding-left: 10px;
}
</style>