寫一個Vue Popup組件
更新時間：2019年02月25日 09:46:57 作者：邱鴻彬
這篇文章主要介紹了寫一個Vue Popup組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
組件長這樣
主要有標題、內容、按鈕個數(shù)、按鈕顏色、按鈕文案這些可配置項
期望的調用方式一
不需要等待用戶二次確認
import Modal from 'common/components/modal'
handleModal() {
Modal({
title: '賺取收益？',
content: '根據(jù)您的授權金額和計息天數(shù)計算得出(還未到賬)。實際以到賬金額為準。',
confirmText: '我知道了'
})
}
期望的調用方式二
需要等待用戶二次確認
import Modal from 'common/components/modal'
async handleModal() {
await Modal({
title: '確定現(xiàn)在申請結束嗎？',
content: '申請后預計1-5個工作日可退出',
cancelColor: '#ff7400',
confirmColor: '#000',
showCancel: true
})
}
模板長這樣
common/components/modal/modal.vue
這里用 transition 來包裹動畫，填好配置參數(shù)就行了
handleConfirm() 二次確認事件我們不放這里實現(xiàn)，具體原因后面會講
<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 作為組件內部狀態(tài)控制彈框打開關閉
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
配置好默認參數(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
用戶點擊二次確認事件后，為了方便組件外部捕捉，這里使用 Promise 包裝回調事件
這樣 handleConfirm() 放在這里實現(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)在申請結束嗎？',
content: '申請后預計1-5個工作日可退出',
cancelColor: '#ff7400',
confirmColor: '#000',
showCancel: true
})
console.log('用戶確認了！')
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
Teleport是一個內置組件,它可以將一個組件內部的一部分模板傳送到該組件的 DOM 結構外層的位置去,本文主要介紹了Vue3中Teleport用法小結,感興趣的可以了解一下2025-04-04
本教程講解的是 Vue-CLI 3.x 腳手架搭建的vue項目, 利用scp2自動化部署到靜態(tài)文件服務器 Nginx，感興趣的可以了解一下2021-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)動態(tài)控制表格列的顯示隱藏，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Vue.js每天必學之指令系統(tǒng)與自定義指令,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了解決新建一個vue項目過程中遇到的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
在實際業(yè)務中,除了父子組件通信外,還有很多非父子組件通信的場景,下面這篇文章主要給大家介紹了關于Vue非父子組件之間的通信方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了基于Vue.js的表格分頁組件使用方法，了解了Vue.js的特點，感興趣的朋友可以參考一下2016-05-05
這篇文章主要為大家詳細介紹了vue-dialog的彈出層組件，可以通過npm引用的組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
下面小編就為大家?guī)硪黄猧view給radio按鈕組件加點擊事件的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue中數(shù)組加Key方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03