卫计局网站建设工作总结,国内重要新闻,wordpress 短代码按钮,哈尔滨建设网站的免费咨询文章目录 目标修改样式动态添加/删除样式样式不生效 注意#xff1a;类似效果el-step也可以实现#xff0c;可以不用手动实现。这里只是练习。 目标
使用组件库中的组件#xff0c;修改它的样式并动态添加/删除样式。 修改样式
组件中的一些类可能添加样式无法生效。如Ele… 文章目录 目标修改样式动态添加/删除样式样式不生效 注意类似效果el-step也可以实现可以不用手动实现。这里只是练习。 目标
使用组件库中的组件修改它的样式并动态添加/删除样式。 修改样式
组件中的一些类可能添加样式无法生效。如Element Plus中的Timeline 时间线 | Element Plus (element-plus.org)。
假设想修改两个圆之间的线的长度由于组件没有暴露相关的类名我们需要自己修改它。浏览器F12可知它的类名为.el-timeline-item__tail直接写样式无法生效
.el-timeline-item__tail{
}用:deep进行样式穿透可以生效注意deep与后面的括号不能有空格
:deep(.el-timeline-item__tail){
}动态添加/删除样式
动态添加/删除样式需要操作DOM这里要使用ref。由于这里使用的是组合式API没有this获取ref的方法是
div reftimelineRefel-timeline.../el-timeline
/divconst timelineRef ref()结合timeline
const timeline timelineRef.value.children[0]
const timelineItem timeline.getElementsByClassName(el-timeline-item)其中每个li代表item包含节点node圆圈下面的竖线tail。最后一个节点下面的tail不显示。 设置样式在active是变为蓝色如
.active_node{background-color:blue;
}那么在比如触发到这一步是就给此节点添加类active_node。
timelineItem[0].children[0].classList.add(active_node)动态移除类
timelineItem[0].children[0].classList.remove(active_node)需要注意的是
F12看样式源代码节点node颜色是background-color线tail颜色是border的颜色由上面截图可知children[0]表示tailchildren[1]为node
样式不生效
动态添加完类后发现样式不生效。可以确认类是已经添加了的。原因vue 中 通过js插入的dom 无法生效css_vue通过方法里拼接的dom自定义组件无法识别-CSDN博客 这是因为vue文件中的style标签添加了scoped而scoped的作用是为了保证css样式只对当前vue文件(组件)生效但是由于其他vue文件(组件)中也有可能会出现相同的class名相同的css样式于是vue就采用了添加随机后缀的方式防止class名重复的样式出现样式覆盖的情况。 解决方法
style langscss
// 这里是动态添加的样式类
/stylestyle scoped langscss
// 这里是其他样式类
/style最终效果
