更新记录

1.0.1（2025-01-22） 下载此版本

• 修复loading数据时显示没有更多了

1.0.0（2025-01-22） 下载此版本

• 首次发布
• 基础功能：
  • 本地数据选择
  • 本地搜索过滤
  • 远程搜索
  • 分页加载
  • 自定义键名
  • 自定义高度
• 交互优化：
  • 弹出层动画
  • 加载状态
  • 空状态提示
  • 底部安全区域
• 其他特性：
  • Vue3 组合式API
  • TypeScript 支持
  • 完整的类型定义
  • 支持按需引入
  • 支持自定义样式

平台兼容性

x-data-select 下拉选择组件

一个功能强大的下拉选择组件，支持本地和远程搜索。

特性

• 支持本地数据选择和搜索过滤
• 支持远程搜索和分页加载
• 支持加载选中项详情
• 支持自定义键名和高度
• 优雅的动画和交互效果
• 完整的加载状态展示
• 基于Vue3 组合式API

基础用法

本地数据选择

<template>
  <x-select
    v-model="selected"
    :options="options"
    placeholder="请选择"
    @change="onChange"
  />
</template>

<script setup>
const selected = ref(null)
const options = ref([
  { label: '选项1', value: 1 },
  { label: '选项2', value: 2 }
])
</script>

远程搜索

<template>
  <x-select
    v-model="selected"
    :searchable="true"
    :remote="true"
    :load-selected="true"
    placeholder="请选择"
    @change="onChange"
    @load-data="onLoadData"
    @load-selected="onLoadSelected"
  />
</template>

<script setup>
const onLoadData = ({ keyword, page, pageSize, isSearch, callback }) => {
  // 远程加载数据
  loadData({ keyword, page, pageSize }).then(data => {
    callback(data)
  })
}

const onLoadSelected = ({ value, callback }) => {
  // 加载选中项详情
  loadDetail(value).then(item => {
    callback(item)
  })
}
</script>

API

Props

Events

Options 数据结构

[
  {
    label: '显示文本',  // 对应 labelKey
    value: '值'        // 对应 valueKey
  }
]

使用场景

1. 本地数据选择

   • 数据量较小时使用
   • 支持本地搜索过滤
   • 一次性加载全部数据

2. 远程搜索

   • 数据量大时使用
   • 支持关键词搜索
   • 支持分页加载
   • 可配置每页数量

3. 选中值处理

   • 支持加载选中值详情
   • 未找到选中值时显示占位
   • 保持选中状态连续性

4. 样式自定义

   • 支持自定义选择框高度和内边距
   • 支持自定义字体大小和圆角
   • 支持自定义弹出层高度

注意事项

1. 远程搜索模式

   • 需要实现load-data事件
   • 通过callback返回数据
   • 返回数据条数小于pageSize时表示无更多数据

2. 选中值处理

   • 优先从当前数据中查找
   • 配置loadSelected可从接口加载详情
   • 未找到时显示"未知选项"

3. 性能优化

   • 避免一次性加载过多数据
   • 远程搜索时做好防抖处理
   • 合理设置pageSize值