计算器

闫增涛

2024-11-05 58e3b80c2d26b831900759bf8666c7fd9c759df5

 src/layout/layout.vue

@@ -1,115 +1,17 @@
<template>
  <div class="layoutBox">
    <div class="menuBox">
      <div :class="['menuItem', activeMenu == index ? 'active' : '']" v-for="(item, index) in menuData" :key="index"
        @click="menuItemClick(index)">
        <div class="menuIcon">
          <el-icon v-if="item.icon == 'FolderOpened'" :size="24">
            <FolderOpened />
          </el-icon>
          <el-icon v-if="item.icon == 'Files'" :size="24">
            <Files />
          </el-icon>
          <el-icon v-if="item.icon == 'Switch'" :size="24">
            <Switch />
          </el-icon>
          <el-icon v-if="item.icon == 'Setting'" :size="24">
            <Setting />
          </el-icon>
        </div>
        <p>{{ item.name }}</p>
      </div>
    </div>
    <div class="pageBox">
      <RouterView />
    </div>
    <RouterView />
  </div>
</template>
</template> 

<script setup lang="ts">
  import { ref, reactive, watch } from 'vue'
  import { useRouter, RouterView } from 'vue-router'
  const router = useRouter()

  // 菜单
  const menuData = reactive([
    // {
    //   name: '文件',
    //   icon: 'FolderOpened',
    //   router: '/home'
    // },
    {
      name: '传输',
      icon: 'Switch',
      router: '/transmission'
    },
    // {
    //   name: '导出',
    //   icon: 'Files',
    //   router: '/exportTask'
    // },
    {
      name: '设置',
      icon: 'Setting',
      router: '/setting'
    }
  ])

  // 选中菜单
  const activeMenu = ref(0)

  // 监听路由变化，默认选中菜单
  watch(
    () => router.currentRoute.value, (newRoute) => {
      console.log(newRoute.path)

      const index = menuData.findIndex((item) => item.router == newRoute.path)
      activeMenu.value = index > -1 ? index : 0
    }
  )

  // 菜单点击
  const menuItemClick = (index) => {
    activeMenu.value = index
    router.push(menuData[index].router)
  }
import { ref, reactive, watch } from 'vue'
import { useRouter, RouterView } from 'vue-router'
</script>

<style lang="less">
  .layoutBox {
    width: 100%;
    height: 100%;
    display: flex;

    .menuBox {
      width: 80px;
      background-color: #f5f5f6;
      border-right: 1px solid #e6e7e8;
      padding: 10px;
      box-sizing: border-box;

      .menuItem {
        padding: 8px 0;
        text-align: center;
        border-radius: 8px;
        line-height: 1;
        cursor: pointer;
        margin-bottom: 10px;

        &.active,
        &:hover {
          background-color: #e3e3e5;
        }

        .menuIcon {
          margin-bottom: 4px;
        }
      }
    }

    .pageBox {
      flex: 1;
      overflow: auto;
    }
  }
</style>
.layoutBox {
  width: 100%;
  height: 100%;
}
</style>