pika_shangjia/components/bottom-pop/index.vue

<template>
	<view>
		<view v-show="showPop" class="confirmation-bar">
			<view class="pop-title">{{title}}</view>
			<view class="pop-close" @tap="closePop()">
				<image style="width: 42rpx;height: 42rpx;" class="image" src="/static/pages/images/close.png"></image>
			</view>
			<view class="pop-content">
				<slot></slot>
			</view>
			<view class="pop-btn" v-if="showBtn">
				<view class="pop-btn-cancal" @tap="closePop"><slot name="leftbtnname">取消</slot></view>
				<view class="pop-btn-submit" :style="'background-color:'+btnColor+';border:1rpx solid '+btnColor+';'" @tap="popSubmit"><slot name="rightbtnname">确认</slot></view>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view v-show="showPop" @tap="closePop" class="mask"></view>
	</view>

</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");

	export default {
		data() {
			return {
				bottomBlankHeignt: app.globalData.isIPhoneX ? 68 : 0
			};
		},

		components: {
			
		},
		props: {
			showPop: {
				type: Boolean,
				default: true
			},
			showBtn: {
				type: Boolean,
				default: true
			},
			title:{
				type: String,
				default:''
			},
			btnColor:{
				type: String,
				default:'#009AFF'
			}
		},
		watch: {
			
		},

		mounted() {
			
		},

		methods: {
			closePop(){
				this.$emit('closePop',false)
			},
			popSubmit(){
				this.$emit('popSubmit')
			}
		}
	};
</script>
<style>
	@import "./index.css";
</style>