6155部分功能
This commit is contained in:
liub
258
components/BottomSlideMenuPlus/BottomSlideMenuPlus.vue
Normal file
258
components/BottomSlideMenuPlus/BottomSlideMenuPlus.vue
Normal file
@ -0,0 +1,258 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user