写一个Vue Popup组件

组件长这样

主要有标题、内容、按钮个数、按钮颜色、按钮文案这些可配置项

期望的调用方式一

不需要等待用户二次确认

import Modal from 'common/components/modal'
handleModal() {
 Modal({
  title: '赚取收益？',
  content: '根据您的授权金额和计息天数计算得出(还未到账)。实际以到账金额为准。',
  confirmText: '我知道了'
 })
}

期望的调用方式二

需要等待用户二次确认

import Modal from 'common/components/modal'
async handleModal() {
 await Modal({
  title: '确定现在申请结束吗？',
  content: '申请后预计1-5个工作日可退出',
  cancelColor: '#ff7400',
  confirmColor: '#000',
  showCancel: true
 })
}

模板长这样

common/components/modal/modal.vue

这里用 transition 来包裹动画，填好配置参数就行了

handleConfirm() 二次确认事件我们不放这里实现，具体原因后面会讲

<template>
 <transition name="modal-pop">
  <div class="wrap"
     v-show="visible">
   <div class="modal">
    <h3>{{ title }}</h3>
    <p>{{ content }}</p>
    <div class="btns">
     <span v-if="showCancel"
        @click="visible = false"
        :style="`color: ${cancelColor}`">{{ cancelText }}</span>
     <span @click="handleConfirm()"
        :style="`color: ${confirmColor}`">{{ confirmText }}</span>
    </div>
   </div>
  </div>
 </transition>
</template>
<style lang="less">
@import './modal.less';
</style>

定义好 props 参数列表，visible 作为组件内部状态控制弹框打开关闭

export default {
 props: [
  'title',
  'content',
  'showCancel',
  'cancelColor',
  'cancelText',
  'confirmText',
  'confirmColor'
 ],
 data() {
  return {
   visible: false
  }
 }
}

组件包装

common/components/modal/index.js

先利用 vue 的 extend 拿到刚编写的模板

import Vue from 'vue'
const ModalConstructor = Vue.extend(require('./modal.vue'))
const Modal = (opts = {}) => {								 
 1/2    1 2 下一页 尾页