vue使用原生js创建元素样式不生效问题及解决

 更新时间:2023年06月02日 10:34:27   作者:大白菜飞船  
这篇文章主要介绍了vue使用原生js创建元素样式不生效问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue使用原生js创建元素样式不生效

在Vue项目中也会遇到需要动态创建DOM的情况,但是采用指定className的方式给创建的DOM元素指定样式不起作用,在调试界面能看到类名被解析,但是样式未加载

三天里尝试了N种方法,终于填了这个大坑,有需要的可以参考一下:

measureTooltipElement = document.createElement('div')
measureTooltipElement.className = "ol-tooltip ol-tooltip-measure"

样式:

.ol-tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 14px 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
  font-size: 12px;
}
.ol-tooltip-measure {
  opacity: 1;
  font-weight: bold;
}

但是在页面渲染时却不生效:

参考了网上众多方法,有以下几种可能:

1.Vue组件中样式Style中scoped导致样式局部生效,因为采用scoped每个类渲染后会有一个单独的data-v-xxxx编码格式,防止样式污染,去除即可。(这里测试无效)

2.使用样式穿透,跳过scoped,这样就不用去除scoped造成全局样式污染。Vue2使用/deep/ className,Vue3使用:deep(className),此外还有>>>(可以尝试一下,我这里没有效果)。

// Vue3
:deep(.ol-tooltip) {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 14px 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
  font-size: 12px;
}
:deep(.ol-tooltip-measure) {
  opacity: 1;
  font-weight: bold;
}
// Vue2
/deep/ .ol-tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 14px 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
  font-size: 12px;
}
/deep/ .ol-tooltip-measure {
  opacity: 1;
  font-weight: bold;
}

3.可能是类的优先级,在子类前加上父类,这里时动态创建的类,所以使用了也没效果。

4.我解决的办法:重新创建一个CSS/SCSS样式文件,然后在Vue组件中引用该文件即可,将不生效的样式都放在该样式文件中,不需要再去除scoped和deep。

vue中创建的dom样式失效

原因:less,sass,scss 设置了scoped

关闭scoped即可解决

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • VUE常见知识疑点问题总结

    VUE常见知识疑点问题总结

    这篇文章主要介绍了VUE常见知识疑点问题总结,详细介绍了vue.js @click和v-on:click有什么区别,v-on和v-bind的区别,通过本文可以认识Vue的export、export default、import的详细介绍,感兴趣的朋友一起看看吧
    2024-02-02
  • Vue3项目中使用自适应Rem示例

    Vue3项目中使用自适应Rem示例

    这篇文章主要为大家介绍了Vue3项目中使用自适应Rem示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 解决vuejs 使用value in list 循环遍历数组出现警告的问题

    解决vuejs 使用value in list 循环遍历数组出现警告的问题

    今天小编就为大家分享一篇解决vuejs 使用value in list 循环遍历数组出现警告的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 一文详解Pinia和Vuex与两个Vue状态管理模式

    一文详解Pinia和Vuex与两个Vue状态管理模式

    这篇文章主要介绍了一文详解Pinia和Vuex与两个Vue状态管理模式,Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia
    2022-08-08
  • vue+freemarker中遇到的坑及解决

    vue+freemarker中遇到的坑及解决

    这篇文章主要介绍了vue+freemarker中遇到的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)

    VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)

    使用uniapp开发微信小程序时,多多少少会遇到获取当前位置的详细信息,下面这篇文章主要给大家介绍了关于VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)的相关资料,需要的朋友可以参考下
    2023-04-04
  • vue单页应用加百度统计代码(亲测有效)

    vue单页应用加百度统计代码(亲测有效)

    这篇文章主要介绍了vue单页应用加百度统计代码的解决方法,需要的朋友参考下吧
    2018-01-01
  • vue异步组件使用及加载失败异常处理

    vue异步组件使用及加载失败异常处理

    在构建大型单页应用时,组件的按需加载和延迟加载对于性能优化至关重要,本文主要介绍了vue异步组件使用及加载失败异常处理,具有一定的参考价值,感兴趣的可以了解一下
    2024-02-02
  • vue3中el-table实现多表头并表格合并行或列代码示例

    vue3中el-table实现多表头并表格合并行或列代码示例

    这篇文章主要给大家介绍了关于vue3中el-table实现多表头并表格合并行或列的相关资料,文中通过代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-02-02
  • Vue中watch的多种使用方法小结

    Vue中watch的多种使用方法小结

    Vue的watch选项提供了多种方法来观测数据属性的变化,让我们能够编写更加优雅和维护性更高的代码,本文给大家介绍Vue中watch的多种使用方法小结,感兴趣的朋友一起看看吧
    2023-10-10

最新评论