vue实现消息badge 标记_使用vue自定义简单的消息提示框

/** 弹窗动画*/a{text-decoration:none}.drop-enter-active{

/*动画进入过程：0.5s*/transition:all 0.5s ease;

}.drop-leave-active{

/*动画离开过程：0.5s*/transition:all 0.3s ease;

}.drop-enter{

/*动画之前的位置*/transform:translateY(-500px);

}.drop-leave-active{

/*动画之后的位置*/transform:translateY(-500px);

}

/*盒子显示*/.message-dialog-display{display:flex;justify-content:center;

}

/*文本显示*/.message-dialog-text{text-align:center;

}

/*内容样式*/.message-dialog-align{align-content:center;align-items:center;

}

/*最外层 设置position定位*/.message-dialog{position:relative;font-size:1rem;

}

/*遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩*/.message-dialog-cover{position:fixed;z-index:200;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.5);

}

/*内容层 z-index要比遮罩大，否则会