jili2-ph/components/cpicker/cpicker.vue

<template>
	<view>
		<view v-if="show" class="cpicker-mask">
		  <view class="cpicker-box">
		    <view class="cpicker-box-header">{{title}}</view>
		    <scroll-view scroll-y class='main-content'>
		      <view v-for="(item,index) in list" :key="index" class="cpicker-option" :data-id="item.id" @click="clickOption">
		        {{item.title}}
		        <image v-if="item.id == defaultId" class="cpicker-option-checked" src="../../images/duihao-red.png"></image>
		      </view>
		    </scroll-view>
		    <view class='modal-footer'>
		      <view class='cancel-btn' @click='cancel'>取消</view>
		      <view class='confirm-btn' @click='confirm'>确定 </view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cpicker",
		components: {
		
		},
		props: {
			title: {
				type: String,
				default: "请选择"
			},
			show: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				value: [] //[{id:1,title:'五星花园'},{id:2,title:'陪护单类型选错了陪护单类型选错了'}]
			},
			did: { //默认值
				type: Number,
				value: 0,
			}
		},
		data() {
			return {
				defaultId: 0
			}
		},
        mounted() {
			this.defaultId = this.did;
          console.log(this.list,this.show);
        },
		methods: {
			// 点击modal的回调函数
			clickOption(e) {
				this.defaultId = e.currentTarget.dataset.id;
			},
			// 点击取消按钮的回调函数
			cancel() {
				// this.show = false;
				this.$emit('update:show', false);
				// this.triggerEvent('cancel')  //triggerEvent触发事件
				this.$emit('cancel');
			},
			// 点击确定按钮的回调函数
			confirm() {
				this.$emit('update:show', false);
				let sinfo = null;
				this.list.forEach((item) => {
					if(item.id == this.defaultId){
						sinfo = item;
					}
				});
				// this.triggerEvent('confirm',sinfo);
				this.$emit('confirm',sinfo);
			}
		}
	};
</script>

<style lang="scss" scoped>
	/*遮罩层*/
	.cpicker-mask{
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  position: fixed;
	  left: 0;
	  right: 0;
	  top: 0;
	  bottom: 0;
	  background-color: rgba(0,0,0,0.6);
	  z-index: 999999999999;
	}
	  /*遮罩内容*/
	.cpicker-box{
	  display: flex;
	  flex-direction: column;
	  width: 600rpx;
	  background-color: #fff;
	  border-radius: 10rpx;
	  /* padding: 20rpx; */
	  text-align: center;
	  font-size: 30rpx;
	  color: #333333;
	  /* font-weight: bold; */
	}
	.cpicker-box-header{
	  height: 90rpx;
	  line-height: 90rpx;
	  border-bottom: 1rpx solid #e6e4e4;
	}
  /*中间内容*/
  .main-content{
	flex: 1;
	/* height: 100%; */
	min-height: 200rpx;
	overflow-y: hidden; 
	max-height:40vh;
	padding-top: 20rpx;
  }

  .cpicker-option{
	position: relative;
	width: 460rpx;
	height: 70rpx;
	line-height: 70rpx;
	/* text-align: left; */
	padding: 0 70rpx;
	padding-right: 70rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space:nowrap; 
  }
  .cpicker-option-checked{
	position: absolute;
	z-index: 10;
	right: 20rpx;
	top: 20rpx;
	width: 30rpx;
	height: 30rpx;
  }

  /*底部按钮*/
  .modal-footer{
	display: flex;
	flex-direction: row;
	height: 90rpx;
	line-height: 90rpx;
	border-top: 1rpx solid #e6e4e4;
	margin-top: 30rpx;
  }
  .cancel-btn, .confirm-btn{
	flex: 1;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	font-size: 32rpx;
  }
  .cancel-btn{
	color: #333333;
	border-right: 1rpx solid #e6e4e4;
  }
  .confirm-btn {
	color: var(--themeColor)
  }
	  
	 
</style>