vue封装通用弹窗commonDialog

最新推荐文章于 2025-10-17 01:52:40 发布

原创最新推荐文章于 2025-10-17 01:52:40 发布 · 460 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个自定义的对话框组件commonDialog，包含标题、内容区域和父组件如何通过ref进行交互，设置标题和显示状态。组件使用了Vue.js并附带了SCSS样式，适合前端开发中展示弹窗或通知。

<template>
  <div>
    <el-dialog
      :visible.sync="commonVisible"
      :modal-append-to-body="false"
      :width="width"
      custom-class="commonDialog"
    >
      <div slot="title" class="title">
        <div class="square"></div>
        <span>{{ title }}</span>
      </div>
      <div class="MainBody">
        <slot name="bodyContent">

        </slot>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: "commonDialog",
  components: {},
  data() {
    return {
      commonVisible: false,
      title: '111',
      width: "91.770833vw"
    }
  },
  mounted() {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
::v-deep .commonDialog {
  background: #091C42;
  border: 1px solid rgba(0, 137, 216, 1);

  .el-dialog__header{
    padding: 0;
  }

  .el-dialog__body{
    padding-left: 0!important;
    padding-right: 0!important;
    padding-top: 0!important;
  }

  .el-dialog__headerbtn {
    top: 10px;
  }

  .el-dialog__headerbtn .el-dialog__close {
    color: #ffffff;
  }
}
.title{
  width: 100%;
  height: 0.3125rem;
  background: url("~@/assets/zlfxImages/DfxtjscImg/titleBg.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: left;
  padding-left: 0.14375rem;
  overflow: hidden;
  .square{
    width: 4px;
    height: 22px;
    background: #00C6FF;
    position: absolute;
    left: 0;
  }
  span{
    font-size: 0.125rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
  }
}
.MainBody{
  width: 100%;
  //height: 3.75rem;
  padding: 0.125rem 0.125rem 0rem;
}
</style>

父组件调用

<commonDialog ref="xxgk">
   <div slot="bodyContent">
      
   </div>
</commonDialog>

import commonDialog from "../components/Dialog/commonDialog";

components: {commonDialog,ryfbTable},

this.$refs.xxgk.title = '详情'
this.$refs.xxgk.commonVisible = true