vue2.0實現點擊後顯示，再次點擊隱藏

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

在layout.vue中寫的html代碼

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

// 定義全局點擊函數,右側系統切換點擊其餘地方隱藏系統切換菜單，在layout.vue中使用

Vue.prototype.globalClick = function (callback) {

   document.onclick = function () {

        callback();

    };

};

二、在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();

   }

}