vue中的style使用的几个小技巧

最新推荐文章于 2025-10-05 00:20:52 发布

原创最新推荐文章于 2025-10-05 00:20:52 发布 · 1.3w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #scoped #vue

vue 专栏收录该内容

25 篇文章

订阅专栏

本文探讨了如何使用scoped属性实现样式私有化，确保每个页面的样式独立，避免样式冲突。同时，介绍了在使用如Element.js等框架时，如何通过特定语法重设框架的默认样式，以满足个性化需求。

scoped私有化样式

将当前模块（页面）的样式仅仅运用在当前，有效实现多页面样式隔离，实现各自功能互不干扰。

<style scoped>
.avatar-uploader { height: 100px; }
.el-step.is-simple .el-step__title { font-size: 14px; }
.el-form-item { margin-bottom: 20px; }
.el-input { width: 500px; }
</style>

框架样式重设

使用框架时必然会遇到需要重设框架样式的问题，比如：element.js 框架，使用 >>> 来重设框架样式。

.config { border-left: 0px solid #eee; animation: slideInRight .2s ease; }
.config >>> .el-tabs__item { width: 50%; text-align: center; }
.config >>> .el-tabs__nav { width: 100%; float: none; }
.config >>> .el-tabs__header { margin-bottom: 0; }
.config >>> .el-upload { display: block; }