电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

解決vue scoped html樣式無效的問題

瀏覽:4日期:2022-11-12 14:52:27

1、問題場景

page1,page2都使用flexible移動端自適應的時候,有一個頁面page2需要手動設置rem基準值,

//手動設置基準html{ font-size: 120px !important;}

但是在page2引用的self.less里面設置了基準,竟然沒有生效

2、問題分析scoped屬性

在引用self.less的時候,使用了屬性scoped

解決vue scoped html樣式無效的問題

vue中引入了scoped這個概念,設計思想就是讓當前組件的樣式不會修改到其他頁面的樣式,使用了data-v-hash的方式來使css有了他對應的模塊的標識,通俗來說就是使用了scoped屬性,template里面的html都會多一個data-v-hash的屬性,css 選擇器會根據data-v-hash來進行選擇,當前的css文件只會對當前的頁面生效。參考下圖

解決vue scoped html樣式無效的問題

那么問題來了,scoped只對當前組件里面的內容生效,會對組件里面的dom加data-v-hash屬性,而不會對html,body等組件之外的dom添加,但是css里面的屬性選擇器都是data-v-hash屬性的,參考下圖,橢圓形里面是組件之外的,沒有data-v-hash屬性,所以加了scoped屬性的css會對組件外無效。長方形里面的dom是組件里面的,data-v-hash跟css里面的data-v-hash是一致的會生效。

解決vue scoped html樣式無效的問題

雖然css里面的body選擇器也添加了data-v-hash,但是頁面dom沒有data-v-hash屬性,所以css里面設置的body樣式無效。

解決vue scoped html樣式無效的問題

3、解決辦法

針對必須設置屬性scoped的組件,可以在page2.vue里面再單獨寫一個style,在頁面里面單獨寫組件之外(html,body等)的樣式,因為scoped不會對組件之外的dom增加data-v-hash屬性

解決vue scoped html樣式無效的問題

但是新問題來了,page2設置以后,影響了page1頁面的布局,page1頁面html的的font-size樣式依然是120px,

當然會影響啊,page2也引用了page1的樣式啊,但是page2設置了scoped,所以只有page2的html樣式會影響page1,

解決辦法就是再vue什么周期create里面,用js給html設置font-size

4、總結

遇到了這問題,終于搞明白了scoped染渲染規則,在添加了scoped屬性的組件

給組件(template)里面的dom節點,加了一共不重復屬性的data-v-hash,來標志唯一性

給組件里面引用的的樣式文件,在每個選擇器后面添加了一個等同于dom節點一樣的data-v-hash字段,實現類似于作用域的問題,不影響全局

如果組件里面還有組件,只會給最外層的組件里面dom,添加data-v-hash,不會影響組件內部引用的組件

補充知識:vue中scoped慎用

scoped表示當前style屬性只屬于當前模塊

實現原理:

vue通過在DOM結構以及css樣式上加上唯一的標記 data-v-469af010,保證唯一,

問題:

1.父組件無scoped屬性,子組件帶有scoped,父組件是無法操作子組件的樣式的(原因在原理中可知),雖然我們可以在全局中通過該類標簽的標簽選擇器設置樣式,但會影響到其他組件

2.父組件有scoped屬性,子組件無,父組件也無法設置子組件樣式,因為父組件的所有標簽都會帶有data-v-469af010唯一標志,但子組件不會帶有這個唯一標志屬性,與1同理,雖然我們可以在全局中通過該類標簽的標簽選擇器設置樣式,但會影響到其他組件

3.父子組建都有,同理也無法設置樣式,更改起來增加代碼量

因此如果組件內部還有組件,只會給最外層的組件里的標簽加上唯一屬性字段,不影響組件內部引用的組件( 注意 )

方案:

1.混合使用全局屬性和局部屬性

<style>/* global styles */</style><style scoped>/* local styles */</style>

2.深選擇器

