vue element ui ElMessageBox设置样式

最新推荐文章于 2024-10-08 19:08:47 发布

宠爱Me

最新推荐文章于 2024-10-08 19:08:47 发布

阅读量3.9k

点赞数

分类专栏：技术点总结分享文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/foreverTimeWGY/article/details/126519924

版权

技术点总结分享专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在stryle内部设置样式修改ElMessageBox组件的样式，设置:deep() 以及!important均为生效，我们可以使用他自带的功能设置样式

1、导入引用的组件

import { ElMessageBox, useFocus } from "element-plus";
import { h } from 'vue'

2、使用

ElMessageBox({
                     title: row.tailName,
                     message: h('div', {style: 'height: 22vh;overflow-y: auto;'}, [
                       h('span', null, relationPart.itemContent),
                     ]),
                     showCancelButton: false,
                     showConfirmButton:false,
                   }).then((action) => {
                   })

如上设置了内容的高度和自适应，并且删除了取消按钮和确认按钮。