一個 Vue Popup 元件

摘要： 元件長這樣 主要有標題、內容、按鈕個數、按鈕顏色、按鈕文案這些可配置項 期望的呼叫方式一 不需要等待使用者二次確認 import Modal from 'common/components/modal' handleModal() ...

元件長這樣

主要有標題、內容、按鈕個數、按鈕顏色、按鈕文案這些可配置項

期望的呼叫方式一

不需要等待使用者二次確認

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 = {}) => {
let _m = new ModalConstructor({ el: document.createElement('div') })
}

export default Modal

配置好預設引數，並將 visible 狀態開啟以顯示彈框，最終插入頁面

import Vue from 'vue'

const ModalConstructor = Vue.extend(require('./modal.vue'))

const Modal = (opts = {}) => {
let _m = new ModalConstructor({ el: document.createElement('div') })

_m.title = opts.title || '提示'
_m.content = opts.content || ''
_m.showCancel = opts.showCancel || false
_m.cancelText = opts.cancelText || '取消'
_m.cancelColor = opts.cancelColor || '#000'
_m.confirmText = opts.confirmText || '確定'
_m.confirmColor = opts.confirmColor || '#ff7400'
_m.visible = true

document.body.appendChild(_m.$el)
}

export default Modal

使用者點選二次確認事件後，為了方便元件外部捕捉，這裡使用 Promise 包裝回調事件

這樣 handleConfirm() 放在這裡實現是不是就方便很多了

import Vue from 'vue'

const ModalConstructor = Vue.extend(require('./modal.vue'))

const Modal = (opts = {}) => {
let _m = new ModalConstructor({ el: document.createElement('div') })

_m.title = opts.title || '提示'
_m.content = opts.content || ''
_m.showCancel = opts.showCancel || false
_m.cancelText = opts.cancelText || '取消'
_m.cancelColor = opts.cancelColor || '#000'
_m.confirmText = opts.confirmText || '確定'
_m.confirmColor = opts.confirmColor || '#ff7400'
_m.visible = true

document.body.appendChild(_m.$el)

return new Promise(resolve => {
return (_m.handleConfirm = () => {
_m.visible = false
resolve()
})
})
}

export default Modal

最終長這樣

import Modal from 'common/components/modal'

async handleModal() {
await Modal({
title: '確定現在申請結束嗎？',
content: '申請後預計1-5個工作日可退出',
cancelColor: '#ff7400',
confirmColor: '#000',
showCancel: true
})

console.log('使用者確認了！')
}