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-button type="text" @click="queryBuildLog(scope.row)">查看</el-button>-->
<!--                    <el-button type="text" @click="queryDeployLog(scope.row)">查看</el-button>-->
<!--                    <el-dialog title="提示" :visible.sync="dialogVisible" :modal-append-to-body="false">-->
<!--                      <div style="white-space: pre-wrap" v-html="build_log"></div>-->
<!--                      <el-button type="primary" @click="dialogVisible=false">关闭</el-button>-->

<!--                    </el-dialog>-->

                    <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%" :modal-append-to-body="false">-->
                    <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" :modal-append-to-body="false">-->
                            <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>