68 lines
1.7 KiB
Vue
68 lines
1.7 KiB
Vue
<template>
|
||
<!-- 底部fixed操作条，包含发布选项，普通文字加icon加标签选项 -->
|
||
<view class="cu-bar tabbar margin-bottom-xl bg-white fixed-bottom-bar">
|
||
<view class="action add-action"
|
||
v-for="(item, index) in moduleBarInfos" :key="index"
|
||
v-if="item.action === 'add'"
|
||
:data-cur="item.pageCode"
|
||
:class="[curPageCode===item.pageCode ? 'text-main-color' : 'text-gray']"
|
||
@click="navChange($event, false)">
|
||
<button class="cu-btn shadow bg-main-color"
|
||
:class="['cuIcon-' + item.cuIcon]">
|
||
</button>
|
||
{{item.name}}
|
||
</view>
|
||
<view class="action" v-else
|
||
:data-cur="item.pageCode"
|
||
:class="curPageCode===item.pageCode ? 'text-main-color' : 'text-gray'"
|
||
@click="navChange($event, true)">
|
||
<view :class="'cuIcon-' + item.cuIcon">
|
||
<view class="cu-tag badge" v-if="item.countTag">{{item.countTag > 99 ? '99+' : item.countTag}}</view>
|
||
</view>
|
||
{{item.name}}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "module-bar",
|
||
emits: ['getCurPageInfo'],
|
||
props: {
|
||
moduleBarInfos: {
|
||
type: Array,
|
||
default: []
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
curPageCode: ''
|
||
};
|
||
},
|
||
onReady() {
|
||
this.loadData();
|
||
},
|
||
methods: {
|
||
loadData() {
|
||
this.curPageCode = this.moduleBarInfos[0].pageCode;
|
||
},
|
||
navChange(e, isChangeFocus) {
|
||
let cur = e.currentTarget.dataset.cur;
|
||
this.curPageCode = isChangeFocus ? cur : this.curPageCode;
|
||
this.$emit('getCurPageInfo', {
|
||
curPageCode: cur
|
||
});
|
||
},
|
||
navChangeByCode(curPageCode, isChangeFocus) {
|
||
this.curPageCode = isChangeFocus ? curPageCode : this.curPageCode;
|
||
this.$emit('getCurPageInfo', {
|
||
curPageCode: curPageCode
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style>
|