Vue自定义全局消息框组件解决px与rem适配问题

"本文主要介绍了在Vue项目中解决自定义全局消息框组件与rem布局兼容问题的方法。在采用rem布局时，由于第三方UI组件通常使用px单位，可能会导致样式显示异常。作者通过分析问题，发现是组件内的图标继承了html的font-size导致问题。文章提出了两种解决方案，并详细介绍了如何自定义全局消息组件。" 在开发移动端应用时，适配不同屏幕尺寸是必不可少的一环。`rem`布局是一种常见的解决方案，通过设置html元素的`font-size`来调整所有子元素的相对大小。在这个案例中，开发者使用1rem等于100px的标准，但在引入第三方UI组件时遇到了问题，因为这些组件的样式通常是基于px单位定义的。这导致了原本应为细长形状的提示语句在使用rem布局后变得过大。 针对这个问题，一种解决方法是利用`px2rem-loader`这个Webpack插件。它可以自动将CSS中的px单位转换为rem，使得第三方组件能够适应rem布局。然而，如果只是个别组件受到影响，开发者可能不愿意引入额外的工具，因此选择了更直接的方案。 开发者选择自定义一个全局消息组件来解决这个问题。首先创建了一个名为`Message.vue`的文件，包含模板、数据和方法。模板部分使用了Vue的过渡效果`<transition>`来实现动画，以及一个可关闭按钮，允许用户关闭消息框。组件的数据包括内容`content`、显示时间`time`、是否可见`visible`以及消息类型`type`。类名动态绑定，根据消息类型添加相应的图标。在消息框内，图标是通过图标字体实现的，类名由`type`动态生成。 通过这种方式，开发者成功地创建了一个符合设计稿要求的全局消息组件，同时避免了第三方组件与rem布局的冲突。这个自定义组件可以方便地在整个应用中复用，提供一致的用户体验，并且可以轻松地根据需要进行样式调整或功能扩展。