<template> <u-popup v-model="isShow" class="uni-multiple-picker" @close="cancel" mode="bottom"> <view class="u-multiple-picker-header flex justify_between align_center"> <text class="multiple-picker-btn" @click="cancel">取消</text> <text class="multiple-picker-btn color-blue" @click="confirm">确定</text> </view> <u-row class="choose-info"> <u-col :span="3">当前已选:</u-col> <u-col :span="9" class="choose-info-item">{{nowChooseItem}}</u-col> </u-row> <scroll-view class="picker-content" scroll-y> <view class="picker-main"> <view class="picker-main-item" v-for="(item, index) in listData" :key="item.id" @click="chooseItem(index)"> <view class="item-name">{{item.name}}</view> <u-icon v-show="item.checked==true" class="item-icon" name="checkbox-mark" color="#2979ff" size="28"></u-icon> </view> <view v-if="listData && listData.length == 0"> <u-empty text="数据为空" mode="list" :img-width="200" :margin-top="-60"></u-empty> </view> </view> </scroll-view> </u-popup> </template> <script> export default{ props: { show: { type: Boolean, default: false }, dataList: { type: Array, default: ()=>{ return [] } } }, watch: { show (newValue, oldValue) { this.isShow = newValue }, dataList (newValue, oldValue) { console.log(newValue) this.listData = newValue }, }, computed: { nowChooseItem: function() { let str = '' this.listData.map(item => { if(item.checked){ str += item.name + ','; } }) str = str == '' ? '' : str.substring(0,str.length - 1) return str }, nowChooseItemArr: function() { let arr = [] this.listData.map(item => { if(item.checked){ arr.push({id: item.id, name: item.name}) } }) return arr }, }, data(){ return{ isShow: this.show, listData: this.dataList || [], } }, methods: { // 选择 chooseItem(ind){ this.$set(this.listData[ind], 'checked', !this.listData[ind].checked) }, // 确定 confirm(){ this.$emit('confirm', this.nowChooseItemArr) }, // 取消 cancel(){ this.$emit('cancel') }, } } </script> <style lang="scss" scoped> .uni-multiple-picker{ .u-multiple-picker-header{ padding: 20upx 30upx; position: relative; display: flex; justify-content: space-between; .multiple-picker-btn{ color: rgb(96, 98, 102); } .color-blue{ color: #2979ff; } } .u-multiple-picker-header:after{ content: ""; position: absolute; border-bottom: 1px solid #eaeef1; -webkit-transform: scaleY(.5); transform: scaleY(.5); bottom: 0; right: 0; left: 0; } .choose-info{ padding: 14upx 30upx 14upx; color: rgb(96, 98, 102); .choose-info-item{ color: #2979ff; } } .picker-content{ height: 300upx; padding: 6upx 0 20upx; position: relative; .picker-main{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; max-height: 300upx; .picker-main-item{ position: relative; padding: 0 30upx; .item-name{ padding: 14upx 0; text-align: center; // border-bottom: 1upx dashed #efefef; } .item-icon{ position: absolute; right: 100upx; top: 19upx; } } } } } </style>