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

以若依首页为例:
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 }
      }

猜你喜欢

转载自blog.csdn.net/m0_61601708/article/details/131973178