在項目中我們常常要求各頁面樣式統一，所以在使用組件時封裝居多

使用方法

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

總結

以上是生活随笔為你收集整理的vue 封装dialog_自己封装dialog组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。