首页vue el-dialog 美化代码

vue el-dialog 美化代码

时间: 2023-07-31 13:04:19 浏览: 273

下面是一个示例代码，展示如何使用自定义样式美化Vue的el-dialog组件： ```html <template> <el-dialog :visible.sync="dialogVisible" custom-class="my-dialog"> <span slot="title" class="my-dialog-title">提示</span> <div class="my-dialog-content"> 这是一个消息提示框 </div> <div slot="footer" class="my-dialog-footer"> <el-button @click="dialogVisible = false">确定</el-button> </div> </el-dialog> </template> <style scoped> .my-dialog { border-radius: 8px; } .my-dialog-title { background-color: #f0f0f0; font-size: 18px; } .my-dialog-content { padding: 20px; background-color: #fff; } .my-dialog-footer { text-align: right; padding: 10px; } </style> <script> export default { data() { return { dialogVisible: false }; } }; </script> ``` 在上面的示例中，我们使用了自定义class来美化el-dialog组件。通过设置`custom-class`属性为"my-dialog"，我们为el-dialog添加了一个自定义的class。然后，在style中使用该class来设置相应的样式。我们还使用了slot来自定义标题栏和按钮的样式。在标题栏中，我们使用`slot="title"`并添加了一个自定义的class"my-dialog-title"，然后在style中设置了标题栏的背景色和字体大小。同样地，在底部按钮处，我们使用`slot="footer"`并添加了一个自定义的class"my-dialog-footer"，然后在style中设置了按钮的样式。这只是一个简单的示例，你可以根据自己的需求进行更多样式的定制。希望对你有所帮助！

阅读全文