aiot-app/pages/purchasingManage/components/multipleSelect.vue

<template>
    <uni-popup ref="popup" :showClose="true" background-color="#fff" @change="change">
        <scroll-view class="scroll-content" scroll-y style="height: 80vh;">
            <view class="popup-title">
                <text>选择</text>
            </view>
            
            <!-- 选择列表 -->
            <uni-data-checkbox multiple wrap v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
            
            <view class="footerButton">
                <u-button type="default" @click="handleClose" text="关闭"></u-button>
                <u-button type="primary" @click="handleConfirm" text="确认"></u-button>
            </view>
        </scroll-view>
    </uni-popup>
</template>
<script>
export default {
    props: {
        range: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            // range: [{"value": 0,"text": "篮球"	},{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}],
            value: [],
            key: ''
        }
    },
    computed: {
    
    },
    methods: {
        open(current, index, key) {
            this.current = current;
            this.currentIndex = index;
            this.key = key
            this.$refs.popup.open('bottom');
            if(current[key]) {
                if(typeof current[key] == 'string') {
                    this.value = current[key].split(',')
                } else {
                    this.value = current[key]
                }
            } else {
                this.value = []
            }
        },
        change(e) {
            console.log('当前模式：' + e.type + ',状态：' + e.show);
        },
   
        handleConfirm() {
            this.$emit('confirm', this.value.join(','), this.key );
            this.handleClose()
        },
        handleClose() {
            this.$refs.popup.close()
        },
    }
}
</script>
<style scoped lang="scss">
    .footerButton {
		width: 100%;
		height: 84rpx;
		display: flex;
		position: fixed;
		bottom: 0;
		z-index: 10;
		background-color: #fff;

		/deep/.u-button {
			height: 100%;
		}

		>view {
			flex: 1;

		}
	}
    .scroll-content {
        padding: 20rpx;
    }
    .popup-title {
		display: flex;
		align-items: center;
		padding: 20rpx;
	}
	.popup-title-btn {
		width: 100rpx;
		margin-right: 20rpx;
	}
</style>