141 lines
2.4 KiB
Markdown
141 lines
2.4 KiB
Markdown
|
# 弹出选择组件: 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
|
|||
|
|
|
|||
|
|
> 点击选项时触发，返回选项数据的值格式
|
|||
|
|
|