本篇内容介绍了“ElementPlusel-message-box样式错位问题如何解决”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！不知道从哪个版本开始发现，element-plus的message-box在有图标的时候，错位比较严重，f12跟官网的样式对比后发现，好家伙！原来position: absolute被覆盖了。错位效果截图Elemen免费云主机域名tPlus官网代码截图本地项目代码截图可以看出在本地中el-message-box__status样式的position并未生效修改css样式完成效果截图1.提供一个函数用来展示消息框，这个函数提供如标题、内容等配置参数2.消息框出现和消失时有动画3.使用 Promise 获取消息框的结果Vue 中动态显示一个组件，无非就是通过 h 函数创建 VNode，并且把这个 VNode 挂载在 DOM 树上。这里有两种挂载的方式：createApp在 main.js 中创建 Vue 实例用的就是这种方法，这也是 Vue3 中代替 Vue2 的 Vue.extend 的方法，简单使用案例如下：h + render和 createApp 方法大同小异可以看到无论是 createApp 方法还是 h 方法，都可以在第二个参数中传入组件的 props，于是我们可以封装一个动态显示组件的函数，这个函数接受组件的 props。但是在封装函数之前，让我们先来实现MessageBox 这个组件直接贴代码，讲下最关键的几点：进入退出动态效果实现设置一个 transition flag，初始时为 false，组件 mounted 后 flag 为 true。全局遮罩层一个 fixed 定位宽高为100%的 div。剩下的主要看 script 部分{{title}}
函数式组件通过组件的 props 传入回调，实现按钮点击事件的传递、MessageBox 关闭时取消挂载的操作。另外可以通过 MessageBox.prompt 等静态方法直接调用对应 type 的 MessageBox，实现方式是在 MessageBox 上挂上对应的静态方法，并且覆盖 options 的 type 选项。“ElementPlusel-message-box样式错位问题如何解决”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注百云主机网站，小编将为大家输出更多高质量的实用文章！
相关推荐: MySQL慢查询中的commit慢和binlog中慢事务有什么区别
这篇文章主要介绍了MySQL慢查询中的commit慢和binlog中慢事务有什么区别的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇MySQL慢查询中的commit慢和binlog中慢事务有什么区别文章都会有所收获，下面我们一起来看…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
