vue2.0實現點擊后顯示,再次點擊隱藏


描述。點擊系統切換,彈出系統切換框。再次點擊系統切換,隱藏。點擊其他地方。也會隱藏

在layout.vue中寫的html代碼

1、在main.js中寫入全局函數

// 定義全局點擊函數,右側系統切換點擊其他地方隱藏系統切換菜單,在layout.vue中使用
Vue.prototype.globalClick = function (callback) {
   document.onclick = function () {
        callback();
    };
};
2、在layout.vue中的js部分代碼
mounted: function () {
      // 調用切換菜單
      this.globalClick(this.moreSetupMenuRemove);
},
methods:{ 
  moreSetupMenuRemove () {
      if(this.isshow && this.istagetShow){
           this.leave(document.getElementsByClassName("switch-system")[0]);
           this.isshow = false;
           this.istagetShow = false;
      }else{
            this.istagetShow = !this.istagetShow;
           if(!this.isshow){
                this.istagetShow=false;
            }
       }
   },
  toggle: function () {
        this.isshow = !this.isshow;
   },
  leave: function (el, done) {
        el.style= "right : -200px";
        console.log("leave方法");
    },
   // 以下三個與enter相關的方法只會在元素由隱藏變為顯示的時候才會執行
   // el:指的是當前調用這個方法的元素對象
  // done:用來決定是否要執行后續的代碼如果不執行這個方法,那么將來執行完before執行完enter以后動畫就會停止
  beforeEnter: function (el) {
         console.log("beforeEnter");
        // 當入場之前會執行 v-enter
        el.style = "right: -200px";
  },
  enter: function (el, done) {
        console.log("enter");
       // 為了能讓代碼正常進行,在設置了結束狀態后必須調用一下這個元素的
       // offsetHeight / offsetWeight 只是為了讓動畫執行
       el.offsetHeight;
       // 結束的狀態最后啊寫在enter中
       el.style = "right: 0px";
      // 執行done繼續向下執行
      done();
   }
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM