更新记录

1.0.4（2025-06-23） 下载此版本

更新日志

修改自动下载组件

1.0.3（2025-06-23） 下载此版本

更新日志

自动下载到uni_modules文件夹下面

1.0.2（2025-06-23） 下载此版本

更新日志

[1.0.2] - 2025-06-23

✨ 修改

平台兼容性

uni-app(4.03)

uni-app x(4.03)

其他

级联下拉选择器

一个功能强大的 uni-app 级联下拉选择组件，支持多级联动、多选、自动展开等功能。

✨ 特性

• 🎯 支持多级级联选择
• ✅ 支持多选模式
• 🔄 自动展开子级选项
• 📱 适配所有 uni-app 平台
• 🎨 美观的 UI 设计
• ⚡ Vue2/Vue3 兼容

📦 安装

1. 在 uni-app 项目中，通过插件市场导入
2. 或直接将组件文件复制到项目中

🎯 组件注册方式

方式 1：自动注册（推荐） 安装插件后，组件会自动注册，可直接使用：

<template>
  <view>
    <Xyy-cascade-dropdown :options="cascadeOptions" v-model="selectedValue" />
  </view>
</template>

方式 2：手动注册

<script>
import XyyCascadeDropdown from "@/uni_modules/Xyy-cascade-dropdown/components/Xyy-cascade-dropdown/Xyy-cascade-dropdown.vue";

export default {
  components: {
    XyyCascadeDropdown,
  },
};
</script>

🚀 快速开始

<template>
  <view>
    <Xyy-cascade-dropdown
      :options="cascadeOptions"
      v-model="selectedValue"
      @change="ionChange"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: "",
      cascadeOptions: [
        {
          label: "一级选项1",
          value: "1",
          children: [
            {
              label: "二级选项1-1",
              value: "1-1",
              children: [{ label: "三级选项1-1-1", value: "1-1-1" }],
            },
          ],
        },
      ],
    };
  },
  methods: {
    ionChange(value) {
      console.log("选中值:", value);
    },
  },
};
</script>

📋 API

Props

Events

🔧 数据格式

const options = [
  {
    label: "显示文本",
    value: "选项值",
    children: [
      // 子级选项...
    ],
  },
];

📱 兼容性

• ✅ App 端
• ✅ H5 端
• ✅ 小程序端
• ✅ Vue2/Vue3

🤝 贡献

欢迎提交 Issues 和 Pull Requests！

📄 许可证

MIT License