549 lines
13 KiB
Vue
549 lines
13 KiB
Vue
<template>
|
||
<view v-if="show" class="tn-tabbar-class tn-tabbar" @touchmove.stop.prevent="() => {}">
|
||
<!-- tabbar 内容-->
|
||
<view class="tn-tabbar__content" :class="{
|
||
'tn-tabbar--fixed': fixed,
|
||
'tn-safe-area-inset-bottom': safeAreaInsetBottom,
|
||
'tn-tabbar--shadow': shadow
|
||
}" :style="{
|
||
height: height + 'rpx',
|
||
backgroundColor: bgColor
|
||
}">
|
||
<!-- tabbar item -->
|
||
<view v-for="(item, index) in list" :key="index" class="tn-tabbar__content__item"
|
||
:id="`tabbar_item_${index}`" :class="{'tn-tabbar__content__item--out': item.out}" :style="{
|
||
backgroundColor: bgColor
|
||
}" @tap.stop="clickItemHandler(index)">
|
||
<!-- tabbar item的图片或者icon-->
|
||
<view :class="[itemButtonClass(index)]" :style="[itemButtonStyle(index)]">
|
||
<image v-if="isImage(index)" :src="elIcon(index)" mode="scaleToFill"
|
||
class="tn-tabbar__content__item__image" :style="{
|
||
width: `${item.iconSize || iconSize}rpx`,
|
||
height: `${item.iconSize || iconSize}rpx`
|
||
}"></image>
|
||
<view v-else class="tn-tabbar__content__item__icon"
|
||
:class="[`tn-icon-${elIcon(index)}`,elIconColor(index, false)]" :style="{
|
||
fontSize: `${item.iconSize || iconSize}rpx`,
|
||
color: elIconColor(index)
|
||
}"></view>
|
||
|
||
<!-- 角标-->
|
||
<tn-badge v-if="!item.out && (item.count || item.dot)" :dot="item.dot || false"
|
||
backgroundColor="tn-bg-red" fontColor="#FFFFFF" :radius="item.dot ? 14 : 0" :fontSize="14"
|
||
padding="2rpx 4rpx" :absolute="true" :top="2">
|
||
{{ $tn.number.formatNumberString(item.count) }}
|
||
</tn-badge>
|
||
</view>
|
||
|
||
<!-- tabbar item的文字-->
|
||
<view class="tn-tabbar__content__item__text" :class="[elColor(index, false)]" :style="{
|
||
color: elColor(index),
|
||
fontSize: `${fontSize}rpx`
|
||
}">
|
||
<text class="tn-text-ellipsis">{{ item.title }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- item 突起部分 -->
|
||
<view v-if="outItemIndex !== -1" class="tn-tabbar__content__out" :class="[{
|
||
'tn-tabbar__content__out--shadow': shadow
|
||
}, animation && value === outItemIndex ? `tn-tabbar__content__out--animation--${animationMode}` : '']" :style="{
|
||
backgroundColor: `transparent`,
|
||
left: outItemLeft,
|
||
width: `${outHeight}rpx`,
|
||
height: `${outHeight}rpx`,
|
||
top: `-${outHeight * 0.3}rpx`
|
||
}" @tap.stop="clickItemHandler(outItemIndex)"></view>
|
||
</view>
|
||
|
||
<!-- 防止tabbar塌陷 -->
|
||
<view class="tn-tabbar__placeholder" :class="{'tn-safe-area-inset-bottom': safeAreaInsetBottom}" :style="{
|
||
height: `calc(${height}rpx)`
|
||
}"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'tn-tabbar',
|
||
props: {
|
||
// 绑定当前被选中的current值
|
||
value: {
|
||
type: [String, Number],
|
||
default: 0
|
||
},
|
||
// 是否显示
|
||
show: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 图标列表
|
||
list: {
|
||
type: Array,
|
||
default () {
|
||
return []
|
||
}
|
||
},
|
||
// 高度，单位rpx
|
||
height: {
|
||
type: Number,
|
||
default: 100
|
||
},
|
||
// 突起的高度
|
||
outHeight: {
|
||
type: Number,
|
||
default: 100
|
||
},
|
||
// 背景颜色
|
||
bgColor: {
|
||
type: String,
|
||
default: '#FFFFFF'
|
||
},
|
||
// 图标大小
|
||
iconSize: {
|
||
type: Number,
|
||
default: 40
|
||
},
|
||
// 字体大小
|
||
fontSize: {
|
||
type: Number,
|
||
default: 24
|
||
},
|
||
// 激活时的颜色
|
||
activeColor: {
|
||
type: String,
|
||
default: '#01BEFF'
|
||
},
|
||
// 非激活时的颜色
|
||
inactiveColor: {
|
||
type: String,
|
||
default: '#AAAAAA'
|
||
},
|
||
// 激活时图标的颜色
|
||
activeIconColor: {
|
||
type: String,
|
||
default: '#01BEFF'
|
||
},
|
||
// 非激活时图标的颜色
|
||
inactiveIconColor: {
|
||
type: String,
|
||
default: '#AAAAAA'
|
||
},
|
||
// 激活时的自定义样式
|
||
activeStyle: {
|
||
type: Object,
|
||
default () {
|
||
return {}
|
||
}
|
||
},
|
||
// 是否显示阴影
|
||
shadow: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 点击时是否有动画
|
||
animation: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 点击时的动画模式
|
||
animationMode: {
|
||
type: String,
|
||
default: 'scale'
|
||
},
|
||
// 是否固定在底部
|
||
fixed: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
|
||
safeAreaInsetBottom: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 切换前回调
|
||
beforeSwitch: {
|
||
type: Function,
|
||
default: null
|
||
}
|
||
},
|
||
computed: {
|
||
// 当前字体的颜色
|
||
elColor() {
|
||
return (index, style = true) => {
|
||
let currentItem = this.list[index]
|
||
let color = ''
|
||
if (index === this.value) {
|
||
color = currentItem['activeColor'] || this.activeColor
|
||
} else {
|
||
color = currentItem['inactiveColor'] || this.inactiveColor
|
||
}
|
||
// 判断是否获取内部样式
|
||
if (style) {
|
||
if (this.$tn.color.getFontColorStyle(color) !== '') {
|
||
return color
|
||
} else {
|
||
return ''
|
||
}
|
||
} else {
|
||
if (this.$tn.color.getFontColorStyle(color) === '') {
|
||
return color
|
||
} else {
|
||
return ''
|
||
}
|
||
}
|
||
}
|
||
},
|
||
// 当前图标的颜色
|
||
elIconColor() {
|
||
return (index, style = true) => {
|
||
let currentItem = this.list[index]
|
||
let color = ''
|
||
if (index === this.value) {
|
||
color = currentItem['activeIconColor'] || this.activeIconColor
|
||
} else {
|
||
color = currentItem['inactiveIconColor'] || this.inactiveIconColor
|
||
}
|
||
// 判断是否获取内部样式
|
||
if (style) {
|
||
if (this.$tn.color.getFontColorStyle(color) !== '') {
|
||
return color
|
||
} else {
|
||
return ''
|
||
}
|
||
} else {
|
||
if (this.$tn.color.getFontColorStyle(color) === '') {
|
||
return color + ' tn-tabbar__content__item__icon--clip'
|
||
} else {
|
||
return ''
|
||
}
|
||
}
|
||
}
|
||
},
|
||
// 当前的图标
|
||
elIcon() {
|
||
return (index) => {
|
||
let currentItem = this.list[index]
|
||
if (index === this.value) {
|
||
return currentItem['activeIcon']
|
||
} else {
|
||
return currentItem['inactiveIcon']
|
||
}
|
||
}
|
||
},
|
||
// 突起部分item button对应的类
|
||
itemButtonClass() {
|
||
return (index) => {
|
||
let clazz = ''
|
||
if (this.list[index]['out']) {
|
||
clazz += 'tn-tabbar__content__item__button--out'
|
||
if (this.$tn.color.getFontColorStyle(this.activeIconColor) === '') {
|
||
clazz += ` ${this.activeIconColor}`
|
||
}
|
||
if (this.value === index) {
|
||
clazz += ` tn-tabbar__content__item__button--out--animation--${this.animationMode}`
|
||
}
|
||
} else {
|
||
clazz += 'tn-tabbar__content__item__button'
|
||
if (this.value === index) {
|
||
clazz += ` tn-tabbar__content__item__button--animation--${this.animationMode}`
|
||
}
|
||
}
|
||
return clazz
|
||
}
|
||
},
|
||
// 突起部分item button样式
|
||
itemButtonStyle() {
|
||
return (index) => {
|
||
let style = {}
|
||
console.log();
|
||
if (this.list[index]['out']) {
|
||
if (this.$tn.color.getFontColorStyle(this.activeIconColor) !== '') {
|
||
//style.backgroundColor = this.activeIconColor
|
||
if (this.value == 2) {
|
||
style.backgroundColor = '#ffffff'
|
||
} else {
|
||
style.backgroundColor = '#ffffff'
|
||
}
|
||
}
|
||
style.width = `${this.outHeight - 20}rpx`
|
||
style.height = `${this.outHeight - 20}rpx`
|
||
style.top = `-${this.outHeight * 0.3}rpx`
|
||
|
||
return style
|
||
}
|
||
return style
|
||
}
|
||
},
|
||
// 判断图标是否为图片
|
||
isImage() {
|
||
return (index) => {
|
||
const icon = this.list[index]['activeIcon']
|
||
// 只有包含了'/'就认为是图片
|
||
return icon.indexOf('/') !== -1
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 当前突起的位置
|
||
outItemLeft: '50%',
|
||
// 当前设置了突起按钮的index
|
||
outItemIndex: -1,
|
||
// 每一个item的信息
|
||
tabbatItemInfo: []
|
||
}
|
||
},
|
||
watch: {
|
||
|
||
},
|
||
created() {
|
||
this.getOutItemIndex()
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.getTabbarItem()
|
||
})
|
||
},
|
||
methods: {
|
||
// 获取每一个item的信息
|
||
getTabbarItem() {
|
||
let query = uni.createSelectorQuery().in(this)
|
||
// 遍历获取信息
|
||
for (let i = 0; i < this.list.length; i++) {
|
||
query.select(`#tabbar_item_${i}`).fields({
|
||
size: true,
|
||
rect: true
|
||
})
|
||
}
|
||
query.exec(res => {
|
||
if (!res) {
|
||
setTimeout(() => {
|
||
this.getTabbarItem()
|
||
}, 10)
|
||
return
|
||
}
|
||
this.tabbatItemInfo = res.map((item) => {
|
||
return {
|
||
left: item.left,
|
||
width: item.width
|
||
}
|
||
})
|
||
this.updateOutItemLeft()
|
||
})
|
||
},
|
||
// 获取突起Item所在的index(如果存在)
|
||
getOutItemIndex() {
|
||
this.outItemIndex = this.list.findIndex((item) => {
|
||
return item.hasOwnProperty('out') && item.out
|
||
})
|
||
},
|
||
// 点击底部菜单时触发
|
||
async clickItemHandler(index) {
|
||
if (this.beforeSwitch && typeof(this.beforeSwitch) === 'function') {
|
||
// 执行回调，同时传入索引当作参数
|
||
// 在微信，支付宝等环境(H5正常)，会导致父组件定义的函数体中的this变成子组件的this
|
||
// 通过bind()方法，绑定父组件的this，让this的this为父组件的上下文
|
||
let beforeSwitch = this.beforeSwitch.bind(this.$tn.$parent.call(this))(index)
|
||
// 判断是否返回了Promise
|
||
if (!!beforeSwitch && typeof beforeSwitch.then === 'function') {
|
||
await beforeSwitch.then(res => {
|
||
// Promise返回成功
|
||
this.switchTab(index)
|
||
}).catch(err => {
|
||
|
||
})
|
||
} else if (beforeSwitch === true) {
|
||
this.switchTab(index)
|
||
}
|
||
} else {
|
||
this.switchTab(index)
|
||
}
|
||
},
|
||
// 切换tab
|
||
switchTab(index) {
|
||
// 发出事件和修改v-model绑定的值
|
||
this.$emit('change', index)
|
||
this.$emit('input', index)
|
||
},
|
||
// 设置突起的位置
|
||
updateOutItemLeft() {
|
||
// 查找出需要突起的元素
|
||
const index = this.list.findIndex((item) => {
|
||
return item.out
|
||
})
|
||
if (index !== -1) {
|
||
this.outItemLeft = this.tabbatItemInfo[index].left + (this.tabbatItemInfo[index].width / 2) + 'px'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tn-tabbar {
|
||
|
||
&__content {
|
||
box-sizing: content-box;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
position: relative;
|
||
width: 100%;
|
||
z-index: 1024;
|
||
|
||
&__out {
|
||
position: absolute;
|
||
z-index: 4;
|
||
border-radius: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
|
||
&--shadow {
|
||
// box-shadow: 0rpx -10rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
|
||
|
||
&::before {
|
||
content: " ";
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 50rpx;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
background-color: inherit;
|
||
}
|
||
}
|
||
|
||
&--animation {
|
||
&--scale {
|
||
transform-origin: 50% 100%;
|
||
animation: tabbar-content-out-click 0.2s forwards 1 ease-in-out;
|
||
}
|
||
}
|
||
}
|
||
|
||
&__item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100%;
|
||
position: relative;
|
||
align-items: center;
|
||
|
||
&__button {
|
||
margin-bottom: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
|
||
&--out {
|
||
margin-bottom: 10rpx;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 6;
|
||
|
||
&--animation {
|
||
&--scale {
|
||
transform-origin: 50% 100%;
|
||
animation: tabbar-item-button-out-click 0.2s forwards 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
&--animation {
|
||
&--scale {
|
||
|
||
.tn-tabbar__content__item__icon,
|
||
.tn-tabbar__content__item__image {
|
||
transform-origin: 50% 100%;
|
||
animation: tabbar-item-button-click 0.2s forwards 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&__icon {
|
||
|
||
&--clip {
|
||
-webkit-background-clip: text;
|
||
color: transparent !important;
|
||
}
|
||
}
|
||
|
||
&__text {
|
||
width: 100%;
|
||
font-size: 26rpx;
|
||
line-height: 28rpx;
|
||
text-align: center;
|
||
margin-bottom: 10rpx;
|
||
z-index: 10;
|
||
transition: all 0.2s ease-in-out;
|
||
}
|
||
|
||
&--out {
|
||
height: calc(100% - 1px);
|
||
}
|
||
}
|
||
}
|
||
|
||
&--fixed {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
&--shadow {
|
||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||
}
|
||
}
|
||
|
||
/* 点击动画 start */
|
||
|
||
@keyframes tabbar-item-button-click {
|
||
from {
|
||
transform: scale(0.8);
|
||
}
|
||
|
||
to {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
@keyframes tabbar-item-button-out-click {
|
||
0% {
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
|
||
50% {
|
||
transform: translateY(-10rpx) scale(1.2);
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
}
|
||
|
||
@keyframes tabbar-content-out-click {
|
||
0% {
|
||
transform: translateX(-50%) translateY(0) scale(1);
|
||
}
|
||
|
||
50% {
|
||
transform: translateX(-50%) translateY(-10rpx) scale(1.1);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(-50%) translateY(0) scale(1);
|
||
}
|
||
}
|
||
|
||
/* 点击动画 end */
|
||
</style> |