vue实现箭头向下的对话框

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Smile_Monica/article/details/82726867

<template>
    <div class="arrowDialogBox-container">
        <div class="arrowDialogBox">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss" scoped>
.arrowDialogBox-container{
    .arrowDialogBox {
        width: 260px;
        height: 307px;
        background-color: #fff;
        position: relative;
        border: 2px solid #f39700;
    }
        
    .arrowDialogBox:after,.arrowDialogBox:before {
        border:solid transparent;
        content:' ';
        height: 0;
        top: 100%;
        position: absolute;
        width: 0;
    }
        
    .arrowDialogBox:after {
        border-width: 8px;
        border-top-color: #fff;
        left: 17px;
    }
    
    /* 箭头颜色*/
    .arrowDialogBox:before {
        border-width: 10px;
        border-top-color: #f39700;
        left: 15px;
    }
}

</style>

使用：

<arrowDialogBox>
    你自己定义的内容
</arrowDialogBox>