el-dialog宽度根据内容撑开

复制代码
<template>
     <el-dialog title="xxx" :visible.sync="dialogVisible" 
        center @close="handleDialogClose">
        <div class="line"></div>
        <div class="sample-con">

        </div>
    </el-dialog>

</template>

<script>
export default {
props:{
    type:{
        type:String,
        default:''
    },
    dialogVisible:{
        type:Boolean,
        default:false
    }
},
data(){
    return{

    }
},
methods:{
    handleDialogClose() {
            this.$emit('update:visible', false);
        },
}
}
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
    height: auto;
    width: auto;
    display: inline-block;
    margin-left: 50%;
    transform: translateX(-50%);
    .el-dialog__header {
        padding-top: 27px;
        font-size: 16px;
        font-family: "MiSansMedium" !important;
        line-height: 22px;

        .el-dialog__title {
            color: #fff;
        }
    }
}

:deep(.el-dialog--center .el-dialog__body) {
    padding: 0 !important;
    /* width:300px !important; */
}

.line {
    width: 100%;
    height: 2px;
    background: #FFFFFF;
    opacity: 0.08;
    margin-top: 9px;
}

 .sample-con{
    width: 800px;
    height: 300px;
    border: 1px solid red;
 }

</style>

关键代码css:

height: auto;

width: auto;

display: inline-block;

margin-left: 50%;

transform: translateX(-50%);

overflow: visible !important; //可加可不加

然后根据

:deep(.el-dialog--center .el-dialog__body) {

padding: 0 !important;

/* width:300px !important; */ 撑开宽度

}

或者:

.sample-con{

width: 800px; 内部元素撑开宽度

}

相关推荐
驭风少年君7 小时前
《搭建属于自己的网站之网页前端学习》基础入门
前端·学习
刘一说7 小时前
深入理解 Spring Boot 嵌入式 Web 容器:从原理到性能调优
前端·spring boot·firefox
你的人类朋友8 小时前
设计模式的原则有哪些?
前端·后端·设计模式
!执行8 小时前
Web3 前端与合约交互
前端·web3·1024程序员节
潘小安8 小时前
跟着 AI 学(二)- Quill 接入速通
前端
十里-8 小时前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
shada8 小时前
从Google Chrome商店下载CRX文件
前端·chrome
左耳咚9 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
D_C_tyu9 小时前
Vue3 + Element Plus 实现前端手动分页
javascript·vue.js·elementui
星光一影9 小时前
供应链进销存源码uniapp全开源ERP多仓库管理系统pc+app手机端
mysql·elementui·uni-app·开源·php·phpstorm·1024程序员节