vue 遮盖层+点击改变样式

  HTML: 

 

 

               

//@click.stop:阻止点击事件

jS:

data(){

    return {

      zhi:"none",

    }

  },

  methods:{

  add(){

        if(this.zhi=="block"){

            this.zhi="none"

        }else{

            this.zhi="block"

        }     

    },

add1(){

        this.zhi="none"

    }

}

  CSS:

.hei{

    width: 100%;

    height: 100%;

    position: absolute;

    top:1rem;

    left: 0;

    right: 0;

  padding-bottom:-1000rem;

    background: rgba(0, 0, 0, 0.1);

    z-index: 100;

}