Vue 實(shí)現(xiàn)一個命令式彈窗組件功能
前言
在日常工作中彈窗組件是很常用的組件，但用得多還是別人的，空閑時間就自己來簡單實(shí)現(xiàn)一個彈窗組件
涉及知識點(diǎn)：extend、$mount、$el
使用方式：
this.$Confirm({
title:'自定義標(biāo)題'
}).then(res=>{
console.log(res)
})
目錄結(jié)構(gòu)
index.vue：組件布局、樣式、交互邏輯
index.js：掛載組件、暴露方法
知識點(diǎn)
在此之前，了解下涉及的知識點(diǎn)
1. extend
使用這個api，可以將引入的vue組件變成vue構(gòu)造函數(shù)，實(shí)例化后方便進(jìn)行擴(kuò)展
2. $mount
我們希望彈窗組件是在使用時才顯示出來，那么就需要動態(tài)的向body中添加元素。使用$mount方法可以手動掛載一個vue實(shí)例，和 extend 剛好搭配使用，這個也是彈窗組件命令式的關(guān)鍵。
3. $el
既然要添加dom元素，通過實(shí)例的$el屬性，正好可以取到dom元素，之后就是使用原生方法進(jìn)行添加節(jié)點(diǎn)啦~
代碼實(shí)現(xiàn)
index.vue
<template>
<div class="wrap">
<div class="main">
<div class="content">
{{title}}
</div>
<div class="btn-grounp">
<div class="btn cancel" @click="cancel">{{cancelText}}</div>
<div class="btn confirm" @click="confirm">{{confirmText}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:'',
data () {
return {
title:'這是一個彈窗',
confirmText:'確定',
cancelText:'取消'
};
},
methods: {
show(cb){
typeof cb === 'function' && cb.call(this,this)
return new Promise(resolve=>{
this.resolve = resolve
})
},
confirm(){
this.resolve('confirm')
this.hide()
},
cancel(){
this.resolve('cancel')
this.hide()
},
hide(){
document.body.removeChild(this.$el)
this.$destroy()
}
},
}
</script>
<style scoped>
.wrap{
position: fixed;
top: 0;
bottom:0;
left:0;
right:0;
display:flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,.3);
}
.main{
width: 30%;
padding: 10px;
background: #fff;
box-shadow: 0 0 10px 1px #ddd;
border-radius: 5px;
}
.content{
color:#424242;
font-size: 20px;
}
.btn-grounp{
margin-top: 15px;
display:flex;
justify-content: flex-end;
}
.btn{
margin-left: 15px;
padding: 5px 20px;
border-radius: 5px;
font-size: 16px;
color:#fff;
}
.confirm{
background: lightblue;
}
.cancel{
background: lightcoral;
}
</style>
index.js
import Vue from 'vue'
import comfirm from './index.vue'
let newInstance = null
//將vue組件變?yōu)闃?gòu)造函數(shù)
let ConfirmConstructor = Vue.extend(comfirm)
let init = (options)=>{
//實(shí)例化組件
newInstance = new ConfirmConstructor()
//合并配置選項(xiàng)
Object.assign(newInstance,options)
//加載dom
document.body.appendChild(newInstance.$el)
}
let caller = (options)=>{
//options 為調(diào)用組件方法時傳入的配置選項(xiàng)
if(!newInstance){
init(options)
}
return newInstance.show(vm =>{newInstance = null})
}
export default {
install(vue){
vue.prototype.$Confirm = caller
}
}
main.js
上面我對外暴露的對象中含有install方法，這里可以使用Vue.use注冊組件（使用Vue.use后，會查找install方法進(jìn)行調(diào)用），將組件調(diào)用方法掛載到Vue原型上。
import Confirm from './components/confirm' Vue.use(Confirm)
寫在最后
這個彈窗組件比較簡陋，還有很多地方可以完善，等有時間再搞了~
總結(jié)
以上所述是小編給大家介紹的Vue 實(shí)現(xiàn)一個命令式彈窗組件功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了Vue Class Component類組件用法，組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一，它是html、css、js等的一個聚合體，封裝性和隔離性非常強(qiáng)2022-12-12
Vue3中的ref是一種創(chuàng)建響應(yīng)式引用的方式,它在Vue生態(tài)系統(tǒng)中扮演著重要角色,下面這篇文章主要給大家介紹了關(guān)于Vue中動態(tài)綁定Ref的兩種方式,需要的朋友可以參考下2024-09-09
如何使用Gitee Pages服務(wù) 搭建Vue項(xiàng)目
這篇文章主要介紹了如何使用Gitee Pages服務(wù) 搭建Vue項(xiàng)目，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本文主要介紹了vue-element-admin下載到登錄的一些坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章給大家詳細(xì)介紹了Vue強(qiáng)制組件重新渲染的正確方法,非常的實(shí)用,有需要的小伙伴可以參考下2020-02-02
這篇文章主要介紹了el-form錯誤提示信息手動添加和取消,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
下面小編就為大家分享一篇vue實(shí)現(xiàn)提示保存后退出的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
?最近需要再頁面里做個倒計時,發(fā)現(xiàn)用clearInterval()清除定時器失效,下面這篇文章主要給大家介紹了關(guān)于VUE設(shè)置和清除定時器的方式及遇到的問題的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue 插槽簡介及使用示例，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-11-11
使用yarn?build?打包vue項(xiàng)目時靜態(tài)文件或圖片未打包成功的問題及解決方法
這篇文章主要介紹了使用yarn?build?打包vue項(xiàng)目時靜態(tài)文件或圖片未打包成功的問題及解決方法，解決方法不復(fù)雜通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-08-08