最近公司有一个后台业务虽然也是写在了现有的后台系统中，但是之后要为这个业务单独拉出来新建一个后台系统,所以现有的后台系统中的vue组件库，就不能用了(因为不知道将来的系统要基于什么组件库，以防给未来移植项目带来麻烦),这次业务中又遇到了弹窗的功能,所以只能手动写一个了(虽然说弹窗组件很简单，也是想自己总结一下，有不对的地方也请指出)，一开始用传统的props,$emit但是觉得要接两个取消与确认的回调这块的逻辑分散了所以就用了promise两个回调的方式把两个回调写在了一起,并不一定好，算是提供一种思路吧。
一.概览
先看最后的调用方式
props $emit方式
<chat-modal ref="chat-modal" v-model="showModal" cancelText="取消" sureText="确认" title="弹窗标题" small @on-ok="onOK" @on-cancel="onCancel"> <div>slot的东西,想向弹窗中添加自定义的内容</div> </chat-modal> methods: { display() { this.showModal = true;//交互点击手动触发显示弹窗 }, onOK() {},//点击确认的回调 onCancel() {}//点击取消的回调 }
promise的回调方式
<chat-modal ref="chat-modal"></chat-modal> methods: { display() { this.$refs["chat-modal"].openModal({ title: "弹窗标题", sureText: "确认", cancelText: "取消" }).then(res => { //点击确认的回调 }, res => { //点击取消的回调 }) } }
第二种方式的好处就是把所有的逻辑都集中到了一个方法里。
二.看下组件的源码
tip: 样式有些烂...
<template> <div> <div v-show="showModal"></div> <div :class="{'smSize': otherText.small || small}" v-show="showModal"> <div>{{ otherText.title || title}}</div> <div> <slot></slot> </div> <div> <div ref="sure" @click="makeSure" v-show="otherText.sureText || sureText">{{ otherText.sureText || sureText }}</div> <div ref="cancel" @click="makeCancel" v-show="otherText.cancelText || cancelText">{{ otherText.cancelText || cancelText }}</div> </div> </div> </div> </template> <script> //此组件提供两种调用方法,可以在组件上v-model一个表示是否显示弹窗的对话框，然后需要的一些值通过props传入，然后$emit在组件上@监听做回调 //第二中方法所有的传值回调都只需要在组件内部的一个方法调用然后在组件外部this.$refs[xxx].open调用然后.then触发回调，比上一种方便些 var initOtherText = { sureText: "", cancelText: "", title: "", small: false }; export default { props: { title: { type: String }, sureText: { type: String }, cancelText: { type: String }, value: { type: Boolean }, small: { type: Boolean } }, watch: { value(newVal) { this.showModal = newVal; } }, data() { return { otherText: JSON.parse(JSON.stringify(initOtherText)), showModal: this.value }; }, methods: { makeSure() { this.$emit("on-ok"); this.$emit("input", false); }, makeCancel() { this.$emit("on-cancel"); this.$emit("input", false); }, openModal(otherText) { this.otherText = { ...otherText }; this.showModal = true; var pms = new Promise((resolve, reject) => { this.$refs["sure"].addEventListener("click", () => { this.showModal = false; resolve("点击了确定"); }); this.$refs["cancel"].addEventListener("click", () => { this.showModal = false; reject("点击了取消"); }); }); return pms; } } }; </script> <style lang="scss" scoped> .shadow { background-color: rgba(0, 0, 0, 0.5); display: table; height: 100%; left: 0; position: fixed; top: 0; transition: opacity 0.3s ease; width: 100%; z-index: 50; } .modal { display: table-cell; vertical-align: middle; overflow-x: hidden; position: fixed; background-color: white; box-shadow: rgba(0, 0, 0, 0.33) 0px 2px 8px; border-radius: 5px; outline: 0px; overflow: hidden; transition: all 0.3s ease; width: 600px; height: 400px; top: 50%; left: 50%; margin-top: -200px; margin-left: -300px; } .header { align-items: center; background-color: #62a39e; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16); color: #fff; font-weight: bold; display: -ms-flexbox; display: flex; height: 3.5rem; padding: 0 1.5rem; position: relative; z-index: 1; } .body { align-items: center; padding: 1.5rem; } .footer { justify-content: flex-end; padding: 1.5rem; position: absolute; bottom: 0; width: 100%; float: right; } .item { color: white; text-align: center; border-radius: 5px; padding: 10px; cursor: pointer; display: inline-block; } .info { background-color: #2196f3; } .success { background-color: #62a39e; } .red { background-color: #e95358; } .smSize { height: 200px; } </style>