关于vue.js:若依ruoyiui主窗口appmain全屏显示方法

85次阅读

共计 1144 个字符,预计需要花费 3 分钟才能阅读完成。

以若依首页为例:
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">
  <img class="ico" src="@/assets/images/index/ico_big.png"/>
  <div class="text"> 放大 </div>
</div>
<div class="signOut" @click="fullscreen" v-else>
  <img class="ico" src="@/assets/images/index/ico_signOut.png"/>
  <div class="text"> 退出 </div>
</div>
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

<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
    }),
....
  }
....
}

正文完
 0