最新

XT-202209211744\Administrator

2022-11-02 9382eab44c3be56e5517dad86cfd26257ea03a98

 src/App.vue

@@ -13,12 +13,7 @@
    </div>
    <div class="body-box">
      <transition
        :duration="1000"
        mode="out-in"
        appear
        enter-active-class="animated fadeInRight"
        leave-active-class="animated fadeOut"
        appear-active-class="animated zoomInDown"
      :name="transitionName"
      >
        <router-view></router-view>
      </transition>
@@ -46,19 +41,26 @@
    // this.$store.state.className = window.localStorage.getItem('styleName')?window.localStorage.getItem('styleName'):'red'
  },
  watch: {
    $route(val) {
      let title = val.meta.title || "首页";
    $route(to, from) {
      let title = to.meta.title || "首页";
      this.title = title;

      if (val.meta.iconRight) {
        this.iconRight = val.meta.iconRight;
      if (to.meta.iconRight) {
        this.iconRight = to.meta.iconRight;
      } else {
        this.iconRight = "default";
      }
      if (val.meta.hasHeader) {
      if (to.meta.hasHeader) {
        this.hasHeader = true;
      } else {
        this.hasHeader = false;
      }
      if (to.meta.index > from.meta.index) {
        console.log("slide-left");
        //设置动画名称
        this.transitionName = "slide-left";
      } else {
        console.log("slide-right");
        this.transitionName = "slide-right";
      }
    }
  },
@@ -66,7 +68,8 @@
    return {
      title: "首页",
      hasHeader: false,
      iconRight: "default"
      iconRight: "default",
      transitionName: ''
    };
  }
};