zoukankan      html  css  js  c++  java
  • uniapp引用组件rate评分无法点击引起对style scoped学习

      uniapp开发过程中,我引入了rate组件,但是引用之后发现评分根本无法点击,无论是小程序端还是APP短,仅在H5下正常;然后看了下,官方提供的示例中是nvue后缀文件,nvue和vue还是有些差别的,感兴趣的自行百度吧,后面我可能补充这一块的知识点;这里如果把引用的组件改为nvue,评分效果也能出来,但是我原页面其他样式全部乱了,无法接收。

      后面想了想,再style上加了个scoped,结果页面正常了,可以正常点击评分了。

      但是解决到这里,还是没太明白原理,我将整个官网整个的rate.nvue拷贝到temp.vue中,也是可以正常点击的,而且style也没有增加scoped标识,这是啥原因呢?这里简单介绍下scoped的作用:

    vue组件中,在style标签上添加scoped属性,以表示它的样式作用于当下的模块,实现了样式私有化的目的;从页面效果来看,就是给DOM节点加一个不重复data属性(形如:data-v-2311c06a)来表示他的唯一性

    在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如[data-v-2311c06a])来私有化样式,所以我们开发过程中看到过很多样式后面有一串编码,这就是代表已经私有化了,一般情况下样式很难修改,直接修改class是无效的。

    未完待续

  • 相关阅读:
    模板模式创建一个poi导出功能
    vim python和golang开发环境配置
    vim快捷键
    golang聊天室
    goroutine与channels
    Redis中的GETBIT和SETBIT(转载)
    二叉树
    满二叉树与完全二叉树
    拓扑排序
    ZigZag Conversion
  • 原文地址:https://www.cnblogs.com/wanggang2016/p/12713892.html
Copyright © 2011-2022 走看看