el-dialog强改样式

-Max1st

于 2024-09-30 16:11:58 发布

阅读量281

点赞数 3

分类专栏： element-ui 文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/qq_50187801/article/details/142658783

版权

element-ui 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML部分

<el-dialog :visible.sync="dialogVisibleJpg" center id="preview" :show-close="false">
  <div class="closeBtn" @click="dialogVisibleJpg = false">
    <span>
      ×
    </span>
  </div>
  <el-image :src="fileSrc" fit="cover" />
</el-dialog>

JS部分

data() {
    return {
      dialogVisiblePdf: false,
      dialogVisibleJpg: false,
      fileSrc: "",
    };
 methods: {
    openMarketAnalysis(url) {
      console.log("url", url);
      const fileType = url.split(".").pop();
      this.fileSrc = url;
      this.dialogVisibleJpg = true;
    },
}

CSS部分

<style scoped>
/deep/ .el-dialog {
    margin: 0 auto 50px;
    border-radius: 2px;
    background-color: transparent;
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, .3); */
    box-shadow: none;
    box-sizing: border-box;
    width: 50%;
}

/deep/ .el-dialog__header {
    padding: 0px;
}

/deep/ .el-dialog--center .el-dialog__body {
    /* text-align: initial; */
    /* padding: 25px 25px 30px; */
}

/deep/ .el-dialog__body {
    /* padding: 30px 20px; */
    text-align: center;
    font-size: 14px;
    word-break: break-all;
}

.closeBtn{
  cursor: pointer; 
  height: 40px; 
  width: 40px;
  line-height: 35px; 
  font-size: 30px; 
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  position: absolute;
  right: 0%;
}
</style>

效果图：