Secondary encapsulation of Element’s Dialog

Encapsulate the Dialog box component

Dialog.vue, prop value can be set according to your own requirements.

<template>
  <el-dialog
    class="comn_dialog"
    :title="dialogTitle"
    :visible.sync="visible"
    :width="popupWidth"
    :top="popupTop"
    :close-on-click-modal="false"
    v-dialogDrag
    @close="Cancel"
  >
    <slot>
      <p>Popover content customization</p>
    </slot>

    <span v-if=! "" $slots.footer" slot="footer" class="dialog-footer">
      <el-button type="primary" @click="Save">determine</el-button>
      <el-button @click="Cancel">Take away</el-button>
    </span>

    <div v-else class="my-footer">
      <slot name="footer" />
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    dialogTitle: {
      type: String.default: "Title"
    },
    centerDialogVisible: {
      type: Boolean.default() {
        return false; }},popupWidth: {
      type: String.default() {
        return "430px"; }},popupTop: {
      type: String.default() {
        return "15vh"; }}},computed: {
    visible: {
      get() {
        return this.centerDialogVisible;
      },
      set(val) {
        this.$emit("updateVisible", val); }}},methods: {
    Cancel() {
      this.$emit("resetPopupData");
      this.visible = false;
    },
    Save() {
      this.$emit("submitPopupData"); }}};</script>
<style lang="scss">
.comn_dialog {
  .el-dialog__header {
    padding: 8px 0px 3px 8px;
    border-bottom: 1px solid #e7e6e6;
    box-shadow: 0px 4px 4px -4px #d1d0d0;
  }
  .el-dialog__title {
    font-size: 16px;
    letter-spacing: 1px;
    color: # 464646;
    font-weight: bolder;
  }
  .el-dialog__footer {
    padding: 0px 20px 20px 0px;
  }
  .el-dialog__headerbtn {
    position: static; // Compatible with IE11, cancel the originalpositionPositioning}.el-dialog__close {
    color: $header_bg;
    font-size: 20px;
    font-weight: bolder;
    position: absolute;
    top: 8px;
    right: 8px;
    &::after {
      content: ' ';
      border: 2px solid $header_bg;
      width: 20px;
      height: 20px;
      border-radius: 25px;
      position: absolute;
      right: -2px;
      top: -3px; }}.el-dialog__body {
    padding: 20px;
  }
  
.my-footer {
  text-align: right;
  box-sizing: border-box; }}</style>
Copy the code

Import and use in components

Import, register and use the dialog.vue component you just defined. Test. vue file, which uses the default footer when using the Dialog component.

<template>
  <div class="test">
    <el-button @click="show" type="primary">Click the Show box</el-button>
    <comn-dialog
      :dialogTitle="dialogTitle"
      :centerDialogVisible="visible"
      @updateVisible="updateVisible"
      @resetPopupData="resetPopupData"
      @submitPopupData="submitPopupData"
      :popupWidth="'350px'"
      :popupTop="'10vh'"
    >
      <p class="enable_font">
        <i class="el-icon-info enable-icon"></i>
        <span>Sure you want to<em class="operate_font">delete</em>Is the data selected?</span>
      </p>
    </comn-dialog>
  </div>
</template>
<script>
import comnDialog from "@/components/Dialog.vue"
export default {
components:{
	comnDialog
},
  data() {
    return {
      dialogTitle: "".visible: false
    };
  },
  methods: {
    updateVisible(val) {
      this.visible = val;
    },
    resetPopupData() {
      // Data can be reset here
      this.visible = false;
    },
    submitPopupData() {
      // Submit data to the background
      this.visible = false;
    },
    show() {
      this.visible = true;
      this.dialogTitle = "Delete confirmation"; }}};</script>
Copy the code

Test. vue file to define footer:

<template>
  <div class="test">
    <el-button @click="handleClick" type="danger">Click on the display</el-button>
    <! -- Custom footer without binding submitPopupData -->
    <comn-dialog
      :dialogTitle="Regular cloning"
      :centerDialogVisible="visible"
      @resetPopupData="resetCopyPopup"
      @updateVisible="updatevisible"
    >
      <div>content</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="visible = false">save</el-button>
      </span>
    </comn-dialog>
  </div>
</template>
<script>
import ComnDialog from "@/components/Dialog.vue";
export default {
  components: {
    ComnDialog
  },
  data() {
    return {
      visible: false
    };
  },
  methods: {
    updatevisible(val) {
      this.visible = val;
    },
    resetCopyPopup() {
      // You can do some reset operations here, such as clearing the form data and closing the popbox
    },
    handleClick() {
      this.visible = true; }}};</script>

Copy the code

Published in 2020-09-30:blog.csdn.net/ddx2019/art…