info
This commit is contained in:
@@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<view @touchmove.stop.prevent="stop">
|
||||
<view class="tui-bottom-navigation" :class="{ 'tui-navigation-fixed': isFixed, 'tui-remove-splitLine': unlined }">
|
||||
<view
|
||||
class="tui-navigation-item"
|
||||
:class="{ 'tui-item-after_height': splitLineScale, 'tui-last-item': index == itemList.length - 1 }"
|
||||
:style="{ backgroundColor: isDarkMode ? '#202020' : backgroundColor }"
|
||||
v-for="(item, index) in itemList"
|
||||
:key="index"
|
||||
>
|
||||
<view class="tui-item-inner" @tap="menuClick(index, item.parameter, item.type)">
|
||||
<image
|
||||
:src="current | getIcon(index, item)"
|
||||
class="tui-navigation-img"
|
||||
v-if="item.iconPath || (current == index && item.selectedIconPath && item.type == 1)"
|
||||
></image>
|
||||
<text
|
||||
class="tui-navigation-text"
|
||||
:style="{
|
||||
color: isDarkMode ? '#fff' : current == index && item.type == 1 ? selectedColor : item.color || color,
|
||||
fontWeight: current == index && bold && item.type == 1 ? 'bold' : 'normal',
|
||||
fontSize: fontSize
|
||||
}"
|
||||
>
|
||||
{{ item.text }}
|
||||
</text>
|
||||
</view>
|
||||
<view
|
||||
class="tui-navigation-popup"
|
||||
:class="{ 'tui-navigation-popup_show': showMenuIndex == index }"
|
||||
:style="{ backgroundColor: isDarkMode ? '#4c4c4c' : subMenuBgColor, left: item.popupLeft || '50%' }"
|
||||
v-if="item.itemList"
|
||||
>
|
||||
<view
|
||||
class="tui-popup-cell"
|
||||
:class="{ 'tui-first-cell': subIndex === 0, 'tui-last-cell': subIndex === item.itemList.length - 1 }"
|
||||
:hover-class="subMenuHover ? (isDarkMode ? 'tui-item-dark_hover' : 'tui-item-hover') : ''"
|
||||
:hover-stay-time="150"
|
||||
v-for="(subItem, subIndex) in item.itemList || []"
|
||||
:key="subIndex"
|
||||
@tap="subMenuClick(index, item.type, subIndex, subItem.parameter)"
|
||||
>
|
||||
<text class="tui-ellipsis" :style="{ color: isDarkMode ? '#fff' : subMenuColor, fontSize: subMenufontSize, lineHeight: subMenufontSize }">
|
||||
{{ subItem.text }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="tui-popup-triangle" :style="{ borderTopColor: isDarkMode ? '#4c4c4c' : subMenuBgColor }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tui-navigation-mask" :class="{ 'tui-navigation-mask_show': showMenuIndex != -1 }" @tap="handleClose"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tuiBottomNavigation',
|
||||
props: {
|
||||
//当前索引
|
||||
current: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
/**
|
||||
* {
|
||||
text: 'ThorUI',
|
||||
iconPath: '/static/images/common/icon_menu_gray.png',
|
||||
selectedIconPath: '/static/images/common/icon_menu_gray.png',
|
||||
color: '#666',
|
||||
//1-选中切换，2-跳转、请求、其他操作，3-菜单
|
||||
type: 3,
|
||||
//自定义参数，类型自定义
|
||||
parameter: null,
|
||||
//子菜单left值,不传默认50%,当菜单贴近左右两边可用此参数调整
|
||||
popupLeft: '',
|
||||
itemList: [
|
||||
{
|
||||
//不建议超过6个字，请自行控制
|
||||
text: '自定义参',
|
||||
//自定义参数，类型自定义
|
||||
parameter: null
|
||||
},
|
||||
{
|
||||
text: '自定义参数',
|
||||
//自定义参数，类型自定义
|
||||
parameter: null
|
||||
}
|
||||
]
|
||||
}
|
||||
*
|
||||
* */
|
||||
itemList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
//颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#666'
|
||||
},
|
||||
//选中颜色
|
||||
selectedColor: {
|
||||
type: String,
|
||||
default: '#5677fc'
|
||||
},
|
||||
fontSize: {
|
||||
type: String,
|
||||
default: '28rpx'
|
||||
},
|
||||
//选中后字体是否加粗
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//导航条背景颜色
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: '#F8F8F8'
|
||||
},
|
||||
//item分割线高度是否缩小
|
||||
splitLineScale: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//二级菜单字体颜色
|
||||
subMenuColor: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
//二级菜单字体大小
|
||||
subMenufontSize: {
|
||||
type: String,
|
||||
default: '28rpx'
|
||||
},
|
||||
//二级菜单背景色 深色：#4c4c4c
|
||||
subMenuBgColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
//二级菜单是否有点击效果
|
||||
subMenuHover: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//是否固定在底部
|
||||
isFixed: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//去除导航栏顶部的线条
|
||||
unlined: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否暗黑模式 (true：所有设置颜色失效)
|
||||
isDarkMode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
getIcon: function(current, index, item) {
|
||||
let url = item.iconPath;
|
||||
if (item.type == 1) {
|
||||
url = current == index ? item.selectedIconPath || item.iconPath : item.iconPath;
|
||||
}
|
||||
return url;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showMenuIndex: -1 //显示的菜单index
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
stop() {
|
||||
return false;
|
||||
},
|
||||
handleClose() {
|
||||
this.showMenuIndex = -1;
|
||||
},
|
||||
menuClick(index, parameter, type) {
|
||||
//type：1-选中切换，2-跳转、请求、其他操作，3-菜单
|
||||
if (type == 3) {
|
||||
this.showMenuIndex = this.showMenuIndex == index ? -1 : index;
|
||||
} else {
|
||||
this.showMenuIndex = -1;
|
||||
this.$emit('click', {
|
||||
menu: 'main', //main,sub 主菜单，子菜单
|
||||
type: type,
|
||||
index: index,
|
||||
parameter: parameter || ''
|
||||
});
|
||||
}
|
||||
},
|
||||
subMenuClick(index, type, subIndex, parameter) {
|
||||
this.showMenuIndex = -1;
|
||||
this.$emit('click', {
|
||||
menu: 'sub', //main,sub 主菜单，子菜单
|
||||
type: type,
|
||||
index: index,
|
||||
subIndex: subIndex,
|
||||
parameter: parameter || ''
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tui-bottom-navigation {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.tui-navigation-fixed {
|
||||
position: fixed !important;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.tui-bottom-navigation::after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
border-top: 1rpx solid #bfbfbf;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scaleY(0.5) translateZ(0);
|
||||
transform-origin: 0 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
.tui-remove-splitLine::before {
|
||||
border-top: 0 !important;
|
||||
}
|
||||
|
||||
.tui-navigation-item {
|
||||
flex: 1;
|
||||
height: 100rpx;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tui-item-inner {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tui-navigation-item::after {
|
||||
height: 100%;
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-right: 1rpx solid #bfbfbf;
|
||||
transform: scaleX(0.5) translateZ(0);
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.tui-item-after_height::after {
|
||||
height: 40% !important;
|
||||
top: 30% !important;
|
||||
}
|
||||
|
||||
.tui-last-item::after {
|
||||
border-right: 0 !important;
|
||||
}
|
||||
|
||||
.tui-navigation-img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.tui-navigation-popup {
|
||||
max-width: 160%;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
border-radius: 8rpx;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
transform-origin: center;
|
||||
transition: all 0.12s ease-in-out;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.tui-navigation-popup_show {
|
||||
transform: translate3d(-50%, -124rpx, 0);
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tui-popup-triangle {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 9rpx solid transparent;
|
||||
border-right: 9rpx solid transparent;
|
||||
border-top: 18rpx solid;
|
||||
left: 50%;
|
||||
bottom: -18rpx;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
z-index: 997;
|
||||
}
|
||||
|
||||
.tui-popup-cell {
|
||||
width: 100%;
|
||||
padding: 32rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tui-ellipsis {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tui-popup-cell::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-bottom: 1rpx solid #eaeef1;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
bottom: 0;
|
||||
right: 24rpx;
|
||||
left: 24rpx;
|
||||
}
|
||||
|
||||
.tui-item-hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.tui-item-dark_hover {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
.tui-first-cell {
|
||||
border-top-left-radius: 8rpx;
|
||||
border-top-right-radius: 8rpx;
|
||||
}
|
||||
|
||||
.tui-last-cell {
|
||||
border-bottom-left-radius: 8rpx;
|
||||
border-bottom-right-radius: 8rpx;
|
||||
}
|
||||
|
||||
.tui-last-cell::after {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.tui-navigation-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 995;
|
||||
transition: all 0.3s ease-in-out;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.tui-navigation-mask_show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user