目录
介绍
平台差异说明
使用方式
安装
引入
基本使用
默认选中项（回显）
配置label、value对应的key名称
获取点击确认后的结果
完整示例
API
Props
Option Attributes
Slot
Events
介绍
多选select组件目前只支持多选，单选请用单选select组件
支持配置关键字段
兼容多平台小程序、H5
平台差异说明
| H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 |
|---|---|---|---|---|
| √ | √ | √ | √ | √ |
使用方式
安装
npm install uni-multiple-select引入
uni-app的easycom在打包的时候是按需引入的，您可以放心引入的组件库，发布打包时会自动剔除您没有使用的组件
在pages.json里面配置如下文章来源：https://www.toymoban.com/news/detail-487980.html
{
"easycom": {
"^lp-(.*)": "uni-multiple-select/components/lp-$1/index.vue"
},
"pages": [
//...
]
}在vue.config.js里面配置如下文章来源地址https://www.toymoban.com/news/detail-487980.html
module.exports = {
transpileDependencies: [
'uni-multiple-select'
]
}基本使用
<lp-multiple-select
v-model="show"
:list="list"
/>data() {
return {
// 数据源
list: [{
label: "皮皮虾",
value: "1"
},{
label: "小龙虾",
value: "2",
disabled: true // 禁用
},{
label: "大龙虾",
value: "3"
},{
label: "石头蟹",
value: "4"
}]
};
}默认选中项（回显）
<lp-multiple-select
v-model="show"
:list="list"
:default-value="defaultSelected"
/>data() {
return {
defaultSelected: ["1", "4"] // 默认选中项(value)
}
}配置label、value对应的key名称
<lp-multiple-select
v-model="show"
:list="list"
:default-value="defaultSelected"
label-name="text"
value-name="id"
@confirm="confirm"
/>获取点击确认后的结果
<lp-multiple-select
v-model="show"
:list="list"
@confirm="confirm"
/>methods: {
// 确认事件
confirm(selectedData, selectedDataIds) {
console.log(selectedData, selectedDataIds);
}
}完整示例
<template>
<view class="content">
<view class="title">多选插件演示</view>
<view class="text-area">
<text class="label">当前选中项目：</text>
<text class="value" @tap="show = true">{{info || "请选择"}}</text>
</view>
<lp-multiple-select
class="test"
v-model="show"
:list="list"
height="50"
:default-value="defaultSelected"
label-name="text"
value-name="id"
title="今日晚餐"
@confirm="confirm"
>
<template v-slot:tips>
<view class="multiple-select__empty-tips">空空如也~~</view>
</template>
</lp-multiple-select>
</view>
</template>
<script>
export default {
data() {
return {
show: false, //是否显示 - 双向绑定
list: [], //数据源
defaultSelected: ["3", "5"], // 默认选中项
info: "",
};
},
onShow() {
//模拟异步数据
setTimeout(() => {
this.list = [
{
text: "皮皮虾",
id: "1"
},
{
text: "小龙虾",
id: "2",
disabled: true // 禁用
},
{
text: "大龙虾",
id: "3"
},
{
text: "石头蟹",
id: "4"
},
{
text: "兰花蟹",
id: "5"
},
{
text: "面包蟹",
id: "6"
},
{
text: "石斑鱼",
id: "7"
},
{
text: "鲫鱼",
id: "8"
},
{
text: "鲨鱼",
id: "9"
}
]
}, 2000);
},
methods: {
// 确定事件
confirm(selectedData, selectedDataIds) {
console.log(selectedData, selectedDataIds);
this.info = selectedData.map(el => el.text).join();
}
}
};
</script>
<style scoped>
.title {
font-size: 36rpx;
color: #2088f9;
margin-top: 20vh;
text-align: center;
}
.text-area {
width: 100%;
margin-top: 5vh;
display: flex;
justify-content: center;
font-size: 28rpx;
box-sizing: border-box;
padding: 20rpx;
}
.value {
color: #2088f9;
}
.multiple-select__empty-tips {
margin-top: 25%;
text-align: center;
font-size: 40rpx;
color: #e2e2e2;
}
</style>API
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 | 点击取消或者点击蒙层关闭时触发 | - | - |
到了这里，关于uni-app多选select组件，兼容多平台小程序、H5的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
