uni-app多选select组件，兼容多平台小程序、H5

最新推荐文章于 2024-12-13 16:00:15 发布

__畫戟__

最新推荐文章于 2024-12-13 16:00:15 发布

阅读量1.1w

点赞数 8

分类专栏： uni-app 小程序 VUE 文章标签： uni-app multiple select uniapp多选select 小程序多选select

本文链接：https://blog.csdn.net/qq_41887214/article/details/120855815

版权

VUE 同时被 3 个专栏收录

43 篇文章 1 订阅

订阅专栏

uni-app

15 篇文章 5 订阅

订阅专栏

小程序

7 篇文章 1 订阅

订阅专栏

配置label、value对应的key名称

介绍

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

支持配置关键字段

兼容多平台小程序、H5

平台差异说明

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

使用方式

安装

npm install uni-multiple-select

引入

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

在pages.json里面配置如下

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

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

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	点击取消或者点击蒙层关闭时触发	-	-