uni-app select组件点击空白或其他select时自动隐藏下拉列表

在uni-app中，select组件的下拉列表在用户点击空白区域或其他select组件时自动隐藏是一个常见的需求。为了实现这一功能，我们需要监听页面的点击事件，并判断点击目标是否在下拉列表之外。以下是一个示例代码，展示了如何实现这一功能：

1. 页面模板 (template):

<template>
  <view class="container">
    <select v-model="selected1" @change="handleChange" ref="select1">
      <option v-for="item in options" :key="item.value" :value="item.value">{{ item.label }}</option>
    </select>
    <select v-model="selected2" @change="handleChange" ref="select2">
      <option v-for="item in options" :key="item.value" :value="item.value">{{ item.label }}</option>
    </select>
  </view>
</template>

1. 页面脚本 (script):

<script>
export default {
  data() {
    return {
      selected1: '',
      selected2: '',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        // 更多选项
      ],
      isDropdownVisible: false,
    };
  },
  mounted() {
    document.addEventListener('click', this.handleClickOutside);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleClickOutside);
  },
  methods: {
    handleClickOutside(event) {
      const select1 = this.$refs.select1.$el.querySelector('.uni-select-dropdown');
      const select2 = this.$refs.select2.$el.querySelector('.uni-select-dropdown');
      
      if (!select1.contains(event.target) && !select2.contains(event.target)) {
        this.hideDropdown();
      }
    },
    hideDropdown() {
      // 假设你有一个方法来控制下拉列表的显示状态，这里只是示例
      // 实际操作中，你可能需要调用组件的方法或者修改组件的props
      // 这里仅模拟隐藏下拉列表的效果
      this.isDropdownVisible = false;
    },
    handleChange(event) {
      // 处理选择变化
      console.log(event.target.value);
    },
  },
};
</script>

1. 样式 (style):

样式部分在这个例子中不是关键，但确保你的select组件样式正确，特别是下拉列表的类名（.uni-select-dropdown）需要与实际的一致。如果类名不同，请根据实际情况调整。

注意：在uni-app中，直接操作DOM或组件内部状态可能不是最佳实践，特别是当组件库提供了相应的方法或属性来控制下拉列表的显示时。上述代码是一个基本的示例，实际应用中你可能需要根据uni-app的select组件API进行调整。如果select组件提供了visible属性或其他方法来控制下拉列表，应优先使用这些方法。