根据上篇文章,我们创建了对应的组件js和视图对应的dome页面,这一次我们处理dialog
1.根据上篇一样我们创建对应的dialog文件和dialog.vue文件 下面就是里面的内容
<template>
<div class="lz-dialog">
<el-dialog
v-model="dialogShow"
:title="obj.dialogTitle"
:width="obj.dialogWidth"
:before-close="close"
draggable
>
<slot> </slot>
<template #footer>
<span v-if="obj.dialogIsFooter" class="dialog-footer">
<el-button class="btn-mixins-clear-default" @click="close">{{ obj.dialogCloseBtnText }}</el-button>
<el-button class="btn-mixins dia-suc" @click="success">{{ obj.dialogSuccessBtnText }}</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import { computed } from 'vue'
export default {
props: {
dialogObject: {
default() {
return {}
},
type: Object
}
},
emits: ['dialogClose', 'dialogSuccess'],
setup(props, ctx) {
// const dialogObj = reactive(inject('dialogObj'))
// 处理props的数据 重新定义 dialogVisible
const dialogShow = computed({
get() {
// getter
return props.dialogObject.dialogVisible
},
set(val) {
// console.log(val)
return val
}
})
const obj = {
dialogTitle: props.dialogObject.title || '标题',
dialogWidth: props.dialogObject.width || '30%',
dialogCloseBtnText: props.dialogObject.closeBtnText || '取消',
dialogSuccessBtnText: props.dialogObject.successBtnText || '成功',
dialogIsFooter: props.dialogObject.isFooter || false
}
const close = () => {
ctx.emit('dialogClose', false, 'close')
}
const success = () => {
ctx.emit('dialogSuccess', false, 'success')
}
return { obj, dialogShow, close, success }
}
}
</script>
<style lang="scss" scope>
.lz-dialog {
.dia-suc {
margin-left: 16px !important;
}
}
</style>
2.在components/index.js文件里面导入对应的dialog.vue文件
import LZDialog from './dialog/dialog.vue'
export default {
install: (Vue) => { Vue.component('LZDialog', LZDialog) }
}
3.使用
<LZDialog
:dialog-object="dialogObjDelDef"
@dialogClose="dialogCloseDef"
@dialogSuccess="dialogSuccessDef"
>
<div class="ptb16 t-c">删除之后不可复原</div>
</LZDialog>
// 删除弹框数据
const dialogObjDelDef = reactive({
dialogVisible: false,
title: '是否要删除当前图片?',
width: '30%',
successBtnText: '确定',
closeBtnText: '取消',
isFooter: true // 是否显示按钮
})
// 关闭弹窗
const dialogCloseDef = () => {
dialogObjDelDef.dialogVisible = false
}
// 确定
const dialogSuccessDef = () => {
dialogObjDelDef.dialogVisible = false
}
setup(props, ctx) {
return { dialogObjDelDef }
}