APP/components/BottomSlideMenuPlus/BottomSlideMenuPlus.vue

<template>
	<view class="message-popup" :class="{ 'show': config.show }">

		<view class="mask" @click="closeMenu" :class="{ 'show': config.show }"
		:style="{backgroundColor:config.maskBgColor,display:(config.showMask?'':'none')}"
		>

		</view>
		<view class="bottom-slide-menu" :style="{ backgroundColor: config.bgColor }" :class="{ 'show': config.show }"
			@touchmove.stop.prevent>
			<view class="menu-header" :class="config.showHeader?'':'displayNone'">
				<view class="title" :style="{ color: config.textColor}">{{ config.title }}</view>
				<view  class="close-icon" @click="closeMenu"
				:style="{display:(config.showClose?'':'none')}"
				>
					<image src="/static/Images/public/close.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="menu-items" v-if="config.menuItems && config.menuItems.length>0">
				<view class="menu-item" v-for="(item, index) in config.menuItems" :key="index" :style="{ 
					color: config.textColor, 
				textAlign: config.textAlign,
				height:config.itemHeight,
				lineHeight:config.itemHeight,				
				paddingLeft: config.dividerMargin,
				paddingRight: config.dividerMargin
				}" @click="handleItemClick(item, index)">

					<view class="p100" :style="{backgroundColor:config.activeIndex==index?config.itemBgColor:'',
				justifyContent:config.textAlign
				}">
						<image v-if="item.icon" :src="item.icon" mode="aspectFit"></image>
						<text>{{ item.text }}</text>
					</view>


					<view v-if="index<config.menuItems.length-1" class="menu-line"
						:style="{paddingLeft: config.dividerMargin,paddingRight: config.dividerMargin}">
						<view class="menu-divider"
							:style="{borderTopWidth: config.dividerThickness,borderTopColor: config.dividerColor}">
						</view>
					</view>


				</view>
			</view>
			<slot v-else></slot>
			<view @click="btnClick" class="bottom-btn" :class="config.showBtn?'':'displayNone'"
				:style="{ backgroundColor: config.btnBgColor ,color:config.btnTextColor}">
				{{config.btnText}}
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'BottomSlideMenuPlus',
		props: {
			config: {
				type: Object,
				default: () => ({
					show: false,//是否显示
					showHeader: false,//是否显示标头
					showMask:true,//是否显示mask
					showDivider: false,//是否在两个项之间显示分隔线
					showBtn: false,//是否显示底部按钮
					showClose:false,//是否显示右上角关闭按钮
					maskBgColor:'',//mask的颜色
					menuItems: [],//菜单项 包含icon text
					activeIndex: -1,//当前已选中的项编号
					bgColor: '#2a2a2a',//主体背景
					itemBgColor: '#3a3a3a',//各项被选中后的背景
					textColor: '#ffffffde',//各项的文字颜色
					textAlign: 'flex-start',//各项的文字居中方式
					title: '',//header的文字					
					dividerColor: '#00000000',//分隔线颜色
					dividerThickness: '0rpx',//分隔线宽度
					dividerMargin: '10rpx',//分隔线距离两边的宽度
					itemHeight: '80rpx',//各项的调试					
					btnBgColor: "#bbe600",//按钮颜色
					btnText: "确定",//按钮文字
					btnTextColor: "#000000",//按钮文字颜色
					
				})
			},


		},
		
		methods: {
			closeMenu() {

				this.$emit('close');
			},
			handleItemClick(item, index) {


				this.$emit('itemClick', item, index);
			},
			btnClick() {
				
				let item = null;
				let index = null;
				if (this.config.activeIndex > -1) {
					item = this.config.menuItems[this.config.activeIndex];
				}
				index = this.config.activeIndex;
				this.$emit('btnClick', item, index); 
			}
			
		}
	}
	
</script>

<style>
	.message-popup {
		position: relative;
		display: none;
	}

	.message-popup.show {
		display: block;
	}

	.p100 {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		padding: 0rpx 20rpx;
	}

	.displayNone {
		display: none !important;
	}

	.bottom-slide-menu {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		transition: transform 0.3s ease-out;
		transform: translateY(100%);
		border-radius: 16rpx 16rpx 0 0;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.mask {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9998;
		width: 100%;
		height: 100%;
	}


	.bottom-slide-menu.show {
		transform: translateY(0);
	}

	.menu-header {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 30rpx;
		/* border-bottom: 0.03125rem solid #eeeeee; */
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		height: auto;
		position: relative;
	}

	.title {
		font-size: 32rpx;
		font-weight: 600;
	}

	.close-icon {
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		top: 30rpx;
		right: 30rpx;

	}

	.close-icon image {
		width: 100%;
		height: 100%;
	}

	.menu-items {
		padding: 20rpx 0;
	}

	.menu-item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex-wrap: nowrap;
		box-sizing: border-box;
		font-size: 28rpx;
		width: 100%;
		box-sizing: border-box;
		position: relative;
	}

	.menu-item image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	/* 分隔线样式 */

	.menu-line {
		width: 100%;
		box-sizing: border-box;
		position: absolute;
		bottom: 0px;
		height: auto;
	}

	.menu-divider {
		border-top-style: solid;
		width: 100%;
		height: 0px;


	}

	.bottom-btn {
		width: 100%;
		height: 90rpx;
		text-align: center;
		color: rgba(35, 35, 35, 0.87);
		font-family: PingFang SC;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 90rpx;
		letter-spacing: 12rpx;
		text-align: center;
	}
</style>