elementui--去掉弹框的黑色罩子


属性:

:modal-append-to-body="false" 去掉黑色面罩

                  <template slot-scope="scope">
                    <el-button @click="queryDeployLog(scope.row)" type="primary" style="margin-left: 16px;">点我打开el-button>








                    <el-drawer title="我是外面的 Drawer" :visible.sync="drawer2" size="50%" :modal-append-to-body="false">
                      <div>
                        <el-button @click="innerDrawer = true">打开里面的!el-button>
                        <el-drawer title="我是里面的" :append-to-body="true" :before-close="handleClose" :visible.sync="innerDrawer">
                          <p>_(:зゝ∠)_p>
                        el-drawer>
                      div>
                    el-drawer>

                  template>

通过上面这个参数,可以去掉黑色面罩,但是当dialog或drawer嵌套的时候,关掉最里面的窗口后,最外面一层上又上了黑色面罩,这种情况下,需要将:modal-append-to-body="false" 这个参数换成:append-to-body="true" 即可

并且在使用下来发现,:append-to-body="true"方法更佳更稳妥

                  <template slot-scope="scope">
                    <el-button @click="queryDeployLog(scope.row.id)" type="text" style="margin-left: 16px;">查看el-button>

                    <el-drawer title="应用发布日志" :visible.sync="drawer2" direction="rtl" size="50%" :append-to-body="true">
                      <el-table :data="gridData">
                        <el-table-column property="ip" label="ip">el-table-column>
                        <el-table-column property="status" label="状态">el-table-column>
                        <el-table-column property="create_time" label="时间">el-table-column>
                        <el-table-column fixed="right" label="日志" width="120">
                          <template slot-scope="scope">
                            <el-button type="text" @click="queryDeployFlowdLog(scope.row)">查看el-button>

                            <el-dialog title="提示" :visible.sync="dialogVisible3" :append-to-body="true">
                              <div style="white-space: pre-wrap" v-html="deploy_log">div>
                              <el-button type="primary" @click="closeDeployFlowLog">关闭el-button>

                            el-dialog>

                          template>
web