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 cli+mui 區(qū)域滾動(dòng)的實(shí)例代碼
下面小編就為大家分享一篇Vue cli+mui 區(qū)域滾動(dòng)的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
本文主要介紹了vue3 ref 和reactive的區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
elementui+vue+axios實(shí)現(xiàn)文件上傳本地服務(wù)器
這篇文章主要為大家詳細(xì)介紹了elementui+vue+axios實(shí)現(xiàn)文件上傳本地服務(wù)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
Vue的子組件props如何設(shè)置多個(gè)校驗(yàn)類型
這篇文章主要介紹了Vue的子組件props如何設(shè)置多個(gè)校驗(yàn)類型問題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
如何用vue2+element-ui實(shí)現(xiàn)多行行內(nèi)表格編輯
最近開發(fā)項(xiàng)目,關(guān)于表格的數(shù)據(jù)操作比較多,這個(gè)地方個(gè)人覺得比較難搞,特此記錄一下,這篇文章主要給大家介紹了關(guān)于如何用vue2+element-ui實(shí)現(xiàn)多行行內(nèi)表格編輯的相關(guān)資料,需要的朋友可以參考下2024-08-08
詳解vuex結(jié)合localstorage動(dòng)態(tài)監(jiān)聽storage的變化
這篇文章主要介紹了詳解vuex結(jié)合localstorage動(dòng)態(tài)監(jiān)聽storage的變化，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
this.$nextTick是在下次dom更新循環(huán)之后執(zhí)行延遲回調(diào),在修改數(shù)據(jù)之后立即使用這個(gè)方法,獲取更新后的dom,下面這篇文章主要給大家介紹了關(guān)于Vue中this.$nextTick()的理解與使用的相關(guān)資料,需要的朋友可以參考下2022-02-02
這篇文章主要為大家詳細(xì)介紹了Vue使用高德地圖實(shí)現(xiàn)城市定位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
如今Vue3的勢(shì)頭正盛，在diff算法方面也做了相應(yīng)的變化，利用到了最長(zhǎng)遞增子序列把性能又提升了一個(gè)檔次。本文就來帶大家簡(jiǎn)單解刨一下Vue3中的diff算法2023-02-02
代替Vue?Cli的全新腳手架工具create?vue示例解析
這篇文章主要為大家介紹了代替Vue?Cli的全新腳手架工具create?vue示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10