.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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
深入理解node.js之path模块
May 03 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
原生js+canvas实现验证码
Nov 29 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 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
php加密解密实用类分享
2014/01/07 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
对python的文件内注释 help注释方法
2018/05/23 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
Python 复平面绘图实例
2019/11/21 Python
keras topN显示,自编写代码案例
2020/07/03 Python
python super()函数的基本使用
2020/09/10 Python
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
机械设计毕业生自荐信
2014/02/02 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
优秀党员事迹材料
2014/12/18 职场文书
消费者理赔投诉书
2015/07/02 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书