标签：body 黑色 查看 elementui -- 面罩 弹框 append

属性：

: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>

标签：body,黑色,查看,elementui,--,面罩,弹框,append
来源： https://www.cnblogs.com/lutt/p/16243930.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。