element-ui自定義message-box自定義樣式不生效的解決
element-ui自定義message-box自定義樣式不生效
背景
這是小伙伴今天在開發(fā)中遇到的問題,使用jsx語法自定義一個(gè)msgbox,自定義msgbox自然需要自定義樣式,然后就遇到了自定義customClass不生效的問題。
下面上jsx的一個(gè)寫法
this.$msgbox({ ? ? ? ? title: '確認(rèn)', ? ? ? ? message: h('div', { ? ? ? ? ? style: 'text-align: center' ? ? ? ? }, [ ? ? ? ? ? h('p', { class: 'content-title' }, '請(qǐng)確認(rèn)是否為XX'), ? ? ? ? ? h('div', { class: 'content-message' }, 'XXXXXX'), ? ? ? ? ? h('div', { class: 'content-message' }, 'XXXXXXXXXXXXXXXXXXXXXXXXX') ? ? ? ? ]), ? ? ? ? customClass: 'return-visit-message-box', ? ? ? ? showCancelButton: true, ? ? ? ? confirmButtonText: '是', ? ? ? ? cancelButtonText: '否', ? ? ? }).then(() => { ? ? ? ? this.checkPrescriptionType() ? ? ? }).catch(() => { ? ? ? ? this.$message.info('XXXXXXXXXXXXXX') ? ? ? })
先分析下不生效的原因
1、this.$msgbox($alert等等),是通過element-ui的方法在body下渲染出來一個(gè)class="el-message-box__wrapper"的div。如果你看過源碼就知道,這div根本就不是一個(gè)vue組件,只是使用js操作dom 生成的一些節(jié)點(diǎn)元素。所以不具備vue組件的一些特性:如在渲染templage模板時(shí),不會(huì)在節(jié)點(diǎn)上添加data-v-xxxxxx 之類的屬性,而scoped 正是運(yùn)用data-v-xxxxxx屬性找到對(duì)應(yīng)的元素實(shí)現(xiàn)局部樣式控制的。所以不生效是必然的。
2、/deep/不生效,deep 不過是css樣式上加上了屬性選擇器[data-v-xxxxxx] 本質(zhì)上還是從vue組件的角度來實(shí)現(xiàn)的樣式注入,前面分析過了 message-box 本身就不是一個(gè)vue組件,所以也是不能生效的。
解決方法
1、scoped不生效,那么只能將樣式放全局,在當(dāng)前組件加上一段不帶scoped的style,或者放到全局樣式表中。
<style> .el-message-box.return-visit-message-box { ? width: 355px; ? padding-bottom: 0; ? .el-message-box__header { ? ? display: flex; ? ? justify-content: space-between; ? ? align-items: center; ? ? padding-top: 10px; ? ? background: rgba(241,243,245,1); ? ? .el-message-box__title { ? ? ? font-size:16px; ? ? ? font-weight:500; ? ? ? color:rgba(51,51,51,1); ? ? } ? ? .el-message-box__headerbtn { ? ? ? position: unset; ? ? } ? } ? .el-message-box__content { ? ? padding-top: 20px; ? ? .content-title { ? ? ? font-size:16px; ? ? ? font-weight:500; ? ? ? color:rgba(51,51,51,1); ? ? ? line-height:22px; ? ? ? margin-bottom: 16px; ? ? } ? ? .content-message { ? ? ? font-size: 12px; ? ? ? font-weight: 400; ? ? ? color: #666666; ? ? ? line-height: 17px; ? ? } ? } ? .el-message-box__btns { ? ? padding: 20px 20px 20px; ? ? .el-button { ? ? ? padding: 9px 27px; ? ? } ? } } </style>
element-ui修改樣式不生效,最簡(jiǎn)單的解決
參考網(wǎng)上的去掉style中的scoped作用域那樣確實(shí)生效,但是會(huì)影響其他組件的樣式。
我們直接在該類名前添加::v-deep就可以,趕緊去試試看吧,超實(shí)用!
?? ?// 在類名前添加 ::v-deep 方法和屬性后的 !important ?? ?::v-deep .el-input__prefix { ? ?? ??? ?left: 71px !important; ? ?? ??? ?transition: all 0.3s; ?? ?}
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue開發(fā)工具之vuejs-devtools安裝教程及常見問題解決(最詳細(xì))
這篇文章主要介紹了Vue開發(fā)工具vuejs-devtools超級(jí)詳細(xì)安裝教程以及常見問題解決本篇文章是最詳細(xì)的vue開發(fā)工具vuejs-devtools安裝教程,需要的朋友可以參考下2022-11-11詳細(xì)聊聊前端如何實(shí)現(xiàn)token無感刷新(refresh_token)
實(shí)現(xiàn)token無感刷新對(duì)于前端來說是一項(xiàng)非常常用的技術(shù),其本質(zhì)是為了優(yōu)化用戶體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于前端如何實(shí)現(xiàn)token無感刷新(refresh_token)的相關(guān)資料,需要的朋友可以參考下2022-11-11vue?echarts實(shí)現(xiàn)改變canvas長和寬自適應(yīng)
這篇文章主要介紹了vue?echarts實(shí)現(xiàn)改變canvas長和寬自適應(yīng)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04一文搞明白vue開發(fā)者vite多環(huán)境配置
Vue是一款流行的JavaScript框架,用于開發(fā)動(dòng)態(tài)單頁應(yīng)用程序,本地安裝和環(huán)境配置是學(xué)習(xí)和使用Vue的第一步,下面這篇文章主要給大家介紹了關(guān)于vue開發(fā)者vite多環(huán)境配置的相關(guān)資料,需要的朋友可以參考下2023-06-06vue+jquery+lodash實(shí)現(xiàn)滑動(dòng)時(shí)頂部懸浮固定效果
這篇文章主要為大家詳細(xì)介紹了vue+jquery+lodash實(shí)現(xiàn)滑動(dòng)時(shí)頂部懸浮固定效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-04-04Vue3 setup語法糖銷毀一個(gè)或多個(gè)定時(shí)器(setTimeout/setInterval)
這篇文章主要給大家介紹了關(guān)于Vue3 setup語法糖銷毀一個(gè)或多個(gè)定時(shí)器(setTimeout/setInterval)的相關(guān)資料,vue是單頁面應(yīng)用,路由切換后,定時(shí)器并不會(huì)自動(dòng)關(guān)閉,需要手動(dòng)清除,當(dāng)頁面被銷毀時(shí),清除定時(shí)器即可,需要的朋友可以參考下2023-10-10Vue3中watch監(jiān)聽對(duì)象的屬性值(監(jiān)聽源必須是一個(gè)getter函數(shù))
這篇文章主要介紹了Vue3中watch監(jiān)聽對(duì)象的屬性值,監(jiān)聽源必須是一個(gè)getter函數(shù),本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12element table組件內(nèi)容換行的實(shí)現(xiàn)方案
這篇文章主要介紹了element table組件內(nèi)容換行的實(shí)現(xiàn)方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12