用Vue3.0 写过组件吗?如果想实现一个 Modal你会怎么设计?
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
一、组件设计
组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式
现在有一个场景,点击新增与编辑都弹框出来进行填写,功能上大同小异,可能只是标题内容或者是显示的主体内容稍微不同
这时候就没必要写两个组件,只需要根据传入的参数不同,组件显示不同内容即可
这样,下次开发相同界面程序时就可以写更少的代码,意义着更高的开发效率,更少的 Bug
和更少的程序体积
二、需求分析
实现一个Modal
组件,首先确定需要完成的内容:
-
遮罩层
-
标题内容
-
主体内容
-
确定和取消按钮
主体内容需要灵活,所以可以是字符串,也可以是一段 html
代码
特点是它们在当前vue
实例之外独立存在,通常挂载于body
之上
除了通过引入import
的形式,我们还可通过API
的形式进行组件的调用
还可以包括配置全局样式、国际化、与typeScript
结合
三、实现流程
首先看看大致流程:
-
目录结构
-
组件内容
-
实现 API 形式
-
事件处理
-
其他完善
目录结构
Modal
组件相关的目录结构
1 2 3 4 5 6 7 8 9 10 11 12 13 | ├── plugins │ └── modal │ ├── Content.tsx // 维护 Modal 的内容,用于 h 函数和 jsx 语法 │ ├── Modal.vue // 基础组件 │ ├── config.ts // 全局默认配置 │ ├── index.ts // 入口 │ ├── locale // 国际化相关 │ │ ├── index.ts │ │ └── lang │ │ ├── en-US.ts │ │ ├── zh-CN.ts │ │ └── zh-TW.ts │ └── modal.type.ts // ts类型声明相关 |
因为 Modal 会被 app.use(Modal)
调用作为一个插件,所以都放在plugins
目录下
组件内容
首先实现modal.vue
的主体显示内容大致如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <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
内置组件进行包裹,其相当于传送门,将里面的内容传送至body
之上
并且从DOM
结构上来看,把modal
该有的内容(遮罩层、标题、内容、底部按钮)都实现了
关于主体内容
1 2 3 4 5 6 7 | <div class = "modal__content" > <Content v- if = "typeof content==='function'" :render= "content" /> <slot v- else > {{content}} </slot> </div> |
可以看到根据传入content
的类型不同,对应显示不同得到内容
最常见的则是通过调用字符串和默认插槽的形式
1 2 3 4 5 6 7 8 9 10 | // 默认插槽 <Modal v-model= "show" title= "演示 slot" > <div>hello world~</div> </Modal> // 字符串 <Modal v-model= "show" title= "演示 content" content= "hello world~" /> |
通过 API 形式调用Modal
组件的时候,content
可以使用下面两种
- h 函数
1 2 3 4 5 6 7 8 9 10 11 12 13 | $modal.show({ title: '演示 h 函数' , content(h) { return h( 'div' , { style: 'color:red;' , onClick: ($ event : Event) => console.log( 'clicked' , $ event .target) }, 'hello world ~' ); } }); |
- JSX
1 2 3 4 5 6 7 8 9 10 11 12 | $modal.show({ title: '演示 jsx 语法' , content() { return ( <div onClick={($ event : Event) => console.log( 'clicked' , $ event .target)} > hello world ~ </div> ); } }); |
实现 API 形式
那么组件如何实现API
形式调用Modal
组件呢?
在Vue2
中,我们可以借助Vue
实例以及Vue.extend
的方式获得组件实例,然后挂载到body
上
1 2 3 4 | 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
实现
1 2 3 4 5 6 | 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
的形式调用全局 API
1 2 3 4 5 | export default { install(vue) { vue.prototype.$create = create } } |
而在 Vue3 的 setup
中已经没有 this
概念了,需要调用app.config.globalProperties
挂载到全局
1 2 3 4 5 | export default { install(app) { app.config.globalProperties.$create = create } } |
事件处理
下面再看看看Modal
组件内部是如何处理「确定」「取消」事件的,既然是Vue3
,当然采用Compositon API
形式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | // Modal.vue setup(props, ctx) { let instance = getCurrentInstance(); // 获得当前组件实例 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 }; } |
在上面代码中,可以看得到除了使用传统emit
的形式使父组件监听,还可通过_hub
属性中添加 on-cancel
,on-confirm
方法实现在API
中进行监听
1 2 3 4 5 | app.config.globalProperties.$modal = { show({}) { /* 监听 确定、取消 事件 */ } } |
下面再来目睹下_hub
是如何实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | // index.ts app.config.globalProperties.$modal = { show({ /* 其他选项 */ onConfirm, onCancel }) { /* ... */ const { props, _hub } = instance; const _closeModal = () => { props.modelValue = false ; container.parentNode!.removeChild(container); }; // 往 _hub 新增事件的具体实现 Object.assign(_hub, { async 'on-confirm' () { if (onConfirm) { const fn = onConfirm(); // 当方法返回为 Promise if (fn && fn.then) { try { props.loading = true ; await fn; props.loading = false ; _closeModal(); } catch (err) { // 发生错误时,不关闭弹框 console.error(err); props.loading = false ; } } else { _closeModal(); } } else { _closeModal(); } }, 'on-cancel' () { onCancel && onCancel(); _closeModal(); } }); } }; |
其他完善
关于组件实现国际化、与typsScript
结合,大家可以根据自身情况在此基础上进行更改
参考文献
- https://segmentfault.com/a/1190000038928664
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
2023-03-08 记录--服务端推送到Web前端有哪几种方式?