若依ruoyi-ui,主窗口(app-main)全屏显示方法

以若依首页为例:
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添加一个全屏按钮:

放大
退出
export default {
  data() {
    return {
      // 窗口放大
      winfull: {
        full: false
      }
    };
  },
  methods: {
    // app-main层全屏显示开关
    fullscreen() {
      this.winfull.full = !this.winfull.full;
      if (this.winfull.full) {
        this.$store.dispatch('app/toggleSideBarHide', true);
        this.$store.dispatch('settings/setNavbar_tags', false);
      } else {
        this.$store.dispatch('app/toggleSideBarHide', false);
        this.$store.dispatch('settings/setNavbar_tags', true);
      }
    }
  }
};

3.layout/index.vue

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

你可能感兴趣的:(若依ruoyi-ui,主窗口(app-main)全屏显示方法)