vue2封装下拉框组件案例

以下是一个简单的 Vue2 下拉框组件的封装案例。

<template>
  <div class="dropdown">
    <div class="dropdown-toggle" @click="toggleDropdown">
      {{ currentOption.text }}
    </div>
    <ul class="dropdown-menu" v-show="dropdownOpen">
      <li
        v-for="(option, index) in options"
        :key="index"
        @click="selectOption(option)"
      >
        {{ option.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    defaultOption: {
      type: Object,
      default: () => ({ value: null, text: 'Select an option' })
    }
  },
  data() {
    return {
      dropdownOpen: false,
      currentOption: this.defaultOption
    }
  },
  methods: {
    toggleDropdown() {
      this.dropdownOpen = !this.dropdownOpen
    },
    selectOption(option) {
      this.currentOption = option
      this.dropdownOpen = false
      this.$emit('option-selected', option)
    }
  }
}
</script>

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.dropdown-menu li {
  padding: 5px 10px;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background-color: #f5f5f5;
}
</style>

使用方法：

<template>
  <div>
    <dropdown :options="options" @option-selected="onOptionSelected" />
  </div>
</template>

<script>
import Dropdown from './Dropdown.vue'

export default {
  components: {
    Dropdown
  },
  data() {
    return {
      options: [
        { value: 1, text: 'Option 1' },
        { value: 2, text: 'Option 2' },
        { value: 3, text: 'Option 3' }
      ]
    }
  },
  methods: {
    onOptionSelected(option) {
      console.log('Selected option:', option)
    }
  }
}
</script>

在这个例子中，我们创建了一个 `Dropdown` 组件，它接受一个 `options` 属性，一个包含下拉框选项的数组。默认选项是 `defaultOption` 属性，如果没有提供，则默认为“选择一个选项”。

当用户点击下拉框时，我们通过 `toggleDropdown` 方法来打开或关闭下拉框。当用户选择一个选项时，我们通过 `selectOption` 方法来更新当前选项，并触发 `option-selected` 事件。

在使用该组件时，我们将 `options` 属性设置为一个包含选项的数组，并监听 `option-selected` 事件来处理用户选择的选项。

这个例子只是一个简单的 Vue2 下拉框组件的封装案例，你可以根据自己的需求进行修改和扩展。