Vue 如何封装一个全局的confirm弹窗

项目中用到confirm的弹窗较多,只是文字和确定按钮有区别 我该如何封装一个全局的confirm弹窗 只需每次传入不同的显示文字 和 确定的回调函数即可

现在项目是每一个弹窗就写了一个结构 维护极其复杂

希望各位大佬给点思路

这就需要你自动动手封装一遍了,提供数据输入接口

这样的话 还是组件多次引用 我想能不能之引入一次组件 然后只是动态更改文字和回调函数

vue的组件思想是这样的,多次引用的这个问题,可以通过打包配置来解决,不会生成多余的代码的,如果是传统的js的话,可以写个全局方法创建confirm。

这样就不用多次引入了

1 Like

嗯 不是这个意思 比如 删除订单需要这个弹窗 确认收货需要这个弹窗 那我是不是需要用两个组件 一个用来处理删除 一个用来处理收货 能不能只用一个组件实现不同的操作呢

emmm,是可以一个组件实现的,你组件内部逻辑处理一下就行了,传入的data不一样,显示不一样的东西

文字好说 主要是这个确定的回调函数怎么办呢 指点一下

slot插槽可以更换内容 ,ref属性可以获取到这个组件的实例,然后就可以调用这个组件的属性和方法,组件内写回调,执行不同操作的时候传递不一样的callback。

补充一下,最好的是把你的回调函数也当参数传进去就好了,所有的都组件内部处理

建议你参考element-ui message组件的写法,最后导出一个Message对象,其中包括调用的方法,可以传递文本进去,具体内容按什么形式传就可以自己定义了,可以直接引入使用或挂载到vue原型上使用,然后组件动态添加动态删除,比在组件中引入的方法好多了
https://github.com/ElemeFE/element/blob/dev/packages/message/src/main.js

表示赞同!!!!!!!!