# 弹出选择组件: wo-pop-selector

> 采用uniapp-vue3实现, 支持H5、微信小程序（其他小程序未测试过，可自行尝试）

## props属性

### maxHeight

> 弹窗最大高度

~~~js
height: {
    type: String,
    default: '250rpx',
},
~~~

### activeColor

> 选项激活颜色

~~~js
activeColor: {
    type: String,
    default: '#58BA86'
},
~~~

### cardStyle

> 弹窗样式，支持驼峰式style样式

~~~js
cardStyle: {
    type: Object,
    default: () => {
        return {
            background: '#ffffff',
            border: '1px solid #ebeef5',
            borderRadius: '6px',
            boxShadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
            padding: '4px 0',
            fontSize: '26rpx'
        }
    }
},
~~~

### defaultValue

> 初始选中的默认值

~~~js
defaultValue: {
    type: string | number,
    default: 0
}
~~~

### selectOptions

> 选项数据

~~~js
selectOptions: {
    type: any[],
    default: () => [
      {
        value: 0,
        label: '选项1',
      },
      {
        value: 1,
        label: '选项2',
      },
      {
        value: 2,
        disabled: true,
        label: '选项3',
      },
      {
        value: 3,
        label: '选项4',
      }
    ]
}
~~~



## 插槽

### 默认插槽-自定义主体点击内容

> v-slot

~~~html
<pop-selector :select-options="state.options" :default-value="state.value" @changeSelect="onChangeMenu">
    <view class="button">
        状态选择：{{ state.options[state.value]?.label }}
    </view>
</pop-selector>
~~~

### 自定义弹窗头部

> v-slot:header

~~~html
<pop-selector :active-color="'#0086D1'" :select-options="state.options" :default-value="state.value" @changeSelect="onChangeMenu">
    <view class="button">
        状态选择：{{ state.options[state.value]?.label }}
    </view>
    <template v-slot:header>
        <view style="padding: 12rpx 20rpx; color: grey;">请选择订单状态</view>
    </template>
</pop-selector>
~~~

### 自定义右边图标

> v-slot:end

~~~html
<pop-selector :select-options="state.options" :default-value="state.value" @changeSelect="onChangeMenu">
    <view class="button">
        状态选择：{{ state.options[state.value]?.label }}
    </view>
    <template v-slot:right>
        <view>✅</view>
    </template>
</pop-selector>
~~~

## 事件

### @changeSelect

> 点击选项时触发，返回选项数据的值格式