dialog组件
<template>
<el-dialog
:title="title"
:visible.sync="visible"
:width="width"
:top="0"
:before-close="handleClose"
:close-on-click-modal="false"
>
<slot></slot>
<span slot="footer" class="Dialog-footer" v-if="footer">
<el-button @click.native="handleCancel" size="mini" round>取消</el-button>
<el-button type="danger" size="mini" round @click.native="handleSubmit"
>确定</el-button
>
</span>
</el-dialog>
</template>
<script>
export default {
props: {
footer: { // 是否显示按钮
type: Boolean,
default() {
return false
}
},
width: {
type: String,
default: '480px'
},
title: {
type: String,
default: '提示'
},
dialogVisible: {
type: Boolean,
default() {
return false
}
}
},
computed: {
visible: {
get() {
return this.dialogVisible
},
set(val) {
this.$emit('updateVisible', val)
}
}
},
methods: {
handleCancel() {
this.$emit('updateVisible', false)
},
handleSubmit() {
this.$emit('handleSubmit')
}
}
}
</script>
父组件
<Dialog
:dialogVisible="dialogVisible"
title="修改备注"
@updateVisible="getVisible"
@handleSubmit="getSubmit"
footer
>
<el-input v-model="editVal" placeholder="请输入内容" clearable></el-input>
</Dialog>
getUpdateVisible(val) {
this.dialogVisible = val
},
getSubmit() {
const loading = this.$vLoading()
setTimeout(() => {
loading.close()
this.dialogVisible = false
}, 1000)
}