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

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; }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值