TalentService-mobile/components/page_bottom_bar/index.vue

149 lines
3.0 KiB
Vue

<template>
<view class="box position-bottom">
<view :class="['cu-bar','tabbar','bg-' + config.bgColor]">
<view
v-for="item in leftNav"
:key="item.id"
:class="['action',{'text-green':cur_type === item.type}]"
@click="handelTap"
:data-cur="item.type">
<view :class="item.icon">
<view
v-if="item.tag >= 0"
class="cu-tag badge"
>{{item.tag}}</view>
</view>
{{item.text}}
</view>
<view
v-if="config.hasMid"
:class="['action',midSetting.textClass,'add-action']">
<button
:class="['cu-btn',midSetting.icon,midSetting.bgClass,{'shadow':midSetting.shadow}]"
@click="takeFuc"
></button>
{{midSetting.text}}
</view>
<view
v-for="item in rightNav"
:key="item.id"
:class="['action',{'text-green':cur_type === item.type}]"
@click="handelTap"
:data-cur="item.type">
<view :class="item.icon">
<view
v-if="item.tag >= 0"
class="cu-tag badge"
>{{item.tag == 0 ? '' : item.tag }}</view>
</view>
{{item.text}}
</view>
</view>
</view>
</template>
<script>
export default {
props:{
config:{
type:Object,
default:()=>( {
id: -1,
name: 'pageBarName',
bgColor:'white',
hasMid:true,
midSetting: {
icon: 'cuIcon-add',
bgClass: 'bg-green',
shadow: true,
text: '新增',
textClass:'text-gray',
shadow:true
},
navBar: [
{
id:0,
icon: 'cuIcon-home',
text: '首页',
type:'home',
tag:-1
},
{
id:1,
icon: 'cuIcon-similar',
text: '分类',
type:'type',
tag:-1
},
{
id:2,
icon: 'cuIcon-cart',
text: '购物车',
type:'shopping',
tag:99
},
{
id:3,
icon: 'cuIcon-my',
text: '我的',
type:'mine',
tag:0
},
]
})
},
takeFuc:{
type:Function,
default:(type)=>{console.log('change:' + type)}
}
},
data() {
return {
cur_type:'home',
leftNav:[],
rightNav:[]
};
},
computed:{
midSetting(){
return this.config.midSetting
},
},
created(){
const navBar = this.config.navBar;
if(Object.prototype.toString.call(navBar) !== "[object Array]" ) {
throw new Error('typeError: config.navBar must be Array')
}
if(navBar.length > 6) {
throw new Error('lengthError: navBar max length 6')
}
const temp = Math.floor( navBar.length / 2 );
this.leftNav = navBar.slice(0,temp);
if(this.config.hasMid){
this.rightNav = navBar.slice(temp,2 * temp);
}else{
this.rightNav = navBar.slice(temp);
}
// 默认选中第一个
this.cur_type = this.config.navBar[0].type;
},
methods:{
handelTap(e){
console.log(e.currentTarget.dataset.cur);
this.cur_type = e.currentTarget.dataset.cur;
this.$emit('onChange',e.currentTarget.dataset.cur);
// this.onChange(e.currentTarget.dataset.cur);
}
}
}
</script>
<style lang="scss">
.position-bottom {
position: fixed;
bottom: 0;
width: 100%;
}
</style>