uniapp [全端兼容] - 详细实现下拉菜单筛选效果功能，提供各种条件筛选场景单选、多选、日期时间、自定义插槽、排序上下箭头等（详细示例源代码，全平台兼容支持小程序、H5网站、app、nvue）

<template>
  <view class="dropdown-container">
    <view class="dropdown-header">
      <text>{{ selectedOption.name }}</text>
      <image class="dropdown-icon" src="/static/dropdown.png"></image>
    </view>
    <view class="dropdown-content" v-if="isOpen">
      <view class="dropdown-item" v-for="(item, index) in options" :key="index" @click="selectOption(item)">
        <text>{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      isOpen: false,
      selectedOption: { name: '选择条件', value: '' },
      options: [
        { name: '条件1', value: 'value1' },
        { name: '条件2', value: 'value2' },
        // ...更多条件
      ]
    };
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    },
    selectOption(option) {
      this.selectedOption = option;
      this.isOpen = false;
      // 触发条件选择事件，例如：发起网络请求获取数据
      this.$emit('condition-selected', option.value);
    }
  }
};
</script>
 
<style scoped>
.dropdown-container {
  position: relative;
}
.dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  cursor: pointer;
}
.dropdown-icon {
  width: 20px;
  height: 20px;
}
.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 10px 0;
  z-index: 10;
}
.dropdown-item {
  padding: 5px 10px;
  cursor: pointer;
}
.dropdown-item:hover {
  background-color: #f0f0f0;
}
</style>

这段代码提供了一个简单的下拉菜单筛选效果，用户可以点击选择不同的条件，并且在点击条件后会关闭下拉菜单。同时，它提供了一个condition-selected事件，用于在选择条件后进行进一步的操作，例如发起网络请求获取数据。这个例子展示了如何在uniapp中实现一个基本的下拉菜单筛选功能。