在一次这样的需求中,需要实现滑倒底部时自动请求数据,需要动态创建节点然后追加到某元素中,这期间遇到的问题就是在动态创建节点后,类名也已经加上了 ,但是样式就是没有生效,最后发现原因的产生竟然是<style scoped></style>中scoped属性
该属性的作用是用来绑定当前样式不被污染,同时也就意味着在创建新的node后,该node样式是进入不到style总查找样式的,bug如下:
新创建的li在插入到节点中时,样式并没有生效。
所以我们解决办法
1.将scoped属性去掉。
优点:方便快捷
缺点:失去了样式的保护,我们就需要用原始的方法保护该组件的样式作用于,可通过后台选择器等等方式实现样式的保护,使其不受污染
2.在动态创建Node时,就将样式类型些微行内样式,卸载style中。这样在dom渲染的时候会伴随着行内样式一起生效
优点:在不影响样式作用于的情况下就可以实现
缺点:违背了结构表现相分离,对于代码的解析速度有很大影响。
bug修复如下:
大家可以了解下vue中的样式穿透,也是解决样式问题的常用方式之一。sass/less使用样式穿透的方式可能回有所不同,
stylus的样式穿透 使用>>>
外层 >>> 第三方组件
样式 .wrapper >>> .swiper-pagination-bullet-active
background: #fff
sass和less的样式穿透 使用/deep/
外层 /deep/ 第三方组件 {
样式
}
.wrapper /deep/ .swiper-pagination-bullet-active{
background: #fff;
}
 需要demo源码的留言哦。

vue样式穿透的更多相关文章

  1. VUE中CSS样式穿透

    VUE中CSS样式穿透 1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将 ...

  2. Vue 中 css scoped 样式穿透 ( stylus[>>>] / sass / less[/deep/] )

    scoped看起来很好用,当时在Vue项目中,当我们引入第三方组件库时(如使用element-ui),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖.这时我们 ...

  3. vue 可复用swiper以及scoped样式穿透(可以不受scoped的限制来修改样式)

    参考: https://blog.csdn.net/dwb123456123456/article/details/82701740https://blog.csdn.net/u014027876/a ...

  4. vue scss 样式穿透

    使用2个style的方式不够优雅,可以使用下面方式做样式穿透 .normal-field /deep/ .el-form-item { margin-bottom: 0px; } .normal-fi ...

  5. vue样式操作与事件绑定

    Vue笔记 1 Vue实例 (VM) var vm = new Vue({    el:'#app', //挂载元素        //数据    data: {        title:'值', ...

  6. Vue 样式绑定 && 条件渲染

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  7. vue scoped 穿透_vue 修改内部组件样式问题

    何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...

  8. vue中的样式穿透

    参考一下的文章即可: https://www.cnblogs.com/karthuslorin/p/9038854.html http://www.php.cn/js-tutorial-399072. ...

  9. vue样式控制的方式

    创建vue对象: 1.样式控制第一种方式: 直接传递一个数组,注意: 这里的 class 需要使用  v-bind 做数据绑定. 2.样式控制第二种方式: 在数组中使用三元表达式 3.样式控制第三种方 ...

随机推荐

  1. intellij 文件太大,无法code assistant

    添加 idea.max.intellisense.filesize=2500 在IDE_HOME\bin\idea.properties https://intellij-support.jetbra ...

  2. windows下,python3安装django和mysql驱动

    1.安装python3和django (1)Python 下载地址:https://www.python.org/downloads/ (2)Django 下载地址:https://www.djang ...

  3. Pandas 数据分析基础

    Pandas 安装 anaconda 安装: conda list pandas 查看是否已经安装 conda install pandas conda update pandas pip 安装 pi ...

  4. Vuex访问状态对象的方法

    除了<Vuex最基本样例>中的方法外,还有两种方法访问状态对象state: 只需要改app.vue文件 方法一:引入computed <template> <div id ...

  5. Kettle 数据抽取

    1.创建数据库连接 2.建立转换 3.指定源数据库和目标数据库的字段映射 一定要在「输出」中勾选「指定字段」,然后点按钮「Get All fields」,再「Enter mapping」,在弹出窗口映 ...

  6. 英语每日阅读---7、VOA慢速英语(翻译+字幕+讲解):卡梅伦呼吁女性移民学英语

    英语每日阅读---7.VOA慢速英语(翻译+字幕+讲解):卡梅伦呼吁女性移民学英语 一.总结 一句话总结: a.learn English or be deported:British Prime M ...

  7. 先安装ubuntu,后安装windows,修复启动grub

    使用easybcd修复未果,直接使用启动盘修复,主要根据这个帖子来的,验证可用 http://blog.csdn.net/kevin6216/article/details/7764292 由于重装w ...

  8. 真正在线编辑的在线web编辑器

    最近正在研究开发一款在线web编辑器架构,这是一款真正傻瓜式的web编辑器,可以在正常浏览页面的情况进行编辑,经过测试,对于一般网页页面来说非常好用方便,操作更简单. 一般的在线web编辑器虽说提供了 ...

  9. IOS-APP主流UI框架结构

    一.简单示例 说明:使用APP主流UI框架结构完成简单的界面搭建 搭建页面效果:                                二.搭建过程和注意点 1.新建一个项目,把原有的控制器删 ...

  10. 5G信令(就是用户身份信息)——手机开机后,先从USIM中读取之前运营商分配的临时身份信息GUTI/TMSI,发送携带该身份信息的信令给基站,请求接入运营商网络。

    5G时代,跟IMSI-CATCHER SAY GOODBYE from:https://unicorn.360.com/blog/2018/04/18/GoodBye_5G_IMSI-Catcher/ ...