vue使用scoped 实现样式只在当前界面生效,解决样式污染的问题

教程大全  / 倒序浏览   ©

#楼主# 2020-2-18

跳转到指定楼层

马上注册,分享更多源码,享用更多功能,让你轻松玩转云大陆。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

vue开发中经常会用到这种情况:
A页面有类选择器[ DISCUZ_CODE_0 ],B界面也设置了[ DISCUZ_CODE_1 ],注意到没有,这两个类选择器名字一模一样。
当A界面push到B界面的时候,查看B界面的元素,会有一个特别奇怪的征象:你会发现A界面的样式也会应用到B界面上。只是会由于权重的关系,两个[ DISCUZ_CODE_2 ]中 重叠的样式,权重高的会生效。两个[ DISCUZ_CODE_3 ]中不重叠的样式,都会生效。

对以上问题详细举个例子,例如:

  • A界面的类选择器
[	DISCUZ_CODE_4	]
  • B界面的类选择器
[	DISCUZ_CODE_5	]

那么最终B界面name_box的样式为,字号18px背景颜色为蓝色。但是我们明明只是想设置背景颜色为蓝色,不要设置字号。


管理办法1:

A和B类选择器名字不要一样。

管理办法2:使用scoped实现,样式只在当前界面生效,管理以上样式污染的问题

以B界面为例

[	DISCUZ_CODE_6	]
总结:对比两个管理办法,固然是使用scoped修饰style来管理以上问题是最公道的。因为你不用再顾虑写一个类选择器的时候,想想其余页面是否也有该类选择器,类选择器一样的话会冲突的问题了。
分享淘帖
回复

使用道具

您的回复是对作者最大的奖励

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于作者

红星酒斩

新手猿

  • 主题

    9

  • 帖子

    9

  • 关注者

    0

Archiver|手机版|小黑屋|云大陆 | 赣ICP备18008958号-4|网站地图
Powered by vrarz.com!  © 2019-2020版权所有云大陆