使用el-dialog修改样式为自定义弹框

最新推荐文章于 2025-06-30 12:52:36 发布

前端小凯

最新推荐文章于 2025-06-30 12:52:36 发布

阅读量537

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_43235503/article/details/140708699

html：

<el-dialog title="优惠券" :visible.sync="show" 
    top="58px" :modal="false" :close-on-click-modal="false" 
    :lock-scroll="false" custom-class="couponListDialog">
</el-dialog>

js：

data () {
    return {
        弹框显示隐藏
        show：true
    }
},

css:

/deep/.couponListDialog {
    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.1);
    border-radius: 17px;
    width: 445px;
    height: 741px;
    
    .el-dialog__header {
        padding: 21px 34px 0 34px;
    }
    
    .el-dialog__body {
        padding: 0 30px;
    }
}

效果图：