el-dialog 自定义弹窗 + 插槽

最新推荐文章于 2024-06-17 15:58:57 发布

wind croon

最新推荐文章于 2024-06-17 15:58:57 发布

阅读量877

点赞数 9

分类专栏： vue 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_42250468/article/details/135974682

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

知识点

对于 el-dialog 弹窗自定义标题样式, 提供了#header插槽方法

代码

<template>
  <el-dialog
    v-model="dialogAddVisible"
    title=""
    width="80%"
    :append-to-body="true"
    class="eventDialog"
  >
   <template #header>
      <div class="right-top-title">
        <div class="title-icon"></div>
        <div class="title-info">基础信息</div>
      </div>
    </template>
     <div class="borderbox-main">
      </div>
  </el-dialog>
</template>

<script lang="ts" setup>
</script>

<style scoped="scoped" lang="scss">
.eventDialog {
  top: -70px !important;
  background-color: rgb(37 37 37 / 90%) !important;
  height: 800px !important;
}

.eventDialog .el-dialog__header {
  padding-top: 10px !important;
}

.eventDialog .el-dialog__body {
  position: relative !important;
  top: -10px !important;
  padding-top: 0px !important;
}

.eventDialog .el-dialog__title {
  color: #fff !important;
}

.right-top-title {
  height: 54px;
  .title-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 3%;
    top: 0.5%;
    background: url(/images/zhgk/trip_selected.png) no-repeat 0 0 / 100% 100%;
  }
  .title-info {
    position: absolute;
    left: 4.5%;
    top: -0.5%;
    height: 54px;
    line-height: 54px;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin-left: 30px;
  }
}
</style>