Files
APP/components/BottomSlideMenuPlus/BottomSlideMenuPlus.vue
2025-07-11 16:11:40 +08:00

258 lines
5.6 KiB
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>