uni-multiple-select v1.0.1

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

多选select组件

介绍

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

2. 支持配置关键字段

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

平台差异说明

使用方式

安装

npm i 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', 'uview-ui'
  ]
}

基本使用

<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

select搜索选择页组件

介绍

1. 接口可配置

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

3. 兼容多平台、H5

平台差异说明

使用方式

安装

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之后。

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

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

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

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

3. 引入uView基础样式

注意！

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

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

4. 配置easycom组件模式

在pages.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里面配置如下

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

基本使用

1.新建.vue，配置页面

{
	"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.基础使用

<lp-search-select
    url="/resume/search.json"
    :isPullDownRefresh.sync="isPullDownRefresh"
    :isReachBottom.sync="isReachBottom"
    @confirm="confirm"
/>

<script>
export default {
  components: {},
  data() {
    return {
      isPullDownRefresh: false, // 触发了下拉
      isReachBottom: false // 触发了上拉触底
    }
  },
  methods: {
    // 确认事件
    confirm(selectedList, selectedIds) {
      console.log(selectedList, selectedIds);
    }
  },
	// 下拉刷新
  onPullDownRefresh() {
    this.isPullDownRefresh = true
  },
  // 上拉加载
  onReachBottom() {
    this.isReachBottom = true
  }
}
</script>

默认选中项（回显）

配置label、value对应的key名称

<lp-search-select
    url="/resume/search.json"
    :isPullDownRefresh.sync="isPullDownRefresh"
    :isReachBottom.sync="isReachBottom"
    valueName="resId"
    labelName="userName"
    @confirm="confirm"
/>

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

html<lp-search-select
    url="/resume/search.json"
    :isPullDownRefresh.sync="isPullDownRefresh"
    :isReachBottom.sync="isReachBottom"
    :showBottomBtnGroups="false"
/>

完整示例

<template>
  <view class="page">
    <lp-search-select
      url="/resume/search.json"
      :isPullDownRefresh.sync="isPullDownRefresh"
      :isReachBottom.sync="isReachBottom"
      :loadText="loadText"
      valueName="resId"
      labelName="userName"
      mode="multiple"
      :searchAttrs="searchAttrs"
      :navBarAttrs="navBarAttrs"
      @confirm="confirm"
    >
      <!-- 插槽，用来修改每一项布局 -->
      <template v-slot:row="{ row }">
        <view class="list-wrap">
          <view class="item-line">
            {{ row.userName }}
          </view>
          <view class="item-line">
            {{ row.sexName }}
          </view>
        </view>
      </template>
    </lp-search-select>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isPullDownRefresh: false, // 是否触发了下拉时间
      isReachBottom: false, // 是否触发了上拉事件
      loadText: {
        loadmore: '点击或上拉加载更多',
        loading: '正在加载',
        nomore: '没有更多了'
      },
      searchAttrs: {
        'input-align': 'center'
      },
      navBarAttrs: {
        backText: "返回"
      }
    }
  },
  methods: {
    confirm(selectedList, selectedIds) {
      console.log(selectedList, selectedIds);
    }
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.isPullDownRefresh = true
  },
  // 上拉加载
  onReachBottom() {
    this.isReachBottom = true
  }
}
</script>

<style lang="scss" scoped>
.page {
  .list-wrap {
    height: auto;
    width: 100%;
    border-bottom: 2rpx dashed #cccccc;
  }
}
</style>

API

Props

Option Attributes

navBarAttrs

searchAttrs

Slot

Events