uni-app 多选select组件、select搜索选择页组件

多选select组件

$3

1. 多选select组件目前只支持多选，单选请用单选select组件

2. 支持配置关键字段

3. 兼容多平台小程序、H5

$3

| H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 |
| ---- | ---------- | ------------ | ---------- | ---------- |
| √ | √ | √ | √ | √ |

$3

#### 安装

``bash
npm i uni-multiple-select
`

#### 引入

uni-app的easycom在打包的时候是按需引入的，您可以放心引入的组件库，发布打包时会自动剔除您没有使用的组件

在pages.json里面配置如下

`json
{
"easycom": {
"^lp-(.*)": "uni-multiple-select/components/lp-$1/index.vue"
},
"pages": [
//...
]
}
`

在vue.config.js里面配置如下

`js
module.exports = {
transpileDependencies: [
'uni-multiple-select', 'uview-ui'
]
}
`

#### 基本使用

`html
v-model="show"
:list="list"
/>
`

`js
data() {
return {
// 数据源
list: [{
label: "皮皮虾",
value: "1"
},{
label: "小龙虾",
value: "2",
disabled: true // 禁用
},{
label: "大龙虾",
value: "3"
},{
label: "石头蟹",
value: "4"
}]
};
}
`

#### 默认选中项（回显）

`html
v-model="show"
:list="list"
:default-value="defaultSelected"
/>
`

`js
data() {
return {
defaultSelected: ["1", "4"] // 默认选中项(value)
}
}
`

#### 配置label、value对应的key名称

`html
v-model="show"
:list="list"
:default-value="defaultSelected"
label-name="text"
value-name="id"
@confirm="confirm"
/>
`

#### 获取点击确认后的结果

`html
v-model="show"
:list="list"
@confirm="confirm"
/>
`

`js
methods: {
// 确认事件
confirm(selectedData, selectedDataIds) {
console.log(selectedData, selectedDataIds);
}
}
`

#### 完整示例

`html




`

$3

#### Props

| 属性 | 说明 | 类型 | 默认值 |
| :--------------------- | :----------------------------------------------------------- | :-------------------- | :----- |
| v-model | 双向绑定控制弹出层显示 | Boolean | false |
| list | 数据源 | Array | [] |
| max | 多选时最大选择数 | Number | 99 |
| cancel-text | 取消按钮文字 | String | 取消 |
| confirm-text | 确认按钮文字 | String | 确认 |
| title | 顶部中间的标题 | String | - |
| label-name | 指定 list 中作为展示的 key | String | label |
| value-name | 指定 list 中作为 value 的 key | String | value |
| height | 弹出层高度，单位vh | Number\|String | 30 |
| z-index | 弹出时的z-index值 | Number\|String | 10075 |
| mask-close-able | 是否允许点击蒙层关闭 | Boolean | true |
| all-show | 是否显示全选 | Boolean | true |
| default-value | 默认选中值 | Array[Number\|String] | [] |
| safe-area-inset-bottom | 是否开启底部安全区适配 | Boolean | true |

#### Option Attributes

| 属性 | 说明 | 类型 | 默认值 |
| :------- | :------------- | :------ | :----- |
| disabled | 是否禁用该选项 | boolean | false |

#### Slot

| 属性 | 说明 | 默认值 |
| :--------- | :------------------- | :-------- |
| empty-tips | 自定义空数据时的提示 | 暂无数据~ |

#### Events

| 事件名 | 说明 | 回调参数 | 版本 |
| :------ | :----------------------------- | :----------------------------------- | :--- |
| confirm | 点击确定按钮，返回当前选择的值 | 目前的选中选项[Array]与主键值[Array] | - |
| cancel | 点击取消或者点击蒙层关闭时触发 | - | - |

select搜索选择页组件

$3

1. 接口可配置

2. 支持搜索、分页、多选、单选、返回结果、插槽自定义每一项布局、配置关键字段

3. 兼容多平台、H5

$3

| H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 |
| ---- | ---------- | ------------ | ---------- | ---------- |
| √ | √ | √ | √ | √ |

$3

#### 安装

`bash
npm install uni-multiple-select
`

#### 引入

本组件内部使用了uview的一些组件：Navbar、Search、Checkbox、 loadMore、Empty、Button，在引入上会引入uview，但是请放心，uni-app的easycom在打包的时候是按需引入的，您可以放心引入的组件库，发布打包时会自动剔除您没有使用的组件

##### 1. 引入uView主JS库

在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

`js
// main.js
import uView from "uview-ui";
Vue.use(uView);
`

##### 2. 在引入uView的全局SCSS主题文件

在项目根目录的uni.scss中引入此文件。

`css
/ uni.scss /
@import 'uview-ui/theme.scss';
`

##### 3. 引入uView基础样式

注意！

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

`css

