SimpleSelectModal 列表单选

极简列表单选弹窗，支持配置标题、说明文字及动态选项列表，通常用于模式切换等场景。

引入

组件位置

/feeder/pages/component/simpleSelectModal/index

在 app.json 或 index.json 中引入组件：

"usingComponents": {
  "simpleSelectModal": "/feeder/pages/component/simpleSelectModal/index"
}

代码演示

基础用法

通过 params 对象配置内容，并监听 select 事件获取选择结果。

<simpleSelectModal 
  params="{{ selectParams }}" 
  bind:select="onSelect" 
  bind:close="onClose"
/>

Page({
  data: {
    selectParams: {
      isShow: false,
      title: '选择模式',
      text: '请选择设备运行模式',
      options: [
        { name: '自动模式', value: 'auto', active: true },
        { name: '手动模式', value: 'manual', active: false }
      ]
    }
  },

  showModal() {
    this.setData({ 'selectParams.isShow': true });
  },

  onSelect(e) {
    const { value, params } = e.detail;
    console.log('当前选中的值：', value);
    // 更新数据并关闭弹窗
    params.isShow = false;
    this.setData({ selectParams: params });
  },

  onClose() {
    this.setData({ 'selectParams.isShow': false });
  }
})

API

Props

参数	说明	类型	默认值
params	弹窗配置项，包含标题、内容、显示状态及选项列表	Object	见下方 params 说明

params 结构说明

属性	说明	类型	必填
isShow	是否显示弹窗	Boolean	是
title	弹窗标题	String	否
text	辅助描述文字	String	否
options	选项列表	Array	是

options 项结构说明

属性	说明	类型
name	选项展示名称	String
value	选项对应的值	Any
active	是否为当前选中状态	Boolean

Events

事件名	说明	回调参数
select	点击选项时触发	{ value: 选中项的value, params: 更新后的配置对象 }
close	弹窗关闭时触发	-