寫一個(gè)VuePopup組件

組件長(zhǎng)這樣

創(chuàng)新互聯(lián)建站專注于企業(yè)全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、曲周網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開(kāi)發(fā)、商城網(wǎng)站定制開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為曲周等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

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

寫一個(gè)Vue Popup組件

期望的調(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)在申請(qǐng)結(jié)束嗎？',
  content: '申請(qǐng)后預(yù)計(jì)1-5個(gè)工作日可退出',
  cancelColor: '#ff7400',
  confirmColor: '#000',
  showCancel: true
 })
}

模板長(zhǎng)這樣

common/components/modal/modal.vue

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

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

<template>
 <transition name="modal-pop">

  <div class="wrap"
     v-show="visible">

   <div class="modal">

    <h4>{{ title }}</h4>

    <p>{{ content }}</p>

    <div class="btns">
     <span v-if="showCancel"
        @click="visible = false"
        :>{{ cancelText }}</span>
     <span @click="handleConfirm()"
        :>{{ confirmText }}</span>
    </div>

   </div>

  </div>

 </transition>
</template>

<style lang="less">
@import './modal.less';
</style>

定義好 props 參數(shù)列表，visible 作為組件內(nèi)部狀態(tài)控制彈框打開(kā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)打開(kāi)以顯示彈框，最終插入頁(yè)面

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

最終長(zhǎng)這樣

import Modal from 'common/components/modal'

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章標(biāo)題：寫一個(gè)VuePopup組件
網(wǎng)頁(yè)路徑：http://vcdvsql.cn/article48/jhedhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站建設(shè)、微信公眾號(hào)、定制網(wǎng)站、云服務(wù)器、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

寫一個(gè)VuePopup組件