自己封装dialog组件

在项目中我们常常要求各页面样式统一，所以在使用组件时封装居多

使用方法
  import CustomDialog from '@/components/customDialog/index.vue'

  // dialogTitle 必传，doConfirm 有提交按钮必传

  // 如果内部引用form表单，可为<el-from class="refacte-quick-form"></el-form>设置通用样式

  //<el-form-item class="form-item-half half-right">
    form-item-half 可设置一行两个表单组件展示
    half-right  需为一行中的右侧添加，左侧不用添加

  <CustomDialog :dialogTitle="dialogTitle" @doConfirm="doConfirm"></CustomDialog>
-->
<template>
  <div class="common-dialog">
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="beforeColse"
      :width="width"
      :modal="modalBoolean"
      :showClose="showClose"
      :custom-class="customName"
      @close="handleClose"
    >
      <div slot="title" v-html="dialogTitle"></div>
      <slot name="dialogContent"></slot>
      <span v-if="defaultButtonGroup" slot="footer" class="dialog-footer">
        <el-button class="cancel-button" @click="handleCancel" v-show="cancelButton.flag">{{cancelButton.text}}</el-button>
        <el-button
          class="confirm-button"
          v-show="confirmButton.flag"
          :loading="confirming"
          @click="handleConfirm"
        >{{confirmButton.text}}</el-button>
      </span>
      <slot name="footer-button" class="dialog-footer"></slot>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    showClose: {// 控制右上关闭按钮的显示
      default: true,
      type: Boolean
    },
    customName: { // 弹窗的类名
      type: String,
      default () {
        return ''
      }
    },
    modalBoolean: { // 控制遮盖层
      default: true,
      type: Boolean
    },
    dialogTitle: { // 必传,弹框组件标题
      type: String,
      required: true
    },
    defaultButtonGroup: { // 默认显示底部按钮组
      default: true,
      type: Boolean
    },
    width: {
      type: String,
      default: '50%'
    },
    cancelButton: { // 取消按钮
      type: Object,
      default () {
        return {
          flag: true,
          text: '取消'
        }
      }
    },
    confirmButton: { // 确认按钮
      type: Object,
      default () {
        return {
          flag: true,
          text: '确认'
        }
      }
    },
    beforeCloseFun: [Function, String], // 弹框关闭前回调
    doCancel: [Function, String] // 取消按钮事件
  },
  data () {
    return {
      dialogVisible: false,
      confirming: false
    }
  },
  methods: {
    /**
     * @description: 控制弹框的显示与隐藏
     * @param {Boolean} val true或false
     */
    changeDialogStatus (val) {
      this.dialogVisible = val
    },
    /**
     * @description: 关闭前的回调，会暂停 Dialog 的关闭
     */
    beforeColse () {
      if (this.beforeCloseFun && typeof this.beforeCloseFun === 'function') {
        this.beforeCloseFun((callStatus) => {
          this.changeDialogStatus(callStatus)
        })
      } else {
        this.changeDialogStatus(false)
      }
    },
    /**
     * @description: 弹框组件关闭按钮触发事件
     */
    handleClose () {
      this.changeDialogStatus(false)
    },
    /**
     * @description:取消按钮事件
     */

    handleCancel () {
      if (this.doCancel && typeof this.doCancel === 'function') {
        this.doCancel((callStatus) => {
          this.changeDialogStatus(callStatus)
        })
      } else {
        this.changeDialogStatus(false)
      }
    },
    /**
     * @description: 确定按钮事件
     */
    handleConfirm () {
      this.confirming = true
      this.$emit('doConfirm', (callStatus) => {
        this.changeDialogStatus(callStatus)
        this.confirming = false
      })
    }
  }
}
</script>

<style lang="less">
.common-dialog{
  .el-dialog{
    margin-top: 8vh !important;
    padding-left: 12px;
    padding-right: 29px;

    .el-dialog__header{
      height: 58px;
      line-height: 58px;
      font-size: 17px;
      border-bottom: 1px solid  #eeeeee;
      padding: 0px 0px 0px 10px;

      .el-dialog__headerbtn{
        top:15px;
      }

      .el-dialog__close.el-icon.el-icon-close{
        font-size: 17px;
        font-weight: bold;
      }
    }

    .el-dialog__body{
      padding: 16px 20px 0px 12px;
    }

    .el-dialog__footer{
      height: 72px;
      line-height: 72px;
      padding: 0px;
      border-top: 1px solid  #eeeeee;

      .el-button.el-button--default{
        width: 73px;
        border-radius: 6px;

        &:hover,&:focus{
          background-color: #736df1;
          color: #ffffff;
        }
      }

      .confirm-button{
        background-color: #736df1;
        color: #ffffff;
      }

      .cancel-button{
        color: #999999;
      }
    }
  }
}
</style>
<style lang="less">
.refacte-quick-form{
  *{
    box-sizing: border-box;
  }
  .el-form-item.is-required{
    .el-form-item__label{
      &:before{
        content: ''
      }
      &:after{
        content: '*';
        color: #F56C6C;
        position: relative;
        bottom: 3px;
        left: 3px;
      }
    }
  }
  .el-form-item{
    margin-bottom: 22px;
  }
  .el-input__inner{
    height: 36px;
    width: 888px;
    font-size: 13px;
  }
  .el-textarea__inner{
    width: 888px;
  }
  .el-form-item.form-item-half{
    display: inline-block;
    .el-input__inner{
      width: 361px;
    }
  }
  .el-form-item.form-item-half.half-right{
    margin-left: 59px;
  }
  .el-form-item__label{
    width: 105px !important;
    text-align: left;
    font-size: 14px;
  }
  .el-form-item__content{
    margin-left: 105px !important;
  }
}
</style>

可加拖动

<template v-if="showSitchIcon">
                <i v-if="canDraggable" class="el-icon-unlock lock" title="关闭拖拽或缩放功能" @click="onSwitch"></i>
                <i v-else class="el-icon-lock lock" title="打开拖拽或缩放功能" @click="onSwitch"></i>
</template>
              
<vue-draggable-resizable
       :w="dw"
       :h="dh"
       :x="xp"
       :y="yp"
       :draggable="canDraggable"
       :resizable="canResizable"
       class-name="my-class"
       class-name-active="my-active-class"
       :handles="[''tm'',''bm'',''ml'',''mr'']"
>

data () {
    return {
      dw: 0,
      dh: 0,
      xp: 0,
      yp: 0,
      canResizable: false,
      canDraggable: false,
      isShow: false,
      dialogVisible: false,
      confirming: false
    }
  },
  calculate () {
      const { clientWidth, clientHeight } = document.body
      const { width, height } = this.customStyle
      const fs = clientWidth / 10
      const w = width * fs / 192
      const h = height * fs / 192
      const x = clientWidth / 2 - w / 2
      const y = clientHeight / 2 - h / 2
      this.dw = w
      this.dh = h
      this.xp = x
      this.yp = y
    }

**
将时间转换成字符串时间**

toLocaleString()