这篇文章主要为大家详细介绍了vue自定义弹框，实现确认框、提示框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue自定义弹框效果的具体代码，供大家参考，具体内容如下
1、自定义确认框和提示框
根据传入的type来判断是确认框或提示框
{{ titleText }}
{{ content }}
{{ cancelText }}
{{ confirmText }}
2、调用：
（1）提示框的使用：
…… //提示框 this.$refs.myDialog.show(content, { type: 'alert', confirmText: 'OK', cancelText: '取消', titleText: '', data: null })
效果：
（2）确认框：
this.$refs.myDialog.show('要兑换这个商品么？', { type: 'confirm', confirmText: '立即兑换', cancelText: '不用了', titleText: '', data: {shop: shop, operate: 'exchange'} })效果：
当为确认框时的按键处理：changeData
…… changeData (type, data) { console.log('changeData',data) if (type === 'clickConfirm') { if (data.operate === 'exchange') { // this.reduceEnergy(data.shop) this.exchangeCoupon(data.shop) } else if (data.operate === 'downLoad') { window.location = data.url } else if (data.operate === 'login') { this.uplusApi.upVdnModule.goToPage({url: 'mpaas://usercenter'}) this.isLogin = false } } },
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持html中文网。
以上就是vue自定义弹框效果(确认框、提示框)的详细内容，更多请关注0133技术站其它相关文章！
