大佬教程收集整理的这篇文章主要介绍了Vue自定义插件弹窗，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
弹窗，提示框随处可见的，一般要么调用UI组件库，要么手写，话不多说，先看效果
<div class="tips" v-show="clickShow==1"> <div class="tips_copntent"> <p>系统提示<i @click="close">x</i></p> <div> <p>确定要<span v-show="food_status==0">上架</span> <span v-show="food_status==1">下架</span>此套餐吗？</p> <div class="btns"> <button @click="close">取消</button> <button @click="confirm">确定</button> </div> </div> </div> </div>
.tips{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; BACkground: rgba(0, 0, 0, 0.7); } .tips_copntent{ width: 24rem; height: 16rem; BACkground: #fff; border-radius: 5px; position: absolute; left: 50%; top: 50%; margin-left: -12rem; margin-top: -8rem; } .tips_copntent>p{ line-height: 3.2rem; border-bottom: 1px solid rgb(194, 194, 194); font-size: 1.4rem; } .tips_copntent i{ float: right; margin-right: 1rem; font-size: 1.8rem; cursor: pointer; } .tips_copntent div{ margin-top: 2rem; font-size: 1.6rem; } .btns{ display: flex; justify-content: space-around; } .btns button{ BACkground: #fff; border-radius: 5px; outline: none; border: 1px solid #3EAA6F; color: #3EAA6F; width: 40%; line-height: 3rem; font-size: 1.4rem; margin-top: 1.2rem; cursor: pointer; } .btns button:last-child{ BACkground: linear-gradient(to left,#78D678,#3EAA6F); border: none; color: #fff; }
this.$confirm('您确定退房吗？', '系统提示', { confirmButtontext: '确定', cancelButtontext: '取消', type: 'warning', center: true }).then(() => { this.loading = this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', BACkground: 'rgba(0, 0, 0, 0.7)' }); this.$axios.post(outHouseApi,{ idt_order:id }).then((res)=>{ this.loading.close() if(parseInt(res.data.errCodE)>=0){ this.getListData() this.$message({ showClose: true, message: '退房成功', type: 'success' }); } else{ this.$message({ showClose: true, message: res.data.message, type: 'info' }); } }).catch((err)=>{ console.log(err) }) }).catch(() => { this.$message({ type: 'info', message: '已取消' }); });
以上是大佬教程为你收集整理的Vue自定义插件弹窗全部内容，希望文章能够帮你解决Vue自定义插件弹窗所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。