vue如何隨心所欲調(diào)整el-dialog中body的樣式
更新時(shí)間：2022年05月27日 17:02:39 作者：小二，來了
這篇文章主要介紹了vue如何隨心所欲調(diào)整el-dialog中body的樣式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue調(diào)整el-dialog中body樣式
<el-dialog
:visible.sync="dialogVisible"
width="30%"
class="dialogClass"http://設(shè)置彈框樣式
:showClose="showClo"
:close-on-click-modal="false"
>
<div slot="title">
<b>系統(tǒng)提示</b>
</div>
<el-row>
<el-col :span="2">
<svg-icon icon-class="warning" style="height:3em;weight:8em" class="iconClass" />
</el-col>
<el-col :span="22" style="padding-top:12px">
<span style="font-size:16px;">
當(dāng)前設(shè)備編碼與設(shè)備型號不符，請檢查！
</span>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button style="margin-left:7%"
type="primary"
plain
@click="dialogVisible = false;"
>確認(rèn)</el-button>
</span>
</el-dialog>
.dialogClass .el-dialog__body {
padding: 20px;
padding-top: 0px;
padding-bottom: 0px;
margin-left: 20px;
color: #606266;
font-size: 14px;
}
.dialogClass .el-dialog__footer {
text-align: right;
}
/*注意此樣式不可以放在scope屬性下面,否則樣式不生效*/
自定義el-dialog的樣式
1、默認(rèn)dialog的樣式
居中對其的狀態(tài)是這樣的
2、項(xiàng)目需求是這樣我們需要自定義的樣式
上下邊框，以及圓角：
3、代碼修改屬性部分
在項(xiàng)目中直接修改不生效，可以加上deep屬性來穿透改變，因?yàn)関ue項(xiàng)目中style樣式中都有scoped的，所以也不會影響其他頁面的內(nèi)容
// 修改彈框邊框圓角
/deep/.el-dialog.el-dialog--center {
border-radius: 8px;
}
// 去掉彈框內(nèi)容的默認(rèn)padding值
/deep/.el-dialog--center .el-dialog__body {
padding: 0px;
text-align: center;
}以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?uni-app框架實(shí)現(xiàn)上拉加載下拉刷新功能
uni-app是一個使用Vue.js(opens?new?window)開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個平臺2022-09-09
vue項(xiàng)目配置同一局域網(wǎng)可使用ip訪問的操作
這篇文章主要介紹了vue項(xiàng)目配置同一局域網(wǎng)可使用ip訪問的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
詳解Unity webgl 嵌入Vue實(shí)現(xiàn)過程
Unity webgl嵌入到前端網(wǎng)頁中,前端通過調(diào)用Unity webgl內(nèi)方法實(shí)現(xiàn)需要展示的功能,前端點(diǎn)擊Unity webgl內(nèi)的交互點(diǎn),Unity webgl返回給前端一些需要的數(shù)據(jù),這篇文章主要介紹了Unity webgl 嵌入Vue實(shí)現(xiàn)過程,需要的朋友可以參考下2024-01-01
vue使用websocket實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)推送功能
這篇文章主要為大家詳細(xì)介紹了vue如何使用websocket實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)推送,發(fā)布訂閱重連單點(diǎn)登錄功能,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
最近在寫vue的一個項(xiàng)目要實(shí)現(xiàn)過渡的效果,雖然vue動畫不是強(qiáng)項(xiàng),庫也多,但是基本的坑還是得踩扎實(shí),下面這篇文章主要給大家介紹了關(guān)于Vue中實(shí)現(xiàn)過渡動畫效果的相關(guān)資料,需要的朋友可以參考下2023-01-01
Vue.js手風(fēng)琴菜單組件開發(fā)實(shí)例
這篇文章主要為大家詳細(xì)介紹了Vue.js手風(fēng)琴菜單組件開發(fā)實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了vue 源碼解析 --虛擬Dom-render的相關(guān)知識，非常不錯，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了基于vue實(shí)現(xiàn)的圓形菜單欄組件，本文通過實(shí)例代碼，圖文詳解的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了Vue中全局限制輸入特殊字符方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
使用Vue開發(fā)自己的Chrome擴(kuò)展程序過程詳解
這篇文章主要介紹了使用Vue開發(fā)自己的Chrome擴(kuò)展程序過程詳解，瀏覽器擴(kuò)展程序是可以修改和增強(qiáng) Web 瀏覽器功能的小程序。它們可用于各種任務(wù)，例如阻止廣告，管理密碼，組織標(biāo)簽，改變網(wǎng)頁的外觀和行為等等。,需要的朋友可以參考下2019-06-06