vue 封装dialog_自己封装dialog组件

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

使用方法

import CustomDialog from '@/components/customDialog/index.vue'

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

// 如果内部引用form表单，可为设置通用样式

//

form-item-half 可设置一行两个表单组件展示

half-right 需为一行中的右侧添加，左侧不用添加

-->

:visible.sync="dialogVisible"

:before-close="beforeColse"

:width="width"

:modal="modalBoolean"

:showClose="showClose"

:custom-class="customName"

@close="handleClose"

>

{{cancelButton.text}}

class="confirm-button"

v-show="confirmButton.flag"

:loading="confirming"

@click="handleConfirm"

>{{confirmButton.text}}

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

})

}

}

}

.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;

}

}

}

}

.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;

}

}

可加拖动

: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()

作者：yang