当前这个弹出框还只是一个固定的结构，它并不能在其他地方复用，需要进行一些处理，将所有可变部分抽取出来，例如标题，按钮，内容。因为有插槽，所以内容就不用考虑，需要关注的是标题和按钮，因为标题有可能是提示，警告等等，按钮也有可能是确定、取消的一个或两个都有。而这些信息都是从父组件传递过来，需要用 props 接收。
在 props 里面添加如下代码，并给某些属性指定默认值：
props: { // 弹框标题 title: String, // 按钮类型： 1：确定按钮 2：取消按钮 3：确定取消 btnType: String, // 按钮文本 sureText: { type: String, default: "确定" }, cancleText: { type: String, default: "取消" }, showModal: Boolean }
添加完之后，还需重新改写代码
<div v-show="showModal"> <div></div> <div> <div> <span>{{title}}</span> <a href="javascript:;" @click="$emit('cancle')"></a> </div> <div> <slot></slot> </div> <div> <a href="javascript:;" v-if="btnType==1"@click="$emit('submit')"{{sureText}}</a> <a href="javascript:;" v-if="btnType==2"@click="$emit('cancle')">{{cancleText}}</a> <div v-if="btnType==3"> <a href="javascript:;" @click="$emit('submit')">{{sureText}}</a> <a href="javascript:;" @click="$emit('submit')">{{cancleText}}</a> </div> </div> </div> </div>
通过父组件传递的参数，来实现代码的重用，并且使用 $emit 来向外抛出自定义事件，然后在父组件实现自己的业务逻辑。
在 Home.vue 里面引入这个组件并调用
<modal title="小星星" sureText="确定" btnType="1" :showModal="showModal" @submit="go" @cancle="showModal=false" > <template v-slot:body> <p>给个小星星吧</p> </template> </modal>
这里的 @submit 和 @cancle 就是我们在组件里面自定义的事件
最终效果如下
实现完之后，感觉有点弹出时生硬，没关系，我们给它加点动画，在css3中有 transform 和 transition 可以实现动画效果，但是我们这里使用 vue 内置组件 <transition> ，让弹出框有一个从上面弹出的效果。
transition组件
transition 组件可以为元素或组件添加过渡效果，只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。它可以通过多种方式进行过渡，在这里应用 class的方式过渡。
这幅图是 Vue 官方给出的图，简单来说，v-enter是动画开始的状态，v-enter-active进入过渡生效时的状态,v-enter-to是过渡的结束状态，leave同理，具体细节大家可以去 https://cn.vuejs.org/v2/guide/transitions.html查看。
当没有指定的name属性时，过渡的类名会默认以v作为前缀，这里给transition指定name为
slide并用它包裹modal组件
<transition> <div v-show="showModal"> ... ... </div> </transition>
在style代码里面modal后面加上
&.slide-enter-active { top: 0; } &.slide-leave-active { top: -100%; } &.slide-enter { top: -100%; }
并且给modal指定需要过渡的属性
transition: top 0.5s;
加完这个之后，弹出框就会有一个滑上滑下的动画啦。
到此，我们的弹出框就完成啦。
你也可以根据自己的需求去做适当的调整，开发出适合自己项目的弹出框。
最后
在实际开发中，组件化是尤为重要的，它能够帮助我们写出更高质量的代码，也能够让我们的代码更易于维护，尽早的树立组件化的思想，对写代码也是非常有帮助的。
附上https://github.com/anpeier/shop-online
到此这篇关于Vue组件化开发之通用型弹出框的实现的文章就介绍到这了,更多相关Vue 弹出框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: