vue2.0实现点击后显示，再次点击隐藏

Posted 2021-01-21 guoshuli

描述。点击系统切换，弹出系统切换框。再次点击系统切换，隐藏。点击其他地方。也会隐藏

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

   }

}