bottomMenu.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <template>
  2. <div class="bottom-btn-group">
  3. <div v-for="item in navList" :key="item.pathName" class="vent-row-center btn-item" @click="setBtn('click', item)">
  4. <dv-decoration11
  5. :color="isBtnActive === item.pathName ? activeColors : item.isHover ? activeColors : noActiveColors"
  6. style="width:200px;height:60px;">
  7. {{ item.title }}
  8. </dv-decoration11>
  9. </div>
  10. </div>
  11. </template>
  12. <script lang="ts">
  13. import { ref, defineComponent } from 'vue'
  14. import { Decoration11 as DvDecoration11} from '@kjgl77/datav-vue3'
  15. type navListType = { title: string; pathName: string; isHover: Boolean };
  16. export default defineComponent({
  17. name: 'BottomMenu',
  18. components: { DvDecoration11 },
  19. props: {
  20. navList: {
  21. type: Array<navListType>,
  22. default: () => [
  23. {
  24. title: '监控界面',
  25. pathName: 'monitor',
  26. isHover: false
  27. },
  28. {
  29. title: '历史监测记录',
  30. pathName: 'monitor_history',
  31. isHover: false
  32. },
  33. {
  34. title: '操作历史记录',
  35. pathName: 'handler_history',
  36. isHover: false
  37. },
  38. {
  39. title: '故障诊断历史记录',
  40. pathName: 'faultRecord',
  41. isHover: false
  42. }
  43. ]
  44. },
  45. },
  46. emits: ['change'],
  47. setup(props, {emit}) {
  48. const isBtnActive = ref(props.navList[0].pathName)
  49. const activeColors = ['#009BFF', '#28DBE4']
  50. const noActiveColors = ['#aaa', '#aaa']
  51. function setBtn(type, activeObj) {
  52. if (type === 'over') {
  53. activeObj.isHover = true
  54. } else if (type === 'leave') {
  55. activeObj.isHover = false
  56. } else if (type === 'click') {
  57. isBtnActive.value = activeObj.pathName
  58. }
  59. emit('change', isBtnActive.value)
  60. }
  61. return {
  62. activeColors, noActiveColors, setBtn, isBtnActive
  63. }
  64. },
  65. })
  66. </script>
  67. <style lang="less" scoped>
  68. .bottom-btn-group {
  69. display: flex;
  70. position: fixed;
  71. width: 100%;
  72. height: 100px;
  73. bottom: 20px;
  74. align-items: center;
  75. justify-content: center;
  76. .btn-item {
  77. width: 200px;
  78. height: 60px;
  79. margin: 10px;
  80. color: #fff;
  81. cursor: pointer;
  82. pointer-events: auto;
  83. }
  84. }
  85. </style>