【小趴菜前端实习日记2】

一、实现效果

点击每个帐篷弹出对应的弹框内容，第二点击页面任意位置弹框消失

二、循环获取ref

父组件通过ref控制子组件的属性实现消失或隐藏，子组件用v-show实现消失和隐藏


控制台打印结果

三、实现第二次点击后弹框消失的效果

1.全局点击事件

缺点：页面复杂了之后全局点击事件和其他点击事件容易引起混淆；showBox是记录弹框显示和隐藏的变量，当第一次点击showBox被标记为true之后，第二次点击时再注册全局点击监听事件控制弹框的隐藏

注：一定要用箭头函数，箭头函数的this永远是上下文，才能实现第一次点击后第二次点击时隐藏！不然第一次点击时弹框就不会出现了！因为全局点击事件的this指向全局!

2.遮罩

遮罩显示时绑定点击事件控制子组件弹框的关闭

四、线框效果

css伪元素和伪类参考
http://t.csdnimg.cn/GtkFJ
http://t.csdnimg.cn/SwV5n

.dialog::before{
    content: "";
    position: absolute;
    top: 40%;
    right: -20px;
    width: 20px;
    height: 2px;
    background: #26f730;
}
.dialog::after{
    content: "";
    position: absolute;
    top: 40%;
    right: -100px;
    width: 80px;
    height: 2px;
    background: repeating-linear-gradient(to right, #26F730, #26F730 2px, transparent 10px, transparent 2px);
    transform: rotate(60deg);
    transform-origin: left top;
}

五、反方向动画效果

@keyframes rotate{
    0%{
        transform: rotate(0)
    }
    100%{
        transform:rotate(360deg)
    }
}