<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>