123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- <template>
- <div class="bottom-btn-group">
- <div v-for="item in navList" :key="item.pathName" class="vent-row-center btn-item" @click="setBtn('click', item)">
- <dv-decoration11
- :color="isBtnActive === item.pathName ? activeColors : item.isHover ? activeColors : noActiveColors"
- style="width:200px;height:60px;">
- {{ item.title }}
- </dv-decoration11>
- </div>
- </div>
- </template>
- <script lang="ts">
- import { ref, defineComponent } from 'vue'
- import { Decoration11 as DvDecoration11} from '@kjgl77/datav-vue3'
- type navListType = { title: string; pathName: string; isHover: Boolean };
- export default defineComponent({
- name: 'BottomMenu',
- components: { DvDecoration11 },
- props: {
- navList: {
- type: Array<navListType>,
- default: () => [
- {
- title: '监控界面',
- pathName: 'monitor',
- isHover: false
- },
- {
- title: '历史监测记录',
- pathName: 'monitor_history',
- isHover: false
- },
- {
- title: '操作历史记录',
- pathName: 'handler_history',
- isHover: false
- },
- {
- title: '故障诊断历史记录',
- pathName: 'faultRecord',
- isHover: false
- }
- ]
- },
- },
- emits: ['change'],
- setup(props, {emit}) {
- const isBtnActive = ref(props.navList[0].pathName)
- const activeColors = ['#009BFF', '#28DBE4']
- const noActiveColors = ['#aaa', '#aaa']
- function setBtn(type, activeObj) {
- if (type === 'over') {
- activeObj.isHover = true
- } else if (type === 'leave') {
- activeObj.isHover = false
- } else if (type === 'click') {
- isBtnActive.value = activeObj.pathName
- }
- emit('change', isBtnActive.value)
- }
- return {
- activeColors, noActiveColors, setBtn, isBtnActive
- }
- },
- })
- </script>
- <style lang="less" scoped>
- .bottom-btn-group {
- display: flex;
- position: fixed;
- width: 100%;
- height: 100px;
- bottom: 20px;
- align-items: center;
- justify-content: center;
- .btn-item {
- width: 200px;
- height: 60px;
- margin: 10px;
- color: #fff;
- cursor: pointer;
- pointer-events: auto;
- }
- }
- </style>
|