<template> <div id='app'> <gHeader></gHeader> </div></template><style lang='css' scoped> .gHeader /deep/ .name{ //第一種寫法 color:red; } .gHeader >>> .name{ //二種寫法 color:red; }</style>

以上這篇解決vue scoped html樣式無效的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 净化车间_洁净厂房_净化公司_净化厂房_无尘室工程_洁净工程装修|改造|施工-深圳净化公司 | 神超官网_焊接圆锯片_高速钢锯片_硬质合金锯片_浙江神超锯业制造有限公司 | 蓝莓施肥机,智能施肥机,自动施肥机,水肥一体化项目,水肥一体机厂家,小型施肥机,圣大节水,滴灌施工方案,山东圣大节水科技有限公司官网17864474793 | BESWICK球阀,BESWICK接头,BURKERT膜片阀,美国SEL继电器-东莞市广联自动化科技有限公司 | 沙盘模型公司_沙盘模型制作公司_建筑模型公司_工业机械模型制作厂家 | 宝鸡市人民医院 | 承插管件_不锈钢承插管件_锻钢高压管件-温州科正阀门管件有限公司 | 广州小程序开发_APP开发公司_分销商城系统定制_小跑科技 | 珠海白蚁防治_珠海灭鼠_珠海杀虫灭鼠_珠海灭蟑螂_珠海酒店消杀_珠海工厂杀虫灭鼠_立净虫控防治服务有限公司 | 水性漆|墙面漆|木器家具漆|水漆涂料_晨阳水漆官网 | 杰恒蠕动泵-蠕动泵专业厂家-19年专注蠕动泵 | 大米加工设备|大米加工机械|碾米成套设备|大米加工成套设备-河南成立粮油机械有限公司 | 污泥烘干机-低温干化机-工业污泥烘干设备厂家-焦作市真节能环保设备科技有限公司 | 环讯传媒,永康网络公司,永康网站建设,永康小程序开发制作,永康网站制作,武义网页设计,金华地区网站SEO优化推广 - 永康市环讯电子商务有限公司 | 浙江美尔凯特智能厨卫股份有限公司 | 超声波气象站_防爆气象站_空气质量监测站_负氧离子检测仪-风途物联网 | 骁龙云呼电销防封号系统-axb电销平台-外呼稳定『免费试用』 | 隐形纱窗|防护纱窗|金刚网防盗纱窗|韦柏纱窗|上海青木装潢制品有限公司|纱窗国标起草单位 | 合肥汽车充电桩_安徽充电桩_电动交流充电桩厂家_安徽科帝新能源科技有限公司 | 杭州网络公司_百度SEO优化-外贸网络推广_抖音小程序开发-杭州乐软科技有限公司 | 隔爆型防爆端子分线箱_防爆空气开关箱|依客思 | 欧必特空气能-商用空气能热水工程,空气能热水器,超低温空气源热泵生产厂家-湖南欧必特空气能公司 | lcd条形屏-液晶长条屏-户外广告屏-条形智能显示屏-深圳市条形智能电子有限公司 | 硫酸钡厂家_高光沉淀硫酸钡价格-河南钡丰化工有限公司 | 广东恩亿梯电源有限公司【官网】_UPS不间断电源|EPS应急电源|模块化机房|电动汽车充电桩_UPS电源厂家(恩亿梯UPS电源,UPS不间断电源,不间断电源UPS) | 乐泰胶水_loctite_乐泰胶_汉高乐泰授权(中国)总代理-鑫华良供应链 | atcc网站,sigma试剂价格,肿瘤细胞现货,人结肠癌细胞株购买-南京科佰生物 | 雨燕360体育免费直播_雨燕360免费NBA直播_NBA篮球高清直播无插件-雨燕360体育直播 | 选宝石船-陆地水上开采「精选」色选机械设备-青州冠诚重工机械有限公司 | 邢台人才网_邢台招聘网_邢台123招聘【智达人才网】 | 高扬程排污泵_隔膜泵_磁力泵_节能自吸离心水泵厂家-【上海博洋】 | 阁楼货架_阁楼平台_仓库仓储设备_重型货架_广州金铁牛货架厂 | 外贮压-柜式-悬挂式-七氟丙烷-灭火器-灭火系统-药剂-价格-厂家-IG541-混合气体-贮压-非贮压-超细干粉-自动-灭火装置-气体灭火设备-探火管灭火厂家-东莞汇建消防科技有限公司 | 政府园区专业委托招商平台_助力企业选址项目快速落地_东方龙商务集团 | 注塑_注塑加工_注塑模具_塑胶模具_注塑加工厂家_深圳环科 | 语料库-提供经典范文,文案句子,常用文书,您的写作得力助手 | 南京泽朗生物科技有限公司-液体饮料代加工_果汁饮料代加工_固体饮料代加工 | 吲哚菁绿衍生物-酶底物法大肠菌群检测试剂-北京和信同通科技发展有限公司 | 天津试验仪器-电液伺服万能材料试验机,恒温恒湿标准养护箱,水泥恒应力压力试验机-天津鑫高伟业科技有限公司 | 天津中都白癜风医院_天津白癜风医院_天津治疗白癜风 | 塑料异型材_PVC异型材_封边条生产厂家_PC灯罩_防撞扶手_医院扶手价格_东莞市怡美塑胶制品有限公司 |