更新记录

1.0.6（2023-12-14）

上传了uni-icons、uni-popup、uni-scss，将目录移至导入项目的uni_modules下，如果uni_modules下已存在这三个依赖，可删除

1.0.5（2023-12-06）

补充justify-between

1.0.4（2023-08-30）

增加单选功能

平台兼容性

创作不易，请给五星评论

有疑问或定制 +q:408757217,备注uniapp.

使用说明

！！！注意：本插件要搭配 uni-icons、uni-popup、uni-scss使用

Popup-Select Props

Popup-Select 示例

<template>
    <view class="content">
        <view class="uni-title uni-common-pl">uniapp下拉选择器（支持多选）</view>
        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    当前选择（多选）
                </view>
                <view class="uni-list-cell-db">
                    <view class="as-input" @click="openFruit">
                        <view class="placeholder" v-if="resultFruit==undefined||resultFruit==''">请选择你喜欢的水果</view>
                        <view class="as-content" v-else>{{resultFruit}}</view>
                        <uni-icons type="forward" size="16" color="#c0c4cc" class="customer-icon"></uni-icons>
                    </view>
                </view>
            </view>

            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    当前选择（多选）
                </view>
                <view class="uni-list-cell-db">
                    <view class="as-input" @click="openFood">
                        <view class="placeholder" v-if="resultFood==undefined||resultFood==''">请选择你喜欢的食物</view>
                        <view class="as-content" v-else>{{resultFood}}</view>
                        <uni-icons type="forward" size="16" color="#c0c4cc" class="customer-icon"></uni-icons>
                    </view>
                </view>
            </view>

            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    当前选择（单选）
                </view>
                <view class="uni-list-cell-db">
                    <view class="as-input" @click="openCountry">
                        <view class="placeholder" v-if="resultCountry==undefined||resultCountry==''">请选择你最喜欢的国家</view>
                        <view class="as-content" v-else>{{resultCountry}}</view>
                        <uni-icons type="forward" size="16" color="#c0c4cc" class="customer-icon"></uni-icons>
                    </view>
                </view>
            </view>
        </view>

        <niceui-popup-select ref="showFruit" :columns="fruits" :selectValue="fruitId" :is-search="false"
         :option="{label:'name', value:'id'}" @confirm="confirmFruit"></niceui-popup-select>
         <niceui-popup-select ref="showFood" :columns="foods" :selectValue="foodId"
          :option="{label:'name', value:'id'}" @confirm="confirmFood"></niceui-popup-select>

        <niceui-popup-select ref="showCountry" :columns="countrys" :selectValue="countryId" :multiple="false"
           :option="{label:'name', value:'id'}" @confirm="confirmCountry"></niceui-popup-select>
    </view>
</template>

<script>
    import NiceuiPopupSelect from '@/components/niceui-popup-select.vue'
    export default {
        components:{NiceuiPopupSelect},
        data() {
            return {
                fruits:[
                    {
                        id:'1',
                        name:'苹果'
                    },
                    {
                        id:'2',
                        name:'香蕉'
                    },
                    {
                        id:'3',
                        name:'桃子'
                    }
                ],
                fruitId:[],
                fruitName:[],

                foods:[
                    {
                        id:'1',
                        name:'红烧鱼'
                    },
                    {
                        id:'2',
                        name:'炒三丝'
                    },
                    {
                        id:'3',
                        name:'青椒肉丝'
                    }
                ],
                foodId:[],
                foodName:[],

                countrys:[
                    {
                        id:'1',
                        name:'中国'
                    },
                    {
                        id:'2',
                        name:'美国'
                    },
                    {
                        id:'3',
                        name:'日本'
                    }
                ],
                countryId:[],
                countryName:[]
            }
        },
        computed:{
            resultFruit(){
                return this.fruitName.join(",");
            },
            resultFood(){
                return this.foodName.join(",");
            },
            resultCountry(){
                return this.countryName.join(",");
            }
        },
        methods: {
            openFruit(){
                this.$refs.showFruit.showPopup()
            },
            confirmFruit(value,data) {
              this.fruitId = value
              this.fruitName = data.map(it=>it.name)
              this.$refs.showFruit.closePopup()
            },

            openFood(){
                this.$refs.showFood.showPopup()
            },
            confirmFood(value,data) {
              this.foodId = value
              this.foodName = data.map(it=>it.name)
              this.$refs.showFood.closePopup()
            },

            openCountry(){
                this.$refs.showCountry.showPopup()
            },
            confirmCountry(value,data) {
              console.log('confirmCountry---------',value,data)
              this.countryId = value
              this.countryName = data.map(it=>it.name)
              this.$refs.showCountry.closePopup()
            },
        }
    }
</script>

<style lang="scss" scoped>
.content{
    background-color: #f7f7f7;
    width: 100vw;
    height: 100vh;

}
.uni-title{
    font-size: 33rpx;
    font-weight: bold;
    padding: 20rpx 20rpx;
}
.uni-list-cell{
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 20rpx;
    .uni-list-cell-left{
        font-size: 35rpx;
    }
}
.uni-list-cell-db{
    flex:1
}
.as-input{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .customer-icon{
        padding: 0 0 0 5rpx;
    }
    .placeholder{
        font-size:33rpx;
        color:#999;
    }
    .as-content{
        color: #333;
        font-size: 33rpx;
    }
}
</style>