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

这篇具有很好参考价值的文章主要介绍了若依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文章来源地址https://www.toymoban.com/news/detail-722326.html

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

到了这里，关于若依ruoyi-ui，首页index页面驾驶舱全屏显示方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！