依旧是百度不到自己想要的,就自己动手丰衣足食
弹出框做成单独的组件confirm.vue;
<template> <transition name="mask-bg-fade"> <div class="mask" v-show="show"> <div class="mask_bg"></div> <transition name="slide-fade"> <div class="modelBox" v-show="show"> <div class="tipIcon" v-bind:class="confirmModalOptions.type||'warning'"></div> <div class="closeModel" v-on:click="closeModel()"></div> <div class="title">{{confirmModalOptions.title || "提示"}}</div> <div class="message textCenter">{{confirmModalOptions.message || " "}}</div> <div class="model_btnBox"> <button class="dh_button_default2" v-on:click="confirmCancel()"> {{confirmModalOptions.btnCancelText || "取消"}} </button> <button class="dh_button_blue" v-on:click="confirmSubmit()"> {{confirmModalOptions.btnSubmitText || "确定"}} </button> </div> </div> </transition> </div> </transition> </template> <script> export default { props: ["confirmModalOptions"], data() { return { show: false, // 是否显示模态框 } }, methods: { closeModel: function () { this.show = false; }, showModel: function () { this.show = true; }, confirmCancel: function () { this.show = false; if(typeof (this.confirmModalOptions.btnCancelFunction)==='function'){ this.confirmModalOptions.btnCancelFunction() } }, confirmSubmit: function () { this.show = false; if(typeof (this.confirmModalOptions.btnSubmitFunction)==='function'){ this.confirmModalOptions.btnSubmitFunction() } } } } </script> <style lang="scss"> </style>
页面
<d-confirm v-bind:confirmModalOptions="confirmOptions" ref="myConfirm"></d-confirm>
components: { DPromise,},import DConfirm from 'components/confirm';
del: function () { this.$refs.myConfirm.showModel(); this.confirmOptions= { type: "warning",//warning title: "提示",//提示 message: "文字内容",//"" btnCancelText: "取消",//取消 btnSubmitText: "确定",//确定 btnSubmitFunction: function () { alert("确定") }, btnCancelFunction: function () { alert("取消") } } },
添加了两个过度效果,背景和弹出框是分开的不同效果,自己可以再封装成一个甚至多个按钮的弹出框,自己就是遇到一些比较麻烦的问题,希望大神指导学习学习,
至于css样式就大家自己写吧;
欢迎批评指正