Vue+vuetify如何封装一个高复用的新建/编辑侧边弹窗?

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

正在尝试处理接口的放置


回答:

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

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)

}

以上是 Vue+vuetify如何封装一个高复用的新建/编辑侧边弹窗? 的全部内容, 来源链接: utcz.com/p/935189.html

回到顶部