.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 相关文章推荐
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
javascript兼容性(实例讲解)
Aug 15 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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
php检测useragent版本示例
2014/03/24 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
浅谈javascript 函数内部属性
2015/01/21 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
python 多进程通信模块的简单实现
2014/02/20 Python
让 python 命令行也可以自动补全
2014/11/30 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Python数组定义方法
2016/04/13 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Python中防止sql注入的方法详解
2017/02/25 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
详解Python sys.argv使用方法
2019/05/10 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
如何利用python生成MD5并去重
2020/12/07 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
安全生产承诺书
2014/03/26 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
新人入职感言
2015/07/31 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
Nginx下配置Https证书详细过程
2021/04/01 Servers
简单谈谈Python面向对象的相关知识
2021/06/28 Python
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python