欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element-ui自定義message-box自定義樣式不生效的解決

 更新時間:2022年09月02日 10:40:19   作者:一起蹦極某囖  
這篇文章主要介紹了element-ui自定義message-box自定義樣式不生效的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

element-ui自定義message-box自定義樣式不生效

背景

這是小伙伴今天在開發(fā)中遇到的問題,使用jsx語法自定義一個msgbox,自定義msgbox自然需要自定義樣式,然后就遇到了自定義customClass不生效的問題。

下面上jsx的一個寫法

this.$msgbox({
? ? ? ? title: '確認',
? ? ? ? message: h('div', {
? ? ? ? ? style: 'text-align: center'
? ? ? ? }, [
? ? ? ? ? h('p', { class: 'content-title' }, '請確認是否為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下渲染出來一個class="el-message-box__wrapper"的div。如果你看過源碼就知道,這div根本就不是一個vue組件,只是使用js操作dom 生成的一些節(jié)點元素。所以不具備vue組件的一些特性:如在渲染templage模板時,不會在節(jié)點上添加data-v-xxxxxx 之類的屬性,而scoped 正是運用data-v-xxxxxx屬性找到對應的元素實現(xiàn)局部樣式控制的。所以不生效是必然的。

2、/deep/不生效,deep 不過是css樣式上加上了屬性選擇器[data-v-xxxxxx] 本質(zhì)上還是從vue組件的角度來實現(xiàn)的樣式注入,前面分析過了 message-box 本身就不是一個vue組件,所以也是不能生效的。

解決方法

1、scoped不生效,那么只能將樣式放全局,在當前組件加上一段不帶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修改樣式不生效,最簡單的解決

參考網(wǎng)上的去掉style中的scoped作用域那樣確實生效,但是會影響其他組件的樣式。

我們直接在該類名前添加::v-deep就可以,趕緊去試試看吧,超實用!

?? ?// 在類名前添加 ::v-deep 方法和屬性后的 !important
?? ?::v-deep .el-input__prefix {
? ?? ??? ?left: 71px !important;
? ?? ??? ?transition: all 0.3s;
?? ?}

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • Vue開發(fā)工具之vuejs-devtools安裝教程及常見問題解決(最詳細)

    Vue開發(fā)工具之vuejs-devtools安裝教程及常見問題解決(最詳細)

    這篇文章主要介紹了Vue開發(fā)工具vuejs-devtools超級詳細安裝教程以及常見問題解決本篇文章是最詳細的vue開發(fā)工具vuejs-devtools安裝教程,需要的朋友可以參考下
    2022-11-11
  • Vue3父子通訊方式及Vue3插槽的使用方法詳解

    Vue3父子通訊方式及Vue3插槽的使用方法詳解

    這篇文章主要介紹了Vue3父子通訊方式及Vue3插槽的使用方法詳解,需要的朋友可以參考下
    2023-01-01
  • 詳細聊聊前端如何實現(xiàn)token無感刷新(refresh_token)

    詳細聊聊前端如何實現(xiàn)token無感刷新(refresh_token)

    實現(xiàn)token無感刷新對于前端來說是一項非常常用的技術,其本質(zhì)是為了優(yōu)化用戶體驗,下面這篇文章主要給大家介紹了關于前端如何實現(xiàn)token無感刷新(refresh_token)的相關資料,需要的朋友可以參考下
    2022-11-11
  • 解讀Vue組件注冊方式

    解讀Vue組件注冊方式

    無論是Vue還是React,都有組件的概念。組件,就是能和別人組合在一起的物件。在前端頁面開發(fā)過程中,將一個頁面劃分成一個個小的模塊,每個模塊單獨定義,每個模塊就是一個組件。組件可以進行復用,A頁面和B頁面有一個相似的模塊,可以抽離成一個可局部修改的組件。
    2021-05-05
  • vue?echarts實現(xiàn)改變canvas長和寬自適應

    vue?echarts實現(xiàn)改變canvas長和寬自適應

    這篇文章主要介紹了vue?echarts實現(xiàn)改變canvas長和寬自適應問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 一文搞明白vue開發(fā)者vite多環(huán)境配置

    一文搞明白vue開發(fā)者vite多環(huán)境配置

    Vue是一款流行的JavaScript框架,用于開發(fā)動態(tài)單頁應用程序,本地安裝和環(huán)境配置是學習和使用Vue的第一步,下面這篇文章主要給大家介紹了關于vue開發(fā)者vite多環(huán)境配置的相關資料,需要的朋友可以參考下
    2023-06-06
  • vue+jquery+lodash實現(xiàn)滑動時頂部懸浮固定效果

    vue+jquery+lodash實現(xiàn)滑動時頂部懸浮固定效果

    這篇文章主要為大家詳細介紹了vue+jquery+lodash實現(xiàn)滑動時頂部懸浮固定效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-04-04
  • Vue3 setup語法糖銷毀一個或多個定時器(setTimeout/setInterval)

    Vue3 setup語法糖銷毀一個或多個定時器(setTimeout/setInterval)

    這篇文章主要給大家介紹了關于Vue3 setup語法糖銷毀一個或多個定時器(setTimeout/setInterval)的相關資料,vue是單頁面應用,路由切換后,定時器并不會自動關閉,需要手動清除,當頁面被銷毀時,清除定時器即可,需要的朋友可以參考下
    2023-10-10
  • Vue3中watch監(jiān)聽對象的屬性值(監(jiān)聽源必須是一個getter函數(shù))

    Vue3中watch監(jiān)聽對象的屬性值(監(jiān)聽源必須是一個getter函數(shù))

    這篇文章主要介紹了Vue3中watch監(jiān)聽對象的屬性值,監(jiān)聽源必須是一個getter函數(shù),本文結合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-12-12
  • element table組件內(nèi)容換行的實現(xiàn)方案

    element table組件內(nèi)容換行的實現(xiàn)方案

    這篇文章主要介紹了element table組件內(nèi)容換行的實現(xiàn)方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-12-12

最新評論