vue实现下拉

Vue 实现下拉功能

使用原生 HTML 和 Vue 指令

通过 Vue 的 v-model 和 v-show 或 v-if 指令实现简单的下拉功能。

<template>
  <div>
    <button @click="toggleDropdown">Toggle Dropdown</button>
    <div v-show="isOpen">
      <ul>
        <li v-for="item in items" :key="item" @click="selectItem(item)">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      items: ['Option 1', 'Option 2', 'Option 3']
    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen
    },
    selectItem(item) {
      console.log('Selected:', item)
      this.isOpen = false
    }
  }
}
</script>

使用第三方库（如 Element UI）

Element UI 提供了现成的下拉组件，可以快速实现功能。

<template>
  <el-select v-model="selected" placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { value: '1', label: 'Option 1' },
        { value: '2', label: 'Option 2' },
        { value: '3', label: 'Option 3' }
      ]
    }
  }
}
</script>

自定义下拉组件

创建一个可复用的自定义下拉组件，封装逻辑和样式。

<template>
  <div class="custom-dropdown">
    <div class="dropdown-header" @click="toggleDropdown">
      {{ selected || placeholder }}
      <span class="arrow">{{ isOpen ? '▲' : '▼' }}</span>
    </div>
    <div class="dropdown-list" v-show="isOpen">
      <div
        class="dropdown-item"
        v-for="item in items"
        :key="item.value"
        @click="handleSelect(item)">
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    },
    placeholder: {
      type: String,
      default: 'Select an option'
    }
  },
  data() {
    return {
      isOpen: false,
      selected: ''
    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen
    },
    handleSelect(item) {
      this.selected = item.label
      this.$emit('select', item)
      this.isOpen = false
    }
  }
}
</script>

<style>
.custom-dropdown {
  position: relative;
  width: 200px;
}
.dropdown-header {
  padding: 8px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.dropdown-list {
  position: absolute;
  width: 100%;
  border: 1px solid #ccc;
  background: #fff;
  z-index: 1000;
}
.dropdown-item {
  padding: 8px;
  cursor: pointer;
}
.dropdown-item:hover {
  background: #f0f0f0;
}
.arrow {
  float: right;
}
</style>

处理点击外部关闭下拉

通过监听文档点击事件，判断点击是否在下拉组件外部。

mounted() {
  document.addEventListener('click', this.handleClickOutside)
},
beforeDestroy() {
  document.removeEventListener('click', this.handleClickOutside)
},
methods: {
  handleClickOutside(event) {
    if (!this.$el.contains(event.target)) {
      this.isOpen = false
    }
  }
}

动态加载下拉选项

通过异步请求动态加载下拉选项。

methods: {
  fetchOptions() {
    axios.get('/api/options')
      .then(response => {
        this.items = response.data
      })
      .catch(error => {
        console.error('Error fetching options:', error)
      })
  }
},
created() {
  this.fetchOptions()
}