vue.js - Vue+vuetify如何封装一个高复用的新建/编辑侧边弹窗？

Question

简述：目前准备要做页面重构，现有的弹窗样式要弃用，要改成侧边弹窗，最先尝试的是封装一个公共弹窗组件，通过传参，父组件向子组件传值的形式实现新建或编辑功能，但是面临一个问题，有非常多的接口，每个页面都有不同的新建和编辑的API接口，但是我又不想把这些接口都放在公共组件里面，感觉复用性不高，大佬们有啥办法吗~~~

正在尝试处理接口的放置

Answer 1

听你的描述是解决多个接口不放在公共组件里，那只要把接口作为参数传进来就行了呀
封装一个公共组件，设置（例子不完整）

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)}