`

##### 4. 配置easycom组件模式

在pages.json里面配置如下

`json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue", // uview-ui
"^lp-(.*)": "uni-multiple-select/components/lp-$1/index.vue" // uni-multiple-select
},
"pages": [
//...
]
}
`

在vue.config.js里面配置如下

`js
module.exports = {
transpileDependencies: [
'uni-multiple-select', 'uview-ui'
]
}
`

#### 基本使用

##### 1.新建.vue，配置页面

`json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
"^lp-(.*)": "cnpm-uni-select-wx/components/lp-$1/index.vue"
},
"pages": [
{
"path": "pages/searchSelectPage/index",
"style": {
"enablePullDownRefresh": true, // 开启下拉刷新
"navigationStyle":"custom" // 取消默认的原生导航栏
}
},
]
}
`

##### 2.基础使用

`html
url="/resume/search.json"
:isPullDownRefresh.sync="isPullDownRefresh"
:isReachBottom.sync="isReachBottom"
@confirm="confirm"
/>
`

`js

`

#### 默认选中项（回显）

`html

`

#### 配置label、value对应的key名称

`html
url="/resume/search.json"
:isPullDownRefresh.sync="isPullDownRefresh"
:isReachBottom.sync="isReachBottom"
valueName="resId"
labelName="userName"
@confirm="confirm"
/>
`

#### 只搜索查看，没有底部按钮

`html
html url="/resume/search.json"
:isPullDownRefresh.sync="isPullDownRefresh"
:isReachBottom.sync="isReachBottom"
:showBottomBtnGroups="false"
/>
`

#### 完整示例

`html



