帮我用uniapp的vue3写法实现一个点击有下拉选择框然后有二级标题选择 选择完后自动收起该选择框

好的，以下是一份使用 Vue3 和 uni-app 的示例代码，可以实现点击下拉选择框后弹出一个二级标题选择框，选择完毕后自动收起该选择框：

<template>
  <div class="container">
    <div class="select-box" @click="showSelect = !showSelect">
      <div class="selected">{{ selected }}</div>
      <div class="arrow" :class="{ 'rotate': showSelect }"></div>
    </div>
    <div class="mask" v-show="showSelect" @click="showSelect = false"></div>
    <div class="select-popup" v-show="showSelect">
      <div class="title">{{ title }}</div>
      <div class="list">
        <div class="item" v-for="(item, index) in list" :key="index" @click="handleItemClick(index)">{{ item }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const showSelect = ref(false); // 是否显示下拉选择框
    const selected = ref(''); // 当前选中的选项
    const title = ref('请选择一项'); // 选择框标题
    const list = ref(['选项一', '选项二', '选项三']); // 选择框选项列表

    // 处理选项点击事件
    const handleItemClick = (index) => {
      selected.value = list.value[index]; // 更新当前选中的选项
      title.value = selected.value; // 更新选择框标题
      showSelect.value = false; // 收起选择框
    };

    return {
      showSelect,
      selected,
      title,
      list,
      handleItemClick,
    };
  },
};
</script>

<style scoped>
.container {
  position: relative;
}

.select-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: #666 transparent transparent transparent;
  margin-left: 10px;
}

.rotate {
  transform: rotate(180deg);
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.select-popup {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  z-index: 2;
  transition: all 0.3s ease;
}

.title {
  padding: 10px;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
}

.list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

.item {
  flex-basis: calc(33.33% - 10px);
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}
</style>

在上面的示例代码中，我们使用了 `ref` 来定义了一些响应式数据，包括 `showSelect`（是否显示下拉选择框）、`selected`（当前选中的选项）、`title`（选择框标题）和 `list`（选择框选项列表）。

我们在模板中定义了一个 `select-box` 元素，它是一个点击后可以弹出二级标题选择框的下拉选择框。在 `select-box` 元素中使用了一个箭头来指示下拉选择框的状态，当下拉选择框展开时，箭头会旋转 180 度。

我们使用了一个 `mask` 元素来实现一个半透明的遮罩层，可以在用户点击遮罩层时收起下拉选择框。

在 `select-popup` 元素中定义了二级标题选择框的样式。我们使用了一个 `title` 元素来显示当前选择框的标题，使用了一个 `list` 元素来显示选择框的选项。

在 `list` 元素中使用了一个 `v-for` 循环来渲染选择框的选项，当用户点击某个选项时，我们会调用 `handleItemClick` 方法来更新当前选中的选项，并收起下拉选择框。

最后，我们使用了 `setup` 函数来定义了 Vue3 的组合式 API，包括了响应式数据和处理选项点击事件的方法。这样写法的好处是，组件代码更加简洁，易于维护和扩展。