el-dialog中點擊之外的區域不關閉彈窗

場景

在頁面上顯示一個dialog，如果顯示的時候點擊了彈窗之外的區域則會將dialog關閉。

 

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、設置dialogde

elementUi在對Dialog組件做初始化的時候，默認讓該Dialog在點擊組件以外區域會導致該組件關閉，

Dialog下有個‘close-on-click-modal’屬性，該屬性默認值為‘True’，作用為：是否可以通過點擊 modal 關閉 Dialog。

所以，通過設置Dialog下的close-on-click-modal屬性為‘false’，即可解決該問題。

:close-on-click-modal ="false"

2、完整示例代碼

 

       <el-dialog
            title="新增區域信息"
            :visible.sync="dialogVisible"
            width="20%"
            :close-on-click-modal ="false"
            >
            <div class="popup" >
                <div>
                    <span class="show_label">區域名稱：</span>
                    <el-input v-model="areaName" placeholder="" ></el-input>
                </div>
                <br><br>
                <div>
                    <el-button
                    type="primary"
                    icon="el-icon-map-location"
                    size="mini"
                    @click="insertArea()"
                    >新增區域
                    </el-button>
                </div>
            </div>
        </el-dialog>

3、效果