vue使用element-ui的el-date-picker設(shè)置樣式無(wú)效的解決
一般在vue中設(shè)置css樣式，由于代碼為<style lang=“scss” scoped>，設(shè)置了scoped，所以一般改變element-ui中的樣式都使用::v-deep來(lái)進(jìn)行。但是對(duì)于el-date-picker發(fā)現(xiàn)設(shè)置v-deep并沒(méi)有效果，無(wú)法改變樣式。
這是由于el-date-picker沒(méi)有掛載到當(dāng)前頁(yè)面上，而是直接掛載到了整體的body中，也就是說(shuō)在當(dāng)前加載出來(lái)的頁(yè)面上無(wú)法定位到el-date-picker，所以在當(dāng)前頁(yè)無(wú)法進(jìn)行css樣式設(shè)置。
解決辦法：
設(shè)置全局樣式，在main.js里引入
如圖：
然后我在index.scss里邊設(shè)置了自定義的寬度
然后看看效果，確實(shí)設(shè)置成功了！
到此這篇關(guān)于vue使用element-ui的el-date-picker設(shè)置樣式無(wú)效的解決的文章就介紹到這了,更多相關(guān)el-date-picker 樣式無(wú)效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue.js + Nuxt.js 項(xiàng)目中使用 Vee-validate 表單校驗(yàn)
vee-validate 是為 Vue.js 量身打造的表單校驗(yàn)框架，允許您校驗(yàn)輸入的內(nèi)容并顯示對(duì)應(yīng)的錯(cuò)誤提示信息。這篇文章給大家?guī)?lái)了Vue.js 使用 Vee-validate 實(shí)現(xiàn)表單校驗(yàn)的相關(guān)知識(shí)，感興趣的朋友一起看看吧2019-04-04
本文主要介紹了基于Vue3的全屏拖拽上傳組件，其實(shí)思路上與其他拖拽上傳組件基本一樣,都是指定一個(gè)區(qū)域可拖拽,然后讀取文件在上傳，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-09-09
Vue項(xiàng)目判斷開(kāi)發(fā)、測(cè)試、正式環(huán)境過(guò)程
這篇文章主要介紹了Vue項(xiàng)目判斷開(kāi)發(fā)、測(cè)試、正式環(huán)境過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue+element 解決瀏覽器自動(dòng)填充記住的賬號(hào)密碼問(wèn)題
我們?cè)谧鰂orm表單的時(shí)候,會(huì)發(fā)現(xiàn),瀏覽器會(huì)自動(dòng)的將我們之前保存的密碼,自動(dòng)的填充到表單中input 為 type="password" 的框中，如何實(shí)現(xiàn)此功能呢，下面小編給大家介紹下，感興趣的朋友一起看看吧2019-06-06
vuedraggable+element ui實(shí)現(xiàn)頁(yè)面控件拖拽排序效果
這篇文章主要為大家詳細(xì)介紹了vuedraggable+element ui實(shí)現(xiàn)頁(yè)面控件拖拽排序效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
在vue中我們使用模板HTML語(yǔ)法組建頁(yè)面的，使用render函數(shù)我們可以用js語(yǔ)言來(lái)構(gòu)建DOM，今天小編就通過(guò)本文給大家簡(jiǎn)單介紹下Vue 中 render 函數(shù),需要的朋友可以參考下2020-02-02
vue-cli中實(shí)現(xiàn)響應(yīng)式布局的方法
這篇文章主要介紹了vue-cli中實(shí)現(xiàn)響應(yīng)式布局的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue的.vue文件是怎么run起來(lái)的(vue-loader)
通過(guò)vue-loader，解析.vue文件，在webpack解析，拆解vue組件 ，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下2018-12-12
Vue3.0相比較于之前的版本更快、更小、更易于維護(hù)、更貼近原生、對(duì)開(kāi)發(fā)者更友好，本文就Vue3.0進(jìn)行詳細(xì)介紹，需要了解的小伙伴可以參考一下這篇文章2021-09-09
解決Vue3使用Element-Plus導(dǎo)航刷新后active高亮消失的問(wèn)題
這篇文章主要給大家介紹了如何解決Vue3使用Element-Plus導(dǎo)航刷新后active高亮消失的問(wèn)題,文中有相關(guān)的代碼講解,需要的朋友可以參考下2023-08-08