Vue3 DropDown组件的实现之旅

前端

2023-11-21 11:22:27

揭秘Vue3 DropDown组件的奥妙

在现代网页设计中，下拉组件因其简洁、易用和交互性强而备受青睐。它广泛应用于表单、导航菜单、日期选择器等多种场景。今天，我们将使用Vue3来实现一个功能强大的下拉组件，并探索其背后的工作原理。

步步为营：创建Vue3 DropDown组件

1. 构思组件蓝图

在动笔编码之前，我们先来构思一下下拉组件的蓝图。下拉组件一般由两部分组成：

标签部分（dropLabel） ：包含文本和图标，用于显示组件的当前状态。
下拉列表部分（dropDownList） ：包含一组选项，当点击标签部分时展开。

2. 搭建组件骨架

有了蓝图，我们就可以开始搭建组件骨架了。首先，创建一个名为DropDown.vue的文件，并在其中写入以下代码：

<template>
  <div class="drop-down">
    <div class="drop-label" @click="toggle">
      <span>{{ label }}</span>
      <i class="icon" :class="isOpen ? 'open' : 'closed'"></i>
    </div>
    <ul class="drop-down-list" v-show="isOpen">
      <li v-for="option in options" @click="selectOption(option)">{{ option }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: 'Select an option'
    },
    options: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen;
    },
    selectOption(option) {
      this.$emit('select', option);
      this.isOpen = false;
    }
  }
};
</script>

<style>
.drop-down {
  position: relative;
}

.drop-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

.drop-label span {
  margin-right: 10px;
}

.icon {
  width: 16px;
  height: 16px;
  background-image: url(./assets/icon.svg);
  background-position: center;
  background-repeat: no-repeat;
}

.open {
  transform: rotate(180deg);
}

.drop-down-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  display: none;
}

.drop-down-list li {
  padding: 10px;
  cursor: pointer;
}

.drop-down-list li:hover {
  background-color: #eee;
}
</style>

3. 剖析组件工作原理

现在，让我们来剖析一下组件的工作原理：

label属性用于设置下拉组件的标签文本。
options属性用于设置下拉组件的选项列表。
isOpen数据属性用于跟踪下拉列表是否打开。
toggle()方法用于切换下拉列表的打开状态。
selectOption()方法用于当用户选择一个选项时触发select事件，并将所选选项作为参数传递。

4. 使用组件

现在，下拉组件已经准备就绪，我们可以将其导入到我们的Vue应用程序中并使用它了：

<template>
  <div>
    <drop-down label="Select a color" :options="['Red', 'Green', 'Blue']" @select="selectedColor"></drop-down>
  </div>
</template>

<script>
import DropDown from './components/DropDown.vue';

export default {
  components: {
    DropDown
  },
  methods: {
    selectedColor(color) {
      alert(`You selected ${color}`);
    }
  }
};
</script>