uniapp封装多选弹窗组件

效果图

父组件

<template>
    <view class="zhedang">
       <select-picker ref="mytoast" @handleSelect="getList" />
    </view>
</template>

<script>
import selectPicker from '@/components/selectPicker'
export default {
     components: {
        selectPicker
     },
     methods:{
         getList(list) {
              let arr = []
              let brr = []
              list.forEach((item) => {
                arr.push(item.value)
                brr.push(item.text)
              })
              this.form.category = arr.join(',')
              this.categoryTypeText = brr.join(',')
         },
       selectMany() { //多选
          this.$refs.mytoast.toShow(true)
        }
     }
}
<script>

子组件

<template>
	<view class="box" v-if="isShow">
		<view class="gray" @click="cancel">
		</view>
		<view class="showToast">
			<view class="title">请选择内容类型</view>
			<view class="selectBox">
				<view class="select" v-for="(item, index) in list" :key='index' @click="isSelect(item)">
					<text>{{ item.text }}</text>
					<image class="images" :src="selectLists.includes(item) ? require('@/static/images/icon_selected.png') : ''"
						mode="" />
				</view>
			</view>
			<view class="submit-box">
				<view class="submit-btns" style="width:45% !important" @tap="handleReset">重置</view>
				<view class="submit-btns" style="width:45% !important;background:#4191F7 !important;color:#fff" @tap="btn">确定
				</view>
			</view>
		</view>
	</view>
</template>
 
<script>
export default {
	data() {
		return {
			isShow: false,
			list: [{
				text: '选项一',
				value: 0
			},
			{
				text: '选项二',
				value: 1
			},
			{
				text: '选项三',
				value: 2
			},
			{
				text: '选项四',
				value: 3
			},
			{
				text: '选项五',
				value: 4
			},
			{
				text: '选项六',
				value: 5
			},],
			selectLists: []
		}
	},
	mounted() { },
	methods: {
		toShow(s) {
			this.isShow = true
		},
		isSelect(val) {
			if (this.selectLists.includes(val)) {
				this.selectLists.splice(this.selectLists.indexOf(val), 1)
				return
			}
			this.selectLists.push(val)
		},
		btn(e) {
			this.isShow = false
			this.$emit('handleSelect', this.selectLists)
		},
                //重置
		handleReset() {
			this.selectLists = []
		},
		cancel() {
			this.isShow = false
		}
	}
}
</script>
 
<style lang="less" scoped>
.box {
	width: 100%;
	height: 100%;

	.gray {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1001;
		background-color: #989898;
		opacity: 0.4;
		animation: gray 0.3s;
	}

	.showToast {
		width: 100%;
		height: 55vh;
		background-color: #FFFFFF;
		border-radius: 40rpx 40rpx 0 0;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1001;
		animation: toast 0.5s;

		.selectBox {
			width: 100%;
			height: 35vh;
			margin-top: 0rpx;
			overflow-y: auto;

		}

		.title {
			padding: 30rpx 0;
			text-align: center;
			font-size: 32rpx;
		}

		.images {
			width: 28rpx;
			height: 28rpx;
			object-fit: cover;
		}

		.select {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 40rpx;
			padding: 20rpx 80rpx;
			font-size: 28rpx;
		}

		.goblue {
			padding: 20rpx 0;
			color: #FFFFFF;
		}
	}

	@keyframes toast {
		from {
			height: 0;
                    }
		to {
			height: 55vh;
                   }
	}
}
</style>