更新记录

1.0.0（2026-04-28） 下载此版本

• 首次发布，提供底部弹出选择器组件
• 支持基础文字选项选择
• 支持图片 + 文字选项展示
• 支持自定义图片大小
• 支持自定义插槽，完全自定义选项样式
• 支持 v-model 双向绑定

平台兼容性

uni-app(3.7.6)

# sea-simple-selector

## 介绍

一个简洁的底部弹出选择器组件，支持图片+文字，支持自定义插槽，支持 v-model 双向绑定。

## 安装

将 `sea-simple-selector` 文件夹放入项目的 `components` 目录或 `uni_modules` 目录。

## 基本用法

```vue
<template>
  <view>
    <button @click="show = true">打开选择器</button>
    <sea-simple-selector
      v-model:visible="show"
      v-model:modelValue="selectedValue"
      :options="options"
      @select=""
      @cancel="onCancel"
    />
  </view>
</template>

<script>
import SeaSimpleSelector from '@/components/sea-simple-selector/sea-simple-selector.vue'

export default {
  components: { SeaSimpleSelector },
  data() {
    return {
      show: false,
      selectedValue: null,
      options: [
        { value: 1, label: '选项一', image: '/static/icon1.png' },
        { value: 2, label: '选项二', image: '/static/icon2.png' },
        { value: 3, label: '选项三' }
      ]
    }
  },
  methods: {
    (e) {
      console.log('选中：', e.value, e.item)
    },
    onCancel() {
      console.log('取消选择')
    }
  }
}
</script>

自定义插槽

<sea-simple-selector v-model:visible="show" :options="options">
  <template #item="{ item, index }">
    <view class="custom-item">
      <image :src="item.image" class="custom-image" />
      <text class="custom-text">{{ item.label }}</text>
    </view>
  </template>
</sea-simple-selector>

Props

options 数据格式

{
  value: 1,           // 选中值
  label: '选项一',    // 显示文字
  image: '/static/icon.png'  // 图片路径（可选）
}

Events

Slots