如何使用Vue3設(shè)計(jì)實(shí)現(xiàn)一個Model組件淺析
一、組件設(shè)計(jì)
組件就是把圖形、非圖形的各種邏輯均抽象為一個統(tǒng)一的概念（組件）來實(shí)現(xiàn)開發(fā)的模式
現(xiàn)在有一個場景，點(diǎn)擊新增與編輯都彈框出來進(jìn)行填寫，功能上大同小異，可能只是標(biāo)題內(nèi)容或者是顯示的主體內(nèi)容稍微不同
這時候就沒必要寫兩個組件，只需要根據(jù)傳入的參數(shù)不同，組件顯示不同內(nèi)容即可
這樣，下次開發(fā)相同界面程序時就可以寫更少的代碼，意義著更高的開發(fā)效率，更少的 Bug和更少的程序體積
二、需求分析
實(shí)現(xiàn)一個Modal組件，首先確定需要完成的內(nèi)容：
- 遮罩層
- 標(biāo)題內(nèi)容
- 主體內(nèi)容
- 確定和取消按鈕
主體內(nèi)容需要靈活，所以可以是字符串，也可以是一段 html 代碼
特點(diǎn)是它們在當(dāng)前vue實(shí)例之外獨(dú)立存在，通常掛載于body之上
除了通過引入import的形式，我們還可通過API的形式進(jìn)行組件的調(diào)用
還可以包括配置全局樣式、國際化、與typeScript結(jié)合
三、實(shí)現(xiàn)流程
首先看看大致流程：
- 目錄結(jié)構(gòu)
- 組件內(nèi)容
- 實(shí)現(xiàn) API 形式
- 事件處理
- 其他完善
目錄結(jié)構(gòu)
Modal組件相關(guān)的目錄結(jié)構(gòu)
├── plugins
│ └── modal
│ ├── Content.tsx // 維護(hù) Modal 的內(nèi)容，用于 h 函數(shù)和 jsx 語法
│ ├── Modal.vue // 基礎(chǔ)組件
│ ├── config.ts // 全局默認(rèn)配置
│ ├── index.ts // 入口
│ ├── locale // 國際化相關(guān)
│ │ ├── index.ts
│ │ └── lang
│ │ ├── en-US.ts
│ │ ├── zh-CN.ts
│ │ └── zh-TW.ts
│ └── modal.type.ts // ts類型聲明相關(guān)
因?yàn)?Modal 會被 app.use(Modal) 調(diào)用作為一個插件，所以都放在plugins目錄下
組件內(nèi)容
首先實(shí)現(xiàn)modal.vue的主體顯示內(nèi)容大致如下
<Teleport to="body" :disabled="!isTeleport">
<div v-if="modelValue" class="modal">
<div
class="mask"
:style="style"
@click="maskClose && !loading && handleCancel()"
></div>
<div class="modal__main">
<div class="modal__title line line--b">
<span>{{ title || t("r.title") }}</span>
<span
v-if="close"
:title="t('r.close')"
class="close"
@click="!loading && handleCancel()"
>?</span
>
</div>
<div class="modal__content">
<Content v-if="typeof content === 'function'" :render="content" />
<slot v-else>
{{ content }}
</slot>
</div>
<div class="modal__btns line line--t">
<button :disabled="loading" @click="handleConfirm">
<span class="loading" v-if="loading"> ? </span>{{ t("r.confirm") }}
</button>
<button @click="!loading && handleCancel()">
{{ t("r.cancel") }}
</button>
</div>
</div>
</div>
</Teleport>最外層上通過Vue3 Teleport 內(nèi)置組件進(jìn)行包裹，其相當(dāng)于傳送門，將里面的內(nèi)容傳送至body之上
并且從DOM結(jié)構(gòu)上來看，把modal該有的內(nèi)容（遮罩層、標(biāo)題、內(nèi)容、底部按鈕）都實(shí)現(xiàn)了
關(guān)于主體內(nèi)容
<div class="modal__content">
<Content v-if="typeof content==='function'"
:render="content" />
<slot v-else>
{{content}}
</slot>
</div>可以看到根據(jù)傳入content的類型不同，對應(yīng)顯示不同得到內(nèi)容
最常見的則是通過調(diào)用字符串和默認(rèn)插槽的形式
// 默認(rèn)插槽
<Modal v-model="show"
title="演示 slot">
<div>hello world~</div>
</Modal>
// 字符串
<Modal v-model="show"
title="演示 content"
content="hello world~" />通過 API 形式調(diào)用Modal組件的時候，content可以使用下面兩種
- h 函數(shù)
$modal.show({
title: '演示 h 函數(shù)',
content(h) {
return h(
'div',
{
style: 'color:red;',
onClick: ($event: Event) => console.log('clicked', $event.target)
},
'hello world ~'
);
}
});- JSX
$modal.show({
title: '演示 jsx 語法',
content() {
return (
<div
onClick={($event: Event) => console.log('clicked', $event.target)}
>
hello world ~
</div>
);
}
});實(shí)現(xiàn) API 形式
那么組件如何實(shí)現(xiàn)API形式調(diào)用Modal組件呢？
在Vue2中，我們可以借助Vue實(shí)例以及Vue.extend的方式獲得組件實(shí)例，然后掛載到body上
import Modal from './Modal.vue';
const ComponentClass = Vue.extend(Modal);
const instance = new ComponentClass({ el: document.createElement("div") });
document.body.appendChild(instance.$el);雖然Vue3移除了Vue.extend方法，但可以通過createVNode實(shí)現(xiàn)
import Modal from './Modal.vue';
const container = document.createElement('div');
const vnode = createVNode(Modal);
render(vnode, container);
const instance = vnode.component;
document.body.appendChild(container);在Vue2中，可以通過this的形式調(diào)用全局 API
export default {
install(vue) {
vue.prototype.$create = create
}
}而在 Vue3 的 setup 中已經(jīng)沒有 this概念了，需要調(diào)用app.config.globalProperties掛載到全局
export default {
install(app) {
app.config.globalProperties.$create = create
}
}事件處理
下面再看看看Modal組件內(nèi)部是如何處理「確定」「取消」事件的，既然是Vue3，當(dāng)然采用Compositon API 形式
// Modal.vue
setup(props, ctx) {
let instance = getCurrentInstance(); // 獲得當(dāng)前組件實(shí)例
onBeforeMount(() => {
instance._hub = {
'on-cancel': () => {},
'on-confirm': () => {}
};
});
const handleConfirm = () => {
ctx.emit('on-confirm');
instance._hub['on-confirm']();
};
const handleCancel = () => {
ctx.emit('on-cancel');
ctx.emit('update:modelValue', false);
instance._hub['on-cancel']();
};
return {
handleConfirm,
handleCancel
};
}在上面代碼中，可以看得到除了使用傳統(tǒng)emit的形式使父組件監(jiān)聽，還可通過_hub屬性中添加 on-cancel，on-confirm方法實(shí)現(xiàn)在API中進(jìn)行監(jiān)聽
app.config.globalProperties.$modal = {
show({}) {
/* 監(jiān)聽 確定、取消 事件 */
}
}下面再來目睹下_hub是如何實(shí)現(xiàn)
// index.ts
app.config.globalProperties.$modal = {
show({
/* 其他選項(xiàng) */
onConfirm,
onCancel
}) {
/* ... */
const { props, _hub } = instance;
const _closeModal = () => {
props.modelValue = false;
container.parentNode!.removeChild(container);
};
// 往 _hub 新增事件的具體實(shí)現(xiàn)
Object.assign(_hub, {
async 'on-confirm'() {
if (onConfirm) {
const fn = onConfirm();
// 當(dāng)方法返回為 Promise
if (fn && fn.then) {
try {
props.loading = true;
await fn;
props.loading = false;
_closeModal();
} catch (err) {
// 發(fā)生錯誤時，不關(guān)閉彈框
console.error(err);
props.loading = false;
}
} else {
_closeModal();
}
} else {
_closeModal();
}
},
'on-cancel'() {
onCancel && onCancel();
_closeModal();
}
});
}
};其他完善
關(guān)于組件實(shí)現(xiàn)國際化、與typsScript結(jié)合，大家可以根據(jù)自身情況在此基礎(chǔ)上進(jìn)行更改
總結(jié)
到此這篇關(guān)于如何使用Vue3設(shè)計(jì)實(shí)現(xiàn)一個Model組件的文章就介紹到這了,更多相關(guān)Vue3設(shè)計(jì)實(shí)現(xiàn)Model組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文通過實(shí)例代碼給大家介紹了Vue中util的工具函數(shù)，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了Vue項(xiàng)目依賴包安裝及配置過程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
vue使用element-ui的el-date-picker設(shè)置樣式無效的解決
本文主要介紹了vue使用element-ui的el-date-picker設(shè)置樣式無效的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
本文主要介紹了vue中使用scrollTo無效的解決方法，想要使用scrollTo使當(dāng)前網(wǎng)頁滾動到指定位置，本文就來解決一下，具有一定的 參考價值，感興趣的可以了解一下2023-08-08
vscode中vue代碼提示與補(bǔ)全沒反應(yīng)解決(vetur問題)
這篇文章主要給大家介紹了關(guān)于vscode中vue代碼提示與補(bǔ)全沒反應(yīng)解決(vetur問題)的相關(guān)資料,文中通過圖文將解決的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了命令行CLI一鍵生成各種煩人的lint配置實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要為大家介紹了preload對比prefetch的使用區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
Vue實(shí)現(xiàn)將數(shù)據(jù)庫中帶html標(biāo)簽的內(nèi)容輸出(原始HTML(Raw HTML))
今天小編就為大家分享一篇Vue實(shí)現(xiàn)將數(shù)據(jù)庫中帶html標(biāo)簽的內(nèi)容輸出(原始HTML(Raw HTML))，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue項(xiàng)目有時候需要根據(jù)頁面需要動態(tài)的去修改頁面標(biāo)題名稱，本文就來介紹一下，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
webpack+vue+express(hot)熱啟動調(diào)試簡單配置方法
今天小編就為大家分享一篇webpack+vue + express (hot) 熱啟動調(diào)試簡單配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09