Vue+vuetify如何封装一个高复用的新建/编辑侧边弹窗？-灵析社区

听你的描述是解决多个接口不放在公共组件里，那只要把接口作为参数传进来就行了呀 封装一个公共组件，设置（例子不完整） const props = defineProps({ addApi: Function, updateApi: Function, dataKey: { type: String, default: 'id' }, beforeSubmit: Function, afterSubmit: Function, }) const formData = ref({}) const loading = ref(false) const isEdit = computed(() => { return Boolean(formData[props.dataKey]) }) // 通过id判断是否是编辑还是新增 // 在表单提交方法里 async function submit(){ const msg = isEdit.value?'编辑成功':'新增成功' const api = isEdit.value? props.updateApi : props.addApi const params = {...formData.value} // 必要时深度克隆 // 如果需要在提交前额外处理 props.beforeSubmit && props.beforeSubmit(params) loading.value = true const res = await api(params).finally(()=> loading.value = false) // 下面自己写了 // ElMessage.success(msg) // visible.value = false // emit('success') // 如果需要在提交后额外处理 props.afterSubmit && props.afterSubmit(params) }