.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实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
详解element-ui中表单验证的三种方式
Sep 18 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函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
ptyhon实现sitemap生成示例
2014/03/30 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
200行自定义python异步非阻塞Web框架
2017/03/15 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
播音主持女孩的自我评价分享
2013/11/20 职场文书
《搭石》教学反思
2014/04/07 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
python3中apply函数和lambda函数的使用详解
2022/02/28 Python