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是無效的。

未完待續

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM