el-dialog固定頭部與底部以及中間內(nèi)容滑動
更新時(shí)間：2026年03月26日 10:47:53 作者：許多寶滴IT
這篇文章主要介紹了el-dialog固定頭部與底部以及中間內(nèi)容滑動實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
問題描述
如果不優(yōu)化樣式，會出現(xiàn)滑動占屏超出100%，不放便操作。
html和css優(yōu)化代碼：
<style lang="less" scoped>
::v-deep.home-confirm-dialog .el-dialog__body{
max-height: calc(100vh - 150px);
overflow: auto;
border-top:1px solid #dfdfdf;
border-bottom:1px solid #dfdfdf;
}
::v-deep .el-dialog{
position: fixed;
height:fit-content;
left:0 !important;
right:0 !important;
top:0 !important;
bottom:0 !important;
margin:auto !important;
}
</style><template>
<el-dialog
v-loading="loadingDialog"
:title="readonly ? '查看固定周期' : '固定周期設(shè)置'"
:visible.sync="add_show"
width="50%"
class="home-confirm-dialog"
top="2vh"
:close-on-click-modal="false"
element-loading-text="拼命發(fā)布中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.3)"
>
內(nèi)容自已補(bǔ)充，不管多高，頭部與底部會固定的
<div slot="footer" class="dialog-footer content_center">
<el-button v-if="!readonly" type="primary" @click="add_show = false">確認(rèn)</el-button>
<el-button type="info" @click="add_show = false">取消</el-button>
</div>
</el-dialog>
</template>效果圖
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue實(shí)現(xiàn)未登錄訪問其他頁面自動跳轉(zhuǎn)登錄頁功能(實(shí)現(xiàn)步驟)
這篇文章主要介紹了vue實(shí)現(xiàn)未登錄下訪問其他頁面自動跳轉(zhuǎn)登錄頁,本文分步驟給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)例的一些簡單方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
放大鏡在很多購物網(wǎng)站都可以看的到，本文主要實(shí)現(xiàn) 固定放大兩倍,鼠標(biāo)進(jìn)入到左側(cè)圖片區(qū)域的時(shí)候,遮罩層顯示,離開時(shí),遮罩層隱藏，感興趣的可以了解一下2021-07-07
這篇文章主要介紹了修改Vue項(xiàng)目運(yùn)行的IP和端口的方法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-02-02
使用Vue的slot插槽分發(fā)父組件內(nèi)容實(shí)現(xiàn)高度復(fù)用、更加靈活的組件(推薦)
這篇文章主要介紹了使用Vue的slot插槽分發(fā)父組件內(nèi)容實(shí)現(xiàn)高度復(fù)用、更加靈活的組件 ,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了 詳解vue微信網(wǎng)頁授權(quán)最終解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06
通過Vue?3,組合式API增強(qiáng)了我們利用Vue的能力,使我們的代碼更具模塊性和可讀性,本文主要來和大家分享10個(gè)常用的Vue3組合式API,希望對大家有所幫助2024-01-01
Vue 3 的 Composition API 帶來了強(qiáng)大的 reactive 函數(shù),它允許你在 Vue 應(yīng)用程序中創(chuàng)建響應(yīng)式數(shù)據(jù),本文我們將深入探討 Vue 3 的 reactive,并提供一些注意事項(xiàng)和解決方案,希望可以幫助打更好地使用它2023-11-11
Vite?vue3多頁面入口打包以及部署踩坑實(shí)戰(zhàn)
因?yàn)槲覀児镜捻?xiàng)目是多頁面應(yīng)用,不同于傳統(tǒng)單頁面應(yīng)用,一個(gè)包就可以了,下面這篇文章主要給大家介紹了關(guān)于Vite?vue3多頁面入口打包以及部署踩坑的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vuex管理狀態(tài)倉庫使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07