`

$3

#### Props

| 属性 | 说明 | 类型 | 默认值 | 可选值 |
| :---------------- | :----------------------------------------------------------- | :----------------------------------------------------------- | :----------------------------------------------------------- | :--------------- |
| request | http request API，必填 | Function | uni.request | - |
| url | 双向绑定控制弹出层显示，必填 | String | - | - |
| isPullDownRefresh | 是否触发了下拉加载，必填 | Boolean | false | true |
| isReachBottom | 是否触发了触底事件，必填 | Boolean | false | true |
| loadText | 底部加载的文案 | Object | {
loadmore: '轻轻上拉',
loading: '努力加载中',
nomore: '我是有底线的~'
} | - |
| label-name | 指定接口返回数据中作为展示的 key | String | label | - |
| value-name | 指定接口返回数据中作为 value 的 key | String | value | - |
| keyword | 顶部搜索关键字 | String | keyword | - |
| pageSize | 每页搜索数量；建议调大点，该字段会影响页面触底，进而影响onReachBottom的触发 | Number\|String | 20 | - |
| query | 其他默认查询参数 | Object | - | - |
| mode | 切换单选、多选，默认多选 | String | multiple | single、multiple |
| max | 多选时最大选择数 | String\|Number | 999 | - |
| isOnlySearch | 只搜索查看，没有底部按钮和checkBox | Boolean | true | false |
| cancel-text | 取消按钮文字，必填 | Boolean | false | |
| confirm-text | 确认按钮文字 | String | 确认 | |
| default-selected | 默认选中值 | 多选：Array[Number\|String]
单选：Number\|String | [] | - |
| checkboxColor | checkbox 颜色 | String | #007aff | |
| qs-stringify | 是否使用qs模块序列化参数 | Boolean | false | true |
| navBarAttrs | 导航栏属性 | Object | 见下方navBarAttrs | |
| searchAttrs | 搜索组件属性 | Object | 见下方searchAttrs | |

#### Option Attributes

| 属性 | 说明 | 类型 | 默认值 |
| :------- | :------------- | :------ | :----- |
| disabled | 是否禁用该选项 | boolean | false |

#### navBarAttrs

| 属性 | 说明 | 类型 | 默认值 | 可选值 |
| ------------- | ------------------------------------------------------------ | ---------------- | ------------------------------------------------------------ | ---------------------------------------------------- |
| height | 导航栏高度(不包括状态栏高度在内，内部自动加上)，注意这里的单位是px | String \| Number | 44 | - |
| backIconColor | 左边返回图标的颜色 | String | #606266 | - |
| backIconName | 左边返回图标的名称，只能为uView自带的图标，1.5.5起由arrow-left调整为nav-back | String | nav-back | Icon |
| backIconSize | 左边返回图标的大小，单位rpx | String \| Number | 30 | - |
| backText | 返回图标右边的辅助提示文字 | String | - | - |
| backTextStyle | 返回图标右边的辅助提示文字的样式，对象形式 | Object | { color: '#606266' } | - |
| zIndex | 固定在顶部时的z-index`值 | String \| Number | 980 | - |
| isBack | 是否显示导航栏左边返回图标和辅助文字 | Boolean | true | false |
| background | 导航栏背景设置(APP和小程序上包括状态栏的颜色)，见上方说明 | Object | { backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))' } | - |
| borderBottom | 导航栏底部是否显示下边框，如定义了较深的背景颜色，可取消此值 | Boolean | true | false |
| customBack | 自定义返回逻辑方法，如传入，点击返回按钮执行函数，否则正常返回上一页，注意模板中不需要写方法参数的括号 | Function | - | - |

#### searchAttrs

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| ---------------- | ------------------------------------------------------------ | ---------------- | ------------ | ---------------------------------------------------- |
| shape | 搜索框形状，round-圆形，square-方形 | String | round | square |
| bgColor | 搜索框背景颜色 | String | #f2f2f2 | - |
| borderColor | 边框颜色，配置了颜色，才会有边框 | String | - | - |
| placeholder | 占位文字内容 | String | 请输入关键字 | - |
| clearabled | 是否启用清除控件 | Boolean | true | false |
| focus | 是否自动获得焦点 | Boolean | false | true |
| showAction | 是否显示右侧控件(右侧的"搜索"按钮) | Boolean | true | false |
| actionText | 右侧控件文字 | String | 搜索 | - |
| actionStyle | 右侧控件的样式，对象形式 | Object | - | - |
| inputAlign | 输入框内容水平对齐方式 | String | left | center / right |
| height | 输入框高度，单位rpx | String \| Number | 64 | - |
| searchIconColor | 搜索图标的颜色，默认同输入框字体颜色 | String | - | - |
| color | 输入框字体颜色 | String | #606266 | - |
| placeholderColor | placeholder的颜色 | String | #909399 | - |
| margin | 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30rpx"、"30rpx 20rpx"等写法 | String | - | - |
| maxlength | 输入框最大能输入的长度，-1为不限制长度 | String \| Number | -1 | - |
| inputStyle | 自定义输入框样式，对象形式 | Object | - | - |
| searchIcon | 输入框左边的图标，可以为uView图标名称或图片路径 | String | search | Icon |

#### Slot

| 属性 | 说明 |
| :--- | :--------------- |
| row | 自定义每一项布局 |

#### Events

| 事件名 | 说明 | 回调参数 | 版本 |
| :------ | :----------------------------- | :----------------------------------------------------------- | :--- |
| confirm | 点击确定按钮，返回当前选择的值 | 多选：目前的选中选项[Array]与主键值[Array]
单选：目前的选中选项[Object] | - |
| cancel | 点击取消按钮 | - | - |