el-dialog弹窗修改宽度

el-dialog弹窗修改宽度(参考:https://www.cnblogs.com/wuhefeng/p/11358328.html)

1.给元素绑定一个width
2.在export default里面设置它的类型和大小
这样就设置好了通常情况下的弹窗的宽度,如果有个别需要重新定义,
3.直接绑定宽度等于某个值(注意,此处的值为String类型,要加引号)
详情见:https://www.cnblogs.com/wuhefeng/p/11358328.html

el-dialog是一个基于Element UI的对话框组件,可以用于实现侧边弹窗。以下是一个简单的el-dialog侧边弹窗的实现方法: ```html <template> <div> <el-button @click="dialogVisible = true">打开侧边弹窗</el-button> <el-dialog :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="false" :append-to-body="true" :before-close="handleClose" custom-class="dialog-custom-class" > <div slot="title" class="dialog-title"> <span>侧边弹窗</span> <el-button class="dialog-close-btn" type="text" @click="dialogVisible = false"> <i class="el-icon-close"></i> </el-button> </div> <div class="dialog-content"> <p>这是一个el-dialog侧边弹窗的示例。</p> </div> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, }; }, methods: { handleClose(done) { this.$confirm("确认关闭?") .then(() => { done(); }) .catch(() => {}); }, }, }; </script> <style scoped> .dialog-custom-class { position: fixed; top: 0; right: 0; height: 100%; margin: 0; padding: 0; border: none; box-shadow: none; background-color: transparent; z-index: 9999; } .dialog-title { background-color: #f5f7fa; border-bottom: 1px solid #ebeef5; padding: 10px 20px; font-size: 16px; font-weight: 500; color: #303133; } .dialog-close-btn { position: absolute; top: 10px; right: 20px; font-size: 20px; color: #909399; } .dialog-content { padding: 20px; } </style> ``` 在上述代码中,el-dialog组件的visible属性绑定到了dialogVisible变量,通过控制dialogVisible变量的值来控制侧边弹窗的显示和隐藏。同时,为了实现侧边弹窗的效果,我们需要给el-dialog组件添加一些样式,例如将其定位到页面的右侧,并设置宽度为30%等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值