vue使用iview的modal彈窗嵌套modal出現(xiàn)格式錯誤的解決

更新時間：2022年09月09日 11:01:15 作者：芝士焗紅薯

這篇文章主要介紹了vue使用iview的modal彈窗嵌套modal出現(xiàn)格式錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

使用iview的modal彈窗嵌套modal出現(xiàn)格式錯誤

問題

一個全屏modal，點擊按鈕，再彈出一個modal，就會出現(xiàn)這種格式問題，很無語。

解決

搜了一下，說是因為modal的使用是平級的，z-index都是1000，所以后面的會覆蓋前面的。

不知道是不是因為這個，因為我把嵌套的這個modal改成全屏的，就沒有問題了。

解決辦法是說給modal加一個類名， z-index改一下就行了，除了要改嵌套modal（以下簡稱modal2）的z-index，modal2的mask（陰影）也需要改。

<modal>111
<modal class="secondmodal">222</modal>
</modal>
 
<style>
 
.secondmodal .ivu-modal-mask{
z-index: 1009;
}
.secondmodal .ivu-modal-wrap{
z-index: 1009;
}

不知道為什么這種方法對我沒用。

所以后來采用了一種簡單粗暴的方法，大家都知道m(xù)odal只能設(shè)置寬度，如果想給modal設(shè)置高度，要設(shè)置styles。:styles="{height: '500px'}"，直接給他指定高度。

<Modal
  v-model="contentModal"
  title="年度小結(jié)"
  :mask-closable="false"
  :scrollable="true"
  :transfer="false"
  width="1000"
  :styles="{height: '500px'}"
  :footer-hide="true"
>
  <Form :model="contentForm"  :label-width="120"  ref="contentForm">
    <Input v-model="contentForm.content" type="textarea" :autosize="true" placeholder="請輸入內(nèi)容" />
  </Form>
</Modal>

直接解決！