element-ui修改dialog样式全局、局部修改问题 el-dialog__title/el-dialog__header/el-dialog__body/el-dialog__footer

本文主要是介绍element-ui修改dialog样式全局、局部修改问题 el-dialog__title/el-dialog__header/el-dialog__body/el-dialog__footer，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

//没有scoped全局css全部文件生效但是其他地方用dialog样式也会生效

//有scoped为局部css --scoped只在本文件生效在这里设置el-dialog__header不生效

//因此通过el-dialog的class进行全局css中局部定义 只在当前文件生效

<template>
  <el-container><el-main>
  <el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>
  <el-dialog class="my-dialog-name"//自定义class
    title="提示"
    :visible.sync="centerDialogVisible"
    width="30%"
    center>
    <span>dialog内容</span>
    <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
  </el-dialog>
  </el-main></el-container>
</template>
<script>
  export default {

    data() {
      return {
        centerDialogVisible: false
      }

    }
  }
</script>
//没有scoped全局css全部文件生效但是其他地方用dialog样式也会生效
<style lang="scss">
  .my-dialog-name{ //因此通过el-dialog的class进行全局css中局部定义 只在当前文件生效
    .el-dialog__header{ //声明弹出框头dialog__header为蓝色   内容 和 尾巴标题这样修改，具体可以修改的东西点F12看它渲染出来的内容
      text-align: left;
      background-color: #1482f0;
      border-bottom: 1px solid #e8eaec;
      .el-dialog__body {
      }
      .el-dialog__footer {
        text-align: center;
      }
    }
  }
</style>

//有scoped局部css --scoped只在本文件生效在这里设置el-dialog__header不生效
 <style lang="scss" scoped></style>

这篇关于element-ui修改dialog样式全局、局部修改问题 el-dialog__title/el-dialog__header/el-dialog__body/el-dialog__footer的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！