uniapp开发的通用条件筛选组件，支持单选框、复选框、下拉框、下拉树、时间选择等,同时兼容小程序、APP、H5

在uniapp中创建一个通用条件筛选组件，你可以使用组件的方式封装这些控件，并通过props传递数据和事件。以下是一个简化的例子，展示了如何创建一个包含单选框、复选框和下拉框的通用筛选组件。

<template>
  <view>
    <!-- 单选框 -->
    <radio-group v-model="radioValue">
      <radio v-for="(item, index) in radioOptions" :key="index" :value="item.value" :checked="item.value === radioValue">{{ item.label }}</radio>
    </radio-group>
 
    <!-- 复选框 -->
    <checkbox-group v-model="checkboxValues">
      <checkbox v-for="(item, index) in checkboxOptions" :key="index" :value="item.value" :checked="checkboxValues.includes(item.value)">{{ item.label }}</checkbox>
    </checkbox-group>
 
    <!-- 下拉框 -->
    <picker mode="selector" :value="selectedValue" @change="onChange">
      <view class="picker">
        当前选择: {{ selectedLabel }}
      </view>
      <view v-for="(item, index) in pickerOptions" :key="index" class="picker-item">{{ item.label }}</view>
    </picker>
  </view>
</template>
 
<script>
export default {
  props: {
    radioOptions: Array,
    checkboxOptions: Array,
    pickerOptions: Array
  },
  data() {
    return {
      radioValue: '',
      checkboxValues: [],
      selectedValue: 0,
      selectedLabel: ''
    };
  },
  methods: {
    onChange(e) {
      this.selectedValue = e.detail.value;
      this.selectedLabel = this.pickerOptions[this.selectedValue].label;
      // 通过事件传递选中的值给父组件
      this.$emit('change', { type: 'picker', value: this.selectedValue });
    }
  }
};
</script>
 
<style>
.picker {
  padding: 10px;
}
.picker-item {
  padding: 10px;
}
</style>

在上述代码中，你可以看到一个通用筛选组件的基本结构，它包括单选框、复选框和下拉框。组件通过props接收数据，并通过自定义事件change向父组件传递选中的值。你可以根据实际需求扩展该组件，添加更多的控件和功能。