You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
5.5 KiB
133 lines
5.5 KiB
1 year ago
|
# wz-select-popup
|
||
|
|
|
||
|
|
## 示例
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="" style="margin-bottom: 16px;">
|
||
|
|
<view style="margin-bottom: 8px;">names:{{userForm.names}}</view>
|
||
|
|
<view style="margin-bottom: 8px;">values:{{userForm.values}}</view>
|
||
|
|
<view style="margin-bottom: 8px;">origin:{{userForm.origin}}</view>
|
||
|
|
</view>
|
||
|
|
<button @click="open">打开</button>
|
||
|
|
<wz-select-popup ref="wzSelectPopup" @select="selectCheckbox" />
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
simulationReqGetList,
|
||
|
|
getDataList
|
||
|
|
} from "@/common/mock.js"
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
userForm: {
|
||
|
|
names: [],
|
||
|
|
values: [],
|
||
|
|
origin:[]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
open() {
|
||
|
|
this.$refs.wzSelectPopup.open({
|
||
|
|
mode: 'checkbox', //radio checkbox 单选、多选
|
||
|
|
// dataList:[], //如果dataList传入了数组则直接使用传入的数组渲染，无需再配置proxyConfig
|
||
|
|
selected: this.userForm.values, //已选中的数据
|
||
|
|
proxyConfig: { //组件内部代理请求数据配置
|
||
|
|
reqFun: this.reqGetList, //请求方法,在方法中请返回Promise.resolve([])
|
||
|
|
localPaging: false //前端本地分页
|
||
|
|
},
|
||
|
|
search: {
|
||
|
|
type: 'local', //local本地数据搜索 | remote请求接口
|
||
|
|
},
|
||
|
|
fields: {
|
||
|
|
label: 'name',
|
||
|
|
value: 'code'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
selectCheckbox(mode, data) {
|
||
|
|
console.log(mode, data)
|
||
|
|
this.userForm.names = data.names
|
||
|
|
this.userForm.values = data.values
|
||
|
|
this.userForm.origin = data.origin
|
||
|
|
},
|
||
|
|
reqGetList(data) {
|
||
|
|
return simulationReqGetList({
|
||
|
|
pageIndex: data.pageIndex,
|
||
|
|
pageSize: data.pageSize,
|
||
|
|
name: data.searchValue
|
||
|
|
})
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
</style>
|
||
|
|
```
|
||
|
|
|
||
|
|
## 属性props
|
||
|
|
|
||
|
|
| 属性 | 类型 | 默认值 | 说明 |
|
||
|
|
| ------- | ------ | ------ | ------------------------------------------------------------ |
|
||
|
|
| scrollH | String | 50vh | 滚动内容的高度，不包含搜索框和多选时的底部按钮栏。需要带单位 |
|
||
|
|
|
||
|
|
|
||
|
|
## 方法methods
|
||
|
|
|
||
|
|
| 方法名 | 说明 | 参数 |
|
||
|
|
| ------ | -------- | ----------------------------- |
|
||
|
|
| open | 打开弹窗 | [configs](#open方法的configs) |
|
||
|
|
| close | 关闭弹窗 | |
|
||
|
|
|
||
|
|
### open方法的configs
|
||
|
|
|
||
|
|
| 参数名 | 说明 | 类型 | 默认值 |
|
||
|
|
| ----------- | ------------------------------------------------------------ | ------------- | -------------------------- |
|
||
|
|
| mode | 选择模式radio单选 ，checkbox多选 | String | radio |
|
||
|
|
| selected | 已选中的value, 单选传字符串，多选传数组 | String\|Array | [] |
|
||
|
|
| dataList | 传入了数组，则直接使用传入的数组渲染，无需再配置proxyConfig | Array | null |
|
||
|
|
| proxyConfig | 组件内部代理请求数据配置 | Object | [proxyConfig](#proxyConfig的属性) |
|
||
|
|
| search | 搜索配置 | Object | [search](#search的属性) |
|
||
|
|
| page | 分页配置，如果是组件内部代理请求会把page的值加入到proxyConfig.reqFun请求参数里 | Object | [page](#page的属性) |
|
||
|
|
| fields | 显示和取值的label,value | Object | [fields](#fields的属性) |
|
||
|
|
|
||
|
|
#### proxyConfig的属性
|
||
|
|
|
||
|
|
| 参数名 | 说明 | 类型 | 默认值 | 返回值 |
|
||
|
|
| ----------- | --------------------------------------------------------- | ------- | ------------------- | --------------------------------------- |
|
||
|
|
| reqFun | 向服务器请求数据的Promise方法,会返回页码以及搜索框的value | Promise | Promise.resolve([]) | ({pageIndex, pageSize,searchValue})=>{} |
|
||
|
|
| localPaging | 是否本地分页 | Boolean | false | |
|
||
|
|
|
||
|
|
#### search的属性
|
||
|
|
|
||
|
|
| 参数名 | 说明 | 类型 | 默认值 |
|
||
|
|
| ------ | ------------------------------------------------------------ | ------ | ------ |
|
||
|
|
| type | 搜索的类型,local本地搜索, remote向服务器请求。只有使用proxyConfig.reqFun请求才能配置为remote | String | local |
|
||
|
|
|
||
|
|
#### page的属性
|
||
|
|
|
||
|
|
| 参数名 | 说明 | 类型 | 默认值 |
|
||
|
|
| --------- | ------ | ------ | ------ |
|
||
|
|
| pageIndex | 当前页 | Number | 1 |
|
||
|
|
| pageSize | 页大小 | Number | 20 |
|
||
|
|
|
||
|
|
#### fields的属性
|
||
|
|
|
||
|
|
| 参数名 | 说明 | 类型 | 默认值 |
|
||
|
|
| ------ | ------------ | ------ | ------ |
|
||
|
|
| label | 显示的字段名 | String | name |
|
||
|
|
| value | 取值的字段名 | String | code |
|
||
|
|
|
||
|
|
## 事件enevt
|
||
|
|
|
||
|
|
| 名称 | 触发时机 | 返回值 |
|
||
|
|
| ------ | ------------------------------------------ | ------------------------------------------------------------ |
|
||
|
|
| select | 单选点击列表时触发，多选点击确定按钮时触发 | mode等于radio时：(mode, {check,name,code})=>{}<br/>mode等于checkbox时：(mode, {names,values,origin})=>{} |
|
||
|
|
| close | popup关闭 | void |
|