.vue文件 加scoped 样式不起作用的解决方法


Posted in Javascript onMay 28, 2018

浅谈关于.vue文件中的style的scoped属性

注意:scoped作用:使得.vue中的样式不影响其他.vue组件样式,而不是scoped使得.vue组件样式不受外样式影响。

1、在vue组件中,为了使样式私有化(模块化),不对全局造成污染,在style标签上添加scoped属性,以表示它只属于当下的模块。但是要慎用,因为在我们需要修改公共组件(第三方库或者项目中定制的组件)的样式的时候,scoped会造成很多困难,组要增加额外的复杂度。

一、创建公共组件button:

//button.vue
<template>
 <div class="button-warp">
  <button class="button">text</button>
 </div>
</template>
...
<style scoped>
 .button-warp{
  display:inline-block;
 }
 .button{
  padding: 5px 10px;
  font-size: 12px;
  border-radus: 2px;
 }
</style>

浏览器渲染后的button组件为:

<div data-v-2311c06a class="button-warp">
 <button data-v-2311c06a class="button">text</button>
</div>
.button-warp[data-v-2311c06a]{
 display:inline-block;
}
.button[data-v-2311c06a]{
 padding: 5px 10px;
 font-size: 12px;
 border-radus: 2px;
}

从上面的结果可以看出,添加了scoped属性的组件,做了如下操作:

(1)、给HTML的DOM节点增加一个不重复的data属性。(如:data-v-2311c06a)
(2)、在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(如:data-v-2311c06a)来私有化样式。

二、在 " 不使用 " scoped的组件中引用button组件:

//content.vue
<template>
 <div class="content">
  <p class="title"></p>
  <!-- v-button假设是上面定义的公共组件 -->
  <v-button></v-button>
 </div>
</template>
...
<style>
 .content{
  width: 1200px;
  margin: 0 auto;
 }
 .content .button{
  border-raduis: 5px;
 }
</style>

浏览器渲染出来的结果是:

<div class="content">
 <p class="title"></p>
 <!-- v-button假设是上面定义的组件 -->
 <div data-v-2311c06a class="button-warp">
  <button data-v-2311c06a class="button">text</button>
 </div>
</div>
/*button.vue渲染出来的css*/
.button-warp[data-v-2311c06a]{
 display:inline-block;
}
.button[data-v-2311c06a]{
 padding: 5px 10px;
 font-size: 12px;
 border-radus: 2px;
}
/*content.vue渲染出来的css*/
.content{
 width: 1200px;
 margin: 0 auto;
}
.content .button{
 border-raduis: 5px;
}

虽然,在content组件中修改了button的border-radius属性,但是由于权重关系,生效的依然是组件内部的样式(即.button[data-v-2311c06a]定义的样式), 如果此时仍需修改样式,则鼻血加重我们需要修改的样式的权重。

三、在 " 使用 " scoped的组件中引用button组件:

//content.vue
<template>
 <div class="content">
  <p class="title"></p>
  <!-- v-button假设是上面定义的公共组件 -->
  <v-button></v-button>
 </div>
</template>
...
<style scoped>
 .content{
  width: 1200px;
  margin: 0 auto;
 }
 .content .button{
  border-raduis: 5px;
 }
</style>

浏览器渲染的结果是:

<div data-v-57bc25a0 class="content">
 <p data-v-57bc25a0 class="title"></p>
 <!-- v-button假设是上面定义的组件 -->
 <div data-v-57bc25a0 data-v-2311c06a class="button-warp">
  <button data-v-2311c06a class="button">text</button>
 </div>
</div>
/*button.vue渲染出来的css*/
.button-warp[data-v-2311c06a]{
 display:inline-block;
}
.button[data-v-2311c06a]{
 padding: 5px 10px;
 font-size: 12px;
 border-radus: 2px;
}
/*content.vue渲染出来的css*/
.content[data-v-57bc25a0]{
 width: 1200px;
 margin: 0 auto;
}
.content .button[data-v-57bc25a0]{
 border-raduis: 5px;
}

虽然,我们在content添加了scoped属性,但是.content .button 这句末尾添加的是content的scoped标记,最后我们实际上是找不到向对应的DOM节点的,也就不起作用啦。

解决办法:

在content.vue文件中添加两个style样式:

//content.vue
<template>
 <div class="content">
  <p class="title"></p>
  <!-- v-button假设是上面定义的组件 -->
  <v-button></v-button>
 </div>
</template>
...
<style scoped>
 //针对content组件内部的样式
 .content{
  width: 1200px;
  margin: 0 auto;
 }
</style>
<style>
  //针对公共组件的样式
 .content .button{
  border-raduis: 5px !important;
 }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
javascript事件问题
Sep 05 Javascript
用js实现的自定义的对话框的实现代码
Mar 21 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
深入理解js数组的sort排序
May 28 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
vue-router项目实战总结篇
Feb 11 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
微信小程序实现上传图片功能
May 28 #Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 #Javascript
vue-cli构建项目下使用微信分享功能
May 28 #Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 #Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 #Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 #jQuery
JavaScript继承定义与用法实践分析
May 28 #Javascript
You might like
一个ftp类(ini.php)
2006/10/09 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
Python中用于返回绝对值的abs()方法
2015/05/14 Python
Python分治法定义与应用实例详解
2017/07/28 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
Python实现的简单计算器功能详解
2018/08/25 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
Python日志处理模块logging用法解析
2020/05/19 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
文秘专业大学生求职信
2013/11/10 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
求职教师自荐书
2014/06/19 职场文书
2015初中团委工作总结
2015/07/28 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS