快捷導(dǎo)航

寫一個(gè)Vue Popup組件

更新時(shí)間：2019年02月25日 09:46:57 作者：邱鴻彬

這篇文章主要介紹了寫一個(gè)Vue Popup組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

組件長這樣

主要有標(biāo)題、內(nèi)容、按鈕個(gè)數(shù)、按鈕顏色、按鈕文案這些可配置項(xiàng)

期望的調(diào)用方式一

不需要等待用戶二次確認(rèn)

import Modal from 'common/components/modal'

handleModal() {
 Modal({
  title: '賺取收益？',
  content: '根據(jù)您的授權(quán)金額和計(jì)息天數(shù)計(jì)算得出(還未到賬)。實(shí)際以到賬金額為準(zhǔn)。',
  confirmText: '我知道了'
 })
}

期望的調(diào)用方式二

需要等待用戶二次確認(rèn)

import Modal from 'common/components/modal'

async handleModal() {
 await Modal({
  title: '確定現(xiàn)在申請結(jié)束嗎？',
  content: '申請后預(yù)計(jì)1-5個(gè)工作日可退出',
  cancelColor: '#ff7400',
  confirmColor: '#000',
  showCancel: true
 })
}

模板長這樣

common/components/modal/modal.vue

這里用 transition 來包裹動(dòng)畫，填好配置參數(shù)就行了

handleConfirm() 二次確認(rèn)事件我們不放這里實(shí)現(xiàn)，具體原因后面會(huì)講

<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 參數(shù)列表，visible 作為組件內(nèi)部狀態(tài)控制彈框打開關(guān)閉

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

配置好默認(rèn)參數(shù)，并將 visible 狀態(tài)打開以顯示彈框，最終插入頁面

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

用戶點(diǎn)擊二次確認(rèn)事件后，為了方便組件外部捕捉，這里使用 Promise 包裝回調(diào)事件

這樣 handleConfirm() 放在這里實(shí)現(xiàn)是不是就方便很多了

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: '確定現(xiàn)在申請結(jié)束嗎？',
  content: '申請后預(yù)計(jì)1-5個(gè)工作日可退出',
  cancelColor: '#ff7400',
  confirmColor: '#000',
  showCancel: true
 })

 console.log('用戶確認(rèn)了！')
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: