更新记录

1.1（2023-08-17）

修复多选显示问题

1.0.1（2023-08-17）

1.0

平台兼容性

阿里矢量图-图标组件

组件名：al-icon

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

本组件是jp-select 升级组件，该组件能满足大多数开发需求

拥有 单选、多选、搜索、弹框选择、多选拼接展示...采用v-model双向绑定操作，用户使用更加方便

用法

<template>
    <view class="content">
        <view class="hader">基础用法</view>
        <jp-select-plus label="单选不带搜索" placeholder="请选择"  v-model="va1" :list="listc"></jp-select-plus>
        <jp-select-plus label="单选带搜索设置主题色" color="#f00"placeholder="请选择" isSearch v-model="va1" :list="listc"></jp-select-plus>
        <jp-select-plus label="多选带搜索-排列展示结果" placeholder="请选择" checkbox isSearch v-model="va2" :list="listc"></jp-select-plus>
        <jp-select-plus label="多选带搜索-拼接展示结果" placeholder="请选择" isJoin checkbox isSearch v-model="va2" :list="listc"></jp-select-plus>
        <jp-select-plus label="一行选择框" :isLineFeed="false" placeholder="请选择" isSearch v-model="va1" :list="listc"></jp-select-plus>
        <jp-select-plus label="改变选择主题颜色"  placeholder="请选择" isSearch v-model="va1" :list="listc"></jp-select-plus>
        <view class="hader">进阶用法</view>
        <jp-select-plus  @onOpen="getList()" @onSearch="getList()" label="点击后才去后端拿数据,展示加载中" isSearchFun isLoading placeholder="请选择" isSearch v-model="va1" :list="list2"></jp-select-plus>
        <view class="hader">只使用弹框</view>
        <view class="but" @click="toOpen">
            点击开启弹框选择数据
        </view>
        选中的数据：{{va3}}
        <jp-select-plus  ref="selectPlus" :isShow="false"  v-model="va3" :list="listc"></jp-select-plus>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                va1: '',
                va2: [],
                va3: '',            
                listc: [{
                    code: 'CHN',
                    name: '中国'
                }, {
                    name: '美国5',
                    code: 'USA'
                }, {
                    name: '巴西',
                    code: 'BRA'
                }, {
                    name: '日本',
                    code: 'JPN'
                }, {
                    name: '英国',
                    code: 'ENG'
                }, {
                    name: '法国',
                    code: 'FRA'
                }, {
                    name: '小人国',
                    code: 'xr1'
                }, {
                    name: '大人国',
                    code: 'xr2'
                }, {
                    name: '中人国中人国中人国中人国中人国中人国中人国中人国中人国中人国中人国',
                    code: 'xr3'
                }],
                list2:[]
            }
        },
        methods: {
            toOpen(){
                this.$refs.selectPlus.open()
            },
            getList(){
                let that = this
                setTimeout(()=>{
                    that.list2 = that.listc
                },2000)
            }
        }
    }
</script>
<style scoped lang="scss">
    .content {
        padding: 0 20px;
        .but{
            margin: 10rpx 25rpx;
            background-color: #00aaff;
            color: #fff;
            text-align: center;
            line-height: 80rpx;
        }
        .hader {
            line-height: 80rpx;
            font-weight: 800;
        }
    }
</style>

API

参数

弹框参数

事件

方法