CSS模糊效果、禁止点击、Vue获取点击元素

1.在Vue的点击事件中如何获取当前的点击的元素或是当前click事件绑定的元素。

首先vue的点击事件 是用 @click = “clickfun()” 属性 在html中绑定的,

在点击的函数中添加$event 参数就可以

比如点击

methods: {

    clickfun(e) {

    // e.target 是你当前点击的元素

    // e.currentTarget 是你绑定事件的元素

}
复制代码

},

2.模糊效果(毛玻璃效果) ，可以在遮罩层的模糊效果中使用。

//css定义一个模糊效果类

.blur{

-webkit-filter: blur(5px); /* Chrome, Opera */

   -moz-filter: blur(5px);

    -ms-filter: blur(5px);    

        filter: blur(5px);
复制代码

}

//js 遮罩出现时给遮住对象加模糊效果

if($(".mask").is(":visible")){

$(".context").addClass("blur");
复制代码

}

else{

$(".context").removeClass("blur");
复制代码

}

注意：这个是给需要模糊的对象加blur类，而不是遮罩本身

3.将指定的一块区域予以禁止显示的状态

答案：在css里面的属性写上pointer-events：none即可禁止点击，从此没有任何反应。

转载于:https://juejin.im/post/5ce4fb215188253090115d3e