kbk 在实现新增编辑详细的时候,点开的是同一个弹框,并且多个页面都共同样式,整理了一个公共组件
- 功能点
点击新增 编辑 详情 按钮时,弹框显示,右上角 X 和 取消 按钮弹框隐藏,点击 确认 按钮调用接口传递参数
新增: 数据为空,确认 取消键 展示, 可点击
编辑: 有数据, 确认 取消键 展示, 可点击
详细: 数据为空,确认 取消键 隐藏,不可点击
- 知识点
作用域插槽 slot
表单验证 valid rules resetFields
父子组件传值 props $emit
vue指令 v-if
运算符 ? : === || && !
-
展示样式
-
封装的组件 DialogCommon.vue
<template>
<!-- 公共弹窗 -->
<el-dialog
:visible="true"
:width="dialogWidth"
:close-on-click-modal="false"
@close="cancelEvent"
class="def-dialog"
:append-to-body='true'
>
<div
slot="title"
class="dialog-header-title"
>
<span>{{ title }}</span>
</div>
<slot name="formBox"></slot>
<div
slot="footer"
v-if="hasFooter"
>
<el-button
size="small"
@click="cancelEvent"
>
取 消
</el-button>
<el-button
size="small"
type="primary"
@click="submitForm"
>
确 定
</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'DialogCommon',
props: {
title: String,
dialogWidth: String,
formName: String,
hasFooter: {
type: Boolean,
default: true
}
},
methods: {
// 取消按钮
cancelEvent() {
if (this.formName && this.hasFooter) {
this.$parent.$refs[this.formName].resetFields()
}
this.$emit('submitFormFun', 'hidden')
},
submitForm() {
this.$emit('submitFormFun')
}
}
}
</script>
<style scoped>
.dialog-header-title i {
color: #357ff9
}
::v-deep .txt-right .el-form-item__label {
text-align: right
}
</style>
- 子组件 addDialog.vue 引用公共组件 DialogCommon.vue
<template>
<!-- 能力簇管理对话框 -->
<div>
<dialogCommon
dialog-width="300px"
:title="title"
@submitFormFun="submitForm"
form-name="addForm"
:has-footer="!disabledVal"
>
<template v-slot:formBox>
<el-form
ref="addForm"
:model="ruleForm"
label-width="60px"
label-position="right"
:rules="rules"
>
<el-row >
<el-form-item
label="名称"
prop="name"
>
<el-input
v-model="ruleForm.name"
:disabled="disabledVal"
placeholder="请输入"
/>
</el-form-item>
</el-row>
<el-row >
<el-form-item
label="分类"
prop="type"
>
<el-input
v-model="ruleForm.type"
:disabled="disabledVal"
placeholder="请输入"
/>
</el-form-item>
</el-row>
<el-row >
<el-form-item
label="描述"
prop="info"
>
<el-input
v-model="ruleForm.info"
:disabled="disabledVal"
placeholder="请输入"
/>
</el-form-item>
</el-row>
</el-form>
</template>
</dialogCommon>
</div>
</template>
<script>
export default {
name: 'AddDialog',
props: {
title: {
type: String,
default: ''
},
formData: {
type: Object,
default() {
return {}
}
}
},
components: {
dialogCommon: () => import('../DialogCommon.vue')
},
data() {
return {
disabledVal: false,
ruleForm: {
name: '',
info: '',
type: ''
},
// 表单校验
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
],
type: [
{ required: true, message: '请输入描述', trigger: 'blur' }
],
},
}
},
created() {
if (this.title !== '新增') {
this.ruleForm = { ...this.formData }
}
if (this.title === '详细') {
this.disabledVal = true
}
},
methods: {
/** 确认按钮 */
submitForm: function (value) {
if (value === 'hidden') {
this.$emit('closeDialog', 'hidden')
return
}
//先校验表格 验证必填项
this.$refs['addForm'].validate((valid) => {
if (valid) {
if (this.title === '编辑') {
this.$emit('handleAddEditDailogData', this.ruleForm)
this.$message.success('编辑成功')
this.$emit('closeDialog')
} else if (this.title === '资源新增') {
this.$emit('handleAddEditDailogData', this.ruleForm)
this.$message.success('新增成功')
this.$emit('closeDialog')
}
} else {
console.log('error submit!!')
return false
}
})
}
}
}
</script>
- 父组件 index.vue 引用当前子组件 addDialog.vue
<!-- 新增 编辑 详情 -->
<add-dialog
v-if="showAddDialog"
:title="title"
:form-data="FormData"
@closeDialog="closeDialog"
/>
import AddDialog from './addEditDialog.vue'
export default {
name: 'boxWrapper',
components: {
AddDialog
},
methods: {
closeDialog(value) {
this.showAddDialog = false
if (!value) {
//判断是否调用table接口信息
}
},
handleType(type, val) {
this.title = type === 'add' ? '新增' : type === 'details' ? '详细' : '编辑'
this.showAddDialog = true
this.FormData = type === 'add' ? {} : { ...val }
},
},
data() {
return {
FormData: {},
title: '新增',
showAddDialog: false,
}
}
}
</script>
注意点:class类样式需要自行配置