vue 封装dialog_自己封装dialog组件
在項目中我們常常要求各頁面樣式統(tǒng)一，所以在使用組件時封裝居多
使用方法
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: 彈框組件關閉按鈕觸發(fā)事件
*/
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组件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： echarts x和数据对应_echar
- 下一篇： vue中父子组件先后渲染_vue父子组件