利用Vue3實現(xiàn)一個可以用js調(diào)用的組件
前言
項目開發(fā)中基本都會用到組件庫,但是設(shè)計稿樣式和功能不一定和組件庫相同,尤其像是消息提示彈窗、確認(rèn)彈窗,各個項目各個設(shè)計師都有自己的一套風(fēng)格。雖然我們可以使用組件庫中的組件對其進(jìn)行樣式覆蓋來使用。但是一些定制功能還是不容易修改,這種情況我們就會選擇自定義組件,然后通過 components 屬性引入頁面,顯式寫入標(biāo)簽調(diào)用的,對于消息提示這種給用戶簡單的提示或操作,大多數(shù)常用的ui庫類似功能都支持通過js調(diào)用。我們也可以參照ui庫的調(diào)用方式,實現(xiàn)一個通過js函數(shù)調(diào)用的自定義組件。
一、常規(guī)Vue組件
假如我們需要實現(xiàn)一個確認(rèn)框,點(diǎn)擊按鈕打開確認(rèn)框,點(diǎn)擊確認(rèn)框的確定和取消按鈕關(guān)閉確認(rèn)框,并調(diào)用對應(yīng)方法。
1. 組件主要代碼:
src/components/Confirm/Confirm.vue
2. 使用方式
3. 實現(xiàn)效果
二、改為js調(diào)用組件
上面的調(diào)用組件的方式非常繁瑣,既要引入,又要處理各中操作的回調(diào),并且組件dom節(jié)點(diǎn)插入到當(dāng)前頁面之下,樣式有可被組件內(nèi)容覆蓋或者受到其他影響。
我們希望實現(xiàn)的結(jié)果:通過js函數(shù)的方式調(diào)用組件,函數(shù)返回一個promise,確認(rèn)then,取消catch`,例如:
Confirm({ title: '', message: '' }).then(() => { // 點(diǎn)擊確認(rèn) }).catch(() => { // 點(diǎn)擊取消 })
1. 實現(xiàn)步驟:
- 首先確認(rèn)需要返回一個 promise 對象。創(chuàng)建一個方法,首先返回一個 promise 對象。
- 使用Vue 的 createApp 方法創(chuàng)建 Confirm 組件實例。使用 createApp 第二個參數(shù),我們可以將根 prop 傳遞給應(yīng)用程序,將組件所需要的數(shù)據(jù)傳入。
- 創(chuàng)建一個節(jié)點(diǎn),用作將組件實例掛載的容器,將節(jié)點(diǎn)append到body中。
- 將組件實例掛載到創(chuàng)建的節(jié)點(diǎn)上,就實現(xiàn)組件的上級是body,不會受到調(diào)用頁面影響。
- 當(dāng)點(diǎn)擊確定 調(diào)用 resolve,并卸載當(dāng)前組件,移除dom。點(diǎn)擊取消調(diào)用 reject 并卸載當(dāng)前組件,移除dom。
2. 具體實現(xiàn)代碼:
修改 Confirm 組件js部分,將 onConfirm 和 onCancel 從props 中傳遞進(jìn)來,方便組件實例使用。
// src/components/Confirm/Confirm.vue <script> export default { name: 'Confirm', props: { title: { type: String, default: '提示' }, message: { type: String, default: '默認(rèn)提示信息' }, confirmBtnText: { type: String, default: '確認(rèn)' }, cancelBtnText: { type: String, default: '取消' }, onConfirm: { type: Function, default: () => {} }, onCancel: { type: Function, default: () => {} } } } </script>
在同目錄下新建 index.js文件,將 onConfirm、onCancel 等參數(shù)通過props傳遞到組件,在實例中就能接收到事件回調(diào)。
// src/components/Confirm/index.js import { createApp } from 'vue' import Confirm from './Confirm' function confirm ({ title, message, confirmBtnText, cancelBtnText }) { return new Promise((resolve, reject) => { // 實例化組件,createApp第二個參數(shù)是props const confirmInstance = createApp(Confirm, { title: title || '提示', message: message || '確認(rèn)消息', confirmBtnText: confirmBtnText || '確定', cancelBtnText: cancelBtnText || '取消', onConfirm: () => { unmount() resolve() }, onCancel: () => { unmount() reject(new Error()) } }) // 卸載組件 const unmount = () => { confirmInstance.unmount() document.body.removeChild(parentNode) } // 創(chuàng)建一個掛載容器 const parentNode = document.createElement('div') document.body.appendChild(parentNode) // 掛載組件 confirmInstance.mount(parentNode) }) } export default confirm
使用組件
setup () { const showConfirm = () => { Confirm({ title: '標(biāo)題', message: '內(nèi)容' }).then(() => { console.log('點(diǎn)擊確認(rèn)') }).catch(() => { console.log('點(diǎn)擊取消') }) } return { showConfirm } }
3. 實現(xiàn)效果展示
總結(jié)
到此這篇關(guān)于利用Vue3實現(xiàn)一個可以用js調(diào)用的組件的文章就介紹到這了,更多相關(guān)Vue3實現(xiàn)js調(diào)用的組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
element-ui配合node實現(xiàn)自定義上傳文件方式
這篇文章主要介紹了element-ui配合node實現(xiàn)自定義上傳文件方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09詳解vue 模擬后臺數(shù)據(jù)(加載本地json文件)調(diào)試
本篇文章主要介紹了詳解vue 模擬后臺數(shù)據(jù)(加載本地json文件)調(diào)試,具有一定的參考價值,有興趣的可以了解一下2017-08-08vue+relation-graph繪制關(guān)系圖實用組件操作方法
這篇文章主要介紹了vue+relation-graph繪制關(guān)系圖實用組件操作方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07vue前端開發(fā)輔助函數(shù)狀態(tài)管理詳解示例
vue的應(yīng)用狀態(tài)管理提供了mapState、mapGetters、mapMutations、mapActions四個輔助函數(shù),所謂的輔助函數(shù)分別對State、Getters、Mutations、Actions在完成狀態(tài)的使用進(jìn)行簡化2021-10-10vue-element-admin中node-sass換成dart-sass,安裝依賴報code?128多種問題的解決
這篇文章主要介紹了vue-element-admin中node-sass換成dart-sass,安裝依賴報code?128多種問題的解決方法,本文給大家分享問題原因分析及解決方法,需要的朋友可以參考下2023-02-02