149 lines
3.0 KiB
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>
|