手写一个下拉框

最新推荐文章于 2024-08-31 09:22:40 发布

辣条小哥哥

最新推荐文章于 2024-08-31 09:22:40 发布

阅读量1.3k

点赞数 2

分类专栏： vue 文章标签： css html

本文链接：https://blog.csdn.net/weixin_44090040/article/details/120847921

版权

vue 专栏收录该内容

77 篇文章

订阅专栏

本文展示了如何使用Vue编写一个自定义的下拉框组件，包括输入框聚焦显示下拉列表、选中选项更新输入值等功能。通过点击元素实现选中效果，并应用过渡动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--
 * @Descripttion: 手写一个下拉框
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2021-09-28 18:14:16
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-10-19 15:47:07
-->


<template>
  <div class="select-box">
    <el-input
      @focus="selectGoods"
      v-model="input"
      placeholder="请选择"
    ></el-input>
    <transition name="fade">
      <ul class="terminalList" v-show="isShow">
        <li
          v-for="(item, index) in options"
          :key="index"
          class="terminal-item"
          @click="selectEquipment(item, index)"
          :class="{ 'active-class': activeIndex === index }"
        >
          <span>{{ item.label }}</span>
        </li>
      </ul>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      activeIndex: "",
      input: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
    };
  },
  methods: {
    selectGoods() {
      this.isShow = !this.isShow;
    },
    selectEquipment(item, index) {
      this.activeIndex = index;
      this.input = item.label;
      this.isShow = false;
    },
  },
};
</script>

<style  scoped lang="less">
.select-box {
  width: 125px;
  height: 100%;
}
.terminalList {
  width: 125px;
  overflow: hidden;
  position: absolute;
  left: 0px;
  top: 50px;
  background: linear-gradient(
    0deg,
    rgba(1, 16, 35, 0.8),
    rgba(25, 54, 91, 0.8),
    rgba(1, 16, 35, 0.8)
  );
  .terminal-item {
    width: 171px;
    height: 32px;
    color: #b6f4ff;
    margin: 7px auto;
    padding: 0px 12px;
    display: flex;
    flex-direction: row; /* 子元素横向排列 */
    justify-content: space-between; /* 相对父元素水平居中 */
    align-items: center;
    cursor: pointer;
  }
  .active-class {
    color: red;
    background-color: rgba(32, 156, 252, 0.4);
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.8s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>