# CellSelect 底部弹窗选择器

### 介绍

用户可以通过底部上拉弹出的选择框选择所需的值。

### 引入

```js
import yCellSelect from "yesaway-wui/src/components/yCellSelect";
```

## 代码演示

### 基础用法
可以通过 `v-model` 双向绑定选择框的值，通过`list`绑定选择列表，通过 `placeholder` 设置占位提示文字。
```html
<y-cell-select title="国家" 
               :list="areaList" 
               v-model="contry" 
               placeholder="请选择一个国家"></y-cell-select>

```

### 日期选择器
可通过设置`type`为`date`或`dateHour`将选择器修改为日期选择器，详情见yDatetimePicker
```html
<y-cell-select type="date"
               dateFormat="YYYY-mm-dd"
               :dateOption="dateOption"></y-cell-select>

```
### 自定义样式
通过`pop-bottom`设置按钮样式
```html
<y-cell-select title="国家" 
               :list="areaList"
               pop-bottom="color:#000"
               v-model="contry" 
               placeholder="请选择一个国家"></y-cell-select>

```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 当前输入的值 | _number丨string_ | --- |
| type | 选择器类型 | _string_ | _"normal"_ |
| placeholder | 输入框占位提示文字 | _string_ | --- |
| title | 弹窗标题 | _string_ | --- |
| list | 选项列表 | _array_ | --- |
| outselect-key | 当前已选中的值 | _string_ | --- |
| default-value | 默认选中值 | _string_ | --- |
| is-required | 是否必填 | _boolean_ | --- |
| lang-package | 选择弹出层标题及按钮文案配置 | _object_ |_{ enter: "确定", areacode: "选择区号" }_|
| date-option | 日期选择器参数 | _object_ | --- |
| date-format | 日期选择器日期格式 | _string_ | _"YYYY-mm-dd"_ |
| button-radius | 确认按钮圆角样式 | _string_ | --- |
| custom-class | 额外样式 | _string_ | --- |

### Events

| 事件名     | 说明                                     | 回调参数            |
| ---------- | ---------------------------------------- | ------------------- |
| popShow      | 弹窗出现时触发 | _event: Event_ |
| popHide      | 弹窗隐藏时触发 | _event: Event_ |
| selectChange      | 选项改变时触发 | _选中值对应的索引_ |
| outselectKey      | 选项改变时触发 | _选中值对应的索引_ |

### Slots

| 名称           | 说明           |
| -------------- | -------------- |
| title        | 标题       |
| rightIcon        | 右侧图标       |