使用uni-popup开发 点击更多条件弹出筛选框

Uni-app是一个基于Vue.js的框架，用于快速构建跨平台应用，其中uni-popup是官方提供的一款轻量级弹窗组件，可以方便地创建动态的弹出筛选框。当用户点击“更多条件”这样的按钮时，你可以这样做：

1. 首先，在页面模板中引入uni-popup组件，并绑定事件处理函数到“更多条件”按钮上：

<template>
  <view>
    <button @click="showFilterPopup">更多条件</button>
    <!-- ...其他内容... -->
    <uni-popup v-model="popupVisible" :options="filterOptions">
      <!-- 筛选框内容 -->
    </uni-popup>
  </view>
</template>

2. 在script部分，设置`popupVisible`数据属性控制弹出框是否显示，并定义`filterOptions`配置选项：

<script setup>
import { ref, onMounted } from 'vue';
const popupVisible = ref(false);
const filterOptions = {
  value: null, // 初始化值
  showTitle: true, // 是否显示标题，默认true
  maskClosable: false, // 是否允许点击遮罩关闭，默认false
  popupClass: '', // 自定义样式类名
  offset: [0, -50], // 弹出框相对于触发点的位置偏移
};

// 当页面加载完成后打开弹出框
onMounted(() => {
  if (需要打开默认筛选条件) {
    popupVisible.value = true;
  }
});

function showFilterPopup() {
  popupVisible.value = !popupVisible.value;
}
</script>

3. 在弹出框内部，添加你需要的各种筛选项，如输入框、下拉选择等，并添加对应的事件监听，以便处理用户的筛选操作。

当你需要关闭弹出框时，只需将`popupVisible.value`设置为`false`即可。