前端vue uni-app仿美团下拉框下拉筛选组件

要在Vue或uni-app中创建一个类似美团下拉筛选框的组件，你可以使用picker组件来实现多列选择器，并结合popup组件来实现下拉弹层。以下是一个简化版的示例代码：

<template>
  <view>
    <popup :show="isPopupShow" @close="isPopupShow = false">
      <view class="picker-container">
        <picker mode="multiSelector" :range="pickerRange" @change="onChange">
          <view class="picker-view">
            {{ selectedText }}
          </view>
        </picker>
        <button @click="onConfirm">确认</button>
      </view>
    </popup>
    <button @click="isPopupShow = true">点击选择</button>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      isPopupShow: false,
      pickerRange: [
        // 假设有多个分类数组
        ['分类1', '分类2', '分类3'],
        ['子分类1', '子分类2', '子分类3']
      ],
      selectedValues: [] // 用于存储选中的值
    };
  },
  computed: {
    selectedText() {
      // 将选中的值转换为可展示的文本
      return this.pickerRange[0][this.selectedValues[0]] + ' - ' + 
             this.pickerRange[1][this.selectedValues[1]];
    }
  },
  methods: {
    onChange(e) {
      this.selectedValues = e.detail.value;
    },
    onConfirm() {
      // 处理确认逻辑
      this.isPopupShow = false;
      // 可以根据选中的值进行后续操作
    }
  }
};
</script>
 
<style>
.picker-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.picker-view {
  padding: 10px;
  margin-bottom: 10px;
  width: 300px;
  text-align: center;
  background-color: #f0f0f0;
}
button {
  width: 100%;
  margin-top: 10px;
}
</style>

在这个例子中，我们使用了popup组件来创建下拉弹层，picker组件来实现分类的选择。pickerRange数组中存储了分类和子分类的列表，selectedValues数组用于存储当前选中的值的索引。selectedText计算属性将选中的值转换为可展示的文本。用户点击确认后，可以关闭弹层并处理选中的数据。这个组件可以根据实际需求进行功能扩展和样式调整。