Select 选择器，用于弹出一个底部菜单给用户选择操作，可单选或多选。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

温馨提示

• 组件内部使用了wui-icon（字体图标）组件 和wui-list-cell（列表）组件，非 easycom 组件模式下需要手动引入组件（打开组件内部注释的引入内容，引入路径按实际调整）。
• 一般来说我们会通过 z-index + position 来进行层级的设置，但是 weex （Nvue）不支持 z-index 设置层级关系，默认越靠后的元素层级越高。

代码演示

部分示例演示，完整使用请参考文档API。

单项选择

通过 show 属性控制显示隐藏组件，options 属性设置组件数据，title 属性设置标题。

<!--通过按钮打开组件-->
<wui-button type="gray" width="400rpx" height="84rpx" text="单选" bold @click="btnClick"></wui-button>

<wui-select :show="show" :options="items"  title="请选择平台" @confirm="onConfirm" @close="onClose"></wui-select>

  const items = ref<any>([
    {
      text: '（App-vue）',
      value: '1',
    },
    {
      text: '（App-Nvue）',
      value: '2',
    },
    {
      text: '（微信小程序）',
      //设置默认选中
      checked: true,
      value: '3',
    },
    {
      text: '（支付宝小程序，禁用选择）',
      disabled: true,
      value: '4',
    },
    {
      text: '（百度小程序）',
      value: '5',
    },
    {
      text: '（字节小程序）',
      value: '6',
    },
    {
      text: '（QQ小程序）',
      value: '7',
    },
    {
      text: '（H5）',
      value: '8',
    },
  ]);

const show = ref < any > (false);
const btnClick = () => {
    show1.value = true;
};
const onConfirm = (e) => {
    console.log(e);
    onClose();
};
const onClose = () => {
    show.value = false;
};

多项选择

通过 show 属性控制组件显示隐藏，options 属性设置数据，title 属性设置标题，multiple 属性设置是否为多选，isReverse 属性设置选择框与内容是否次序颠倒，checkboxColor 属性设置选择框选中后的颜色，btnBackground 属性设置确定按钮背景色，btnColor 属性设置确定按钮字体颜色，closeColor 属性设置关闭图标颜色。

<!--通过按钮打开组件-->
<wui-button type="gray" width="400rpx" height="84rpx" text="多选" bold @click="btnClick"></wui-button>

<wui-select :show="show" :options="items"  title="请选择银行" multiple isReverse checkboxColor="#FFC529" btnBackground="#FFC529" btnColor="#1A1D26" closeColor="#6D758A" @confirm="onConfirm" @close="onClose"></wui-select>

  //需要设置默认选中时使用items数据格式
  const items = ref<any>([
    '中国银行',
    '中国建设银行',
    '中国工商银行',
    '中国农业银行',
    '中国邮政储蓄银行',
  ]);
  const show = ref<any>(false);
const btnClick = () => {
    show1.value = true;
};
const onConfirm = (e) => {
    console.log(e);
    onClose();
};
const onClose = () => {
    show.value = false;
};

Slots

插槽名称	说明
default	用于替换header部分内容，自定义头部信息，高度尽量保持为98rpx

Props

属性名	类型	说明	默认值	平台差异说明
show	Boolean	是否显示	false	-
options	Array	选择数据，具体格式见下方说明	[ ]	-
height	Number, String	选择器数据区域高度，单位rpx	600	-
type	String	展示类型，可选值：select（选择）、list（列表）	select	-
radius	Number, String	选择器上方左右圆角值，单位rpx	24	-
headerBackground	String	头部背景色	#fff	-
title	String	标题文本	请选择	-
titleSize	Number, String	标题字体大小，单位rpx	32	-
titleColor	String	标题字体颜色	#181818	-
fontWeight	Number, String	标题字体字重	400	-
multiple	Boolean	是否为多项选择，type为select时有效	false	-
background	String	内容区域背景颜色	#fff	-
padding	Array	item项padding值，[上，右，下，左]	['32rpx', '32rpx']	-
checkboxColor	String	选择框选中后颜色	#465CFF	非Nvue端默认为空，可通过css变量(--wui-color-primary)来改变颜色
borderColor	String	选择框未选中时边框颜色	#ccc	-
isCheckMark	Boolean	选择框是否仅展示对号，无边框背景	false	-
checkmarkColor	String	选择框对号颜色	#fff	-
isReverse	Boolean	选择框与内容是否颠倒排列	false	-
splitLine	Boolean	item项之间是否需要分割线条	true	-
lineColor	String	所有线条颜色	#EEEEEE	-
bottomLeft	Number, String	item线条距离左边偏移距离，单位rpx	32	-
arrowColor	String	箭头颜色，type为list时有效	#B2B2B2	-
highlight	Boolean	item项点击是否有高亮效果	true	-
iconWidth	Number, String	item项图片图标宽度，单位rpx，高度与宽度相等	48	-
iconBgColor	String	item项图片背景色	rgba(0,0,0,0)	-
iconMode	String	item项图片裁剪、缩放的模式	widthFix	-
size	Number, String	item项字体大小，单位rpx	30	-
color	String	item项字体颜色	#181818	-
btnText	String	确定按钮文本，type为select时有效	确定	-
btnBackground	String	确定按钮背景颜色，type为select时有效	#465CFF	非Nvue端默认为空，可通过css变量(--wui-color-primary)来改变颜色
btnColor	String	确定按钮文本颜色	#fff	-
maskBackground	String	遮罩背景颜色	rgba(0,0,0,.6)	-
maskClosable	Boolean	点击遮罩是否可关闭选择器，为true时点击触发@close事件	false	-
zIndex	Number, String	选择器层级z-index值	1001	Nvue端无效，默认越靠后的元素层级越高
safeArea	Boolean	是否适配底部安全区	true	-

//options 数据格式说明

//数据格式一，字符串数组（当需要设置默认选中时，使用数据格式二）
const options = ref(['中国银行','中国建设银行','中国工商银行','中国农业银行','中国邮政储蓄银行'])

//数据格式二，以下text、src、checked、disabled为约定属性，其他属性可自行扩展
const options = ref([{
    //item文本
    text: 'WlyyUI（App-vue）',
    //item图标地址，可选
    src: '/static/images/common/logo.png',
    //自行扩展属性
    id:1,
    //自行扩展属性
    value:10001,
    //是否选中，可选
    checked:false,
    //是否禁用，可选 【V2.0.0+】
    disabled:false
}])

Events

事件名	说明	回调参数
@click	点击item项时触发，仅type=list时有效	{ index:点击项索引 options:点击项数据 }
@confirm	点击确定按钮时触发，仅type=select时有效	单选时： { index:选中项索引 options:选中项数据 } 多选时: { options:选中项数据 }
@close	点击背景（maskClosable=true时有效）或关闭图标时触发	-

// 特别说明，当type为select时:

//1、单选且未选择任何选项时，点击确定按钮返回值为：

{
	//索引为-1，表示未选择
	index:-1,
	options:''
}

//2、多选且未选择任何选项时，点击确定按钮返回值为：

{
	//options为空数组表示未选择任何选项
	options:[]
}