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

 

 

 

目录

介绍

平台差异说明

使用方式

安装

引入

基本使用

默认选中项（回显）

配置label、value对应的key名称

获取点击确认后的结果

完整示例

API

Props

Option Attributes

Slot

Events

---

介绍

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

2. 支持配置关键字段

3. 兼容多平台小程序、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

Option Attributes

Slot

Events