若依ruoyi-ui，首页index页面驾驶舱全屏显示方法

小何…

已于 2023-07-29 09:18:51 修改

阅读量2.9k

点赞数 1

文章标签：前端 vue.js javascript

于 2023-07-28 09:26:32 首次发布

本文链接：https://blog.csdn.net/m0_61601708/article/details/131973178

版权

文章介绍了在若依框架中如何实现首页全屏功能以及navbar_tags的显示与隐藏控制。通过修改store/modules/settings.js中的状态，在views/index.vue中添加全屏按钮，并在layout/index.vue中根据navbar_tags的状态显示或隐藏navbar。同时，更新router.js配置以避免页面缓存影响全屏效果。

摘要由CSDN通过智能技术生成

以若依首页为例：
1.store/modules/settings.js添加一个navbar_tags：

....
const state = {
....
  navbar_tags: true // navbar/tags-view显示与隐藏
}
....
const actions = {
....
  // navbar/tags-view显示与隐藏
  setNavbar_tags({ commit }, navbar_tags) {
    state.navbar_tags = navbar_tags
  }
}
....

2.views/index.vue添加一个全屏按钮：

    <div class="signOut" @click="fullscreen" v-if="!winfull.full">
      <el-button>放大</el-button>
    </div>
    <div class="signOut" @click="nofullscreen" v-else>
      <el-button>退出</el-button>
    </div>
    <el-button @click="changePage">跳转页面</el-button>

export default {
  data() {
    return {
      // 窗口放大
      winfull: {
        full: false
      }
    };
  },
  // 解决第二次进入页面，页面存在缓存不刷新问题
  activated() {
    this.fullscreen(); // 需要刷新执行的函数
  },
  // 进入页面就显示全屏
  created() {
    this.fullscreen();
  },
  methods: {
    // app-main层全屏显示开关
    fullscreen() {
      this.winfull.full = true;
      this.$store.dispatch("app/toggleSideBarHide", true);
      this.$store.dispatch("settings/setNavbar_tags", false);
    },
    // 关闭全屏显示
    nofullscreen() {
      this.winfull.full = false;
      this.$store.dispatch("app/toggleSideBarHide", false);
      this.$store.dispatch("settings/setNavbar_tags", true);
    },
    // 跳转页面
    changePage() {
      this.$router.push({ path: "/system/user" });
      this.nofullscreen();
    },
  }
};

3.layout/index.vue

<div :class="{'fixed-header':fixedHeader}" v-if="navbar_tags">
  <navbar />
  <tags-view v-if="needTagsView" />
</div>

....
export default {
....
  computed: {
    ...mapState({
....
      navbar_tags: state => state.settings.navbar_tags
    }),
....
  }
....
}

4.更改router.js中的配置项，刷新缓存，不然第二次进去不会全屏

添加 keepAlive: false

     {
        path: 'index',
        component: () => import('@/views/index'),
        name: 'Index',
        meta: { title: '首页', icon: 'dashboard', affix: true , keepAlive: false }
      }