如果使用Vue3.0实现一个 Modal,你会怎么进行设计?
一、组件设计
组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式
现在有一个场景,点击新增与编辑都弹框出来进行填写,功能上大同小异,可能只是标题内容或者是显示的主体内容稍微不同
这时候就没必要写两个组件,只需要根据传入的参数不同,组件显示不同内容即可
这样,下次开发相同界面程序时就可以写更少的代码,意义着更高的开发效率,更少的 Bug
和更少的程序体积
二、需求分析
实现一个Modal
组件,首先确定需要完成的内容:
遮罩层
标题内容
主体内容
确定和取消按钮
主体内容需要灵活,所以可以是字符串,也可以是一段 html
代码
特点是它们在当前vue
实例之外独立存在,通常挂载于body
之上
除了通过引入import
的形式,我们还可通过API
的形式进行组件的调用
还可以包括配置全局样式、国际化、与typeScript
结合
三、实现流程
首先看看大致流程:
目录结构
组件内容
实现 API 形式
事件处理
其他完善
目录结构
Modal
组件相关的目录结构
├── 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
的主体显示内容大致如下
<Teleport to="body" :disabled="!isTeleport"><div v-if="modelValue" class="modal"><divclass="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><spanv-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
该有的内容(遮罩层、标题、内容、底部按钮)都实现了
关于主体内容
<div class="modal__content"><Content v-if="typeof content==='function'":render="content" /><slot v-else>{{content}}</slot>
</div>
可以看到根据传入content
的类型不同,对应显示不同得到内容
最常见的则是通过调用字符串和默认插槽的形式
// 默认插槽
<Modal v-model="show"title="演示 slot"><div>hello world~</div>
</Modal>// 字符串
<Modal v-model="show"title="演示 content"content="hello world~" />
通过 API 形式调用Modal
组件的时候,content
可以使用下面两种
- h 函数
$modal.show({title: '演示 h 函数',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 (<divonClick={($event: Event) => console.log('clicked', $event.target)}>hello world ~</div>);}
});
实现 API 形式
那么组件如何实现API
形式调用Modal
组件呢?
在Vue2
中,我们可以借助Vue
实例以及Vue.extend
的方式获得组件实例,然后挂载到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
实现
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
export default {install(vue) {vue.prototype.$create = create}
}
而在 Vue3 的 setup
中已经没有 this
概念了,需要调用app.config.globalProperties
挂载到全局
export default {install(app) {app.config.globalProperties.$create = create}
}
事件处理
下面再看看看Modal
组件内部是如何处理「确定」「取消」事件的,既然是Vue3
,当然采用Compositon API
形式
// 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
中进行监听
app.config.globalProperties.$modal = {show({}) {/* 监听 确定、取消 事件 */}
}
下面再来目睹下_hub
是如何实现
// 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();// 当方法返回为 Promiseif (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
结合,大家可以根据自身情况在此基础上进行更改
如果使用Vue3.0实现一个 Modal,你会怎么进行设计?相关推荐
- vue3.0封装一个图标选择组件
基于vite2.0+vue3.0项目写了一个图标选择器,项目引入对应的css字体文件就行,支持模糊搜索 项目的文件目录 1.IconPicker.vue <template><d ...
- Vue3.0笔记(B站天禹老师)
Vue3快速上手 1.Vue3简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) 耗时2年多.2600+次提交.30+个RFC.600+次PR.99位贡献者 g ...
- Vue3.0尚硅谷(讲师:张天禹)视频学习笔记
一.创建Vue3.0工程 1.使用vue-cli创建 官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create ...
- Vue3.0中的变化
1.Vue3 简介 2020 年 9 月 18 日,Vue.js 发布 3.0 版本,代号:One Piece(海贼王) 2.Vue3 带来了什么 1.性能的提升 打包大小减少 41% 初次渲染快 5 ...
- Vue3.0基础(一)
Vue3快速上手 1.Vue3简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) 耗时2年多.2600+次提交.30+个RFC.600+次PR.99位贡献者 g ...
- vue3.0 php,使用Vue3.0收获的知识点(一)
前端发展百花放,一技未熟百技出. 茫然不知何下手,关注小编胜百书. 近期工作感觉很忙,都没有多少时间去写文章,今天这篇文章主要是将自己前期学习Vue3.0时候整理的一些笔记内容进行了汇总,通过对本文的 ...
- 学习Vue3.0,先从搭建环境开始
Bug源测试,上线来几个.愿君多修改,今夜眼难合. 这是小编关于Vue3.0系列文章的第二篇,本文将带您从零搭建一个基于Vue3.0与vite的Vue3.0开发环境,通过本文的学习,你将学习到以下内容 ...
- 如何搭建一个完整的Vue3.0 + ts 的项目
如何搭建一个完整的Vue3.0 + ts 的项目 相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正 ...
- 【Vue3.0实战逐步深入系列】扩展投票功能基于elementui进行组件封装实现一个简单的问卷调查功能
[千字长文,熬夜更新,原创不易,多多支持,感谢大家] 前言 小伙伴们大家好.在前面一偏文章中我们把投票功能进行了简单的改造:引入了axios第三方库并进行了二次封装用于模拟请求服务器数据.同时添加了一 ...
最新文章
- python全排列字典序输出 递归_全排列-字典序列、递归方法c语言实现
- boost::sort模块实现在大多数排序的数组示例上展开排序
- 改变世界的十位算法大师
- websocket(二)--简单实现网页版群聊
- 谷歌大脑推出机器人强化学习平台,硬件代码全开源,花最少的钱,训超6的机器人...
- 【论文阅读】Deep Neural Networks for Learning Graph Representations | day14,15
- C++之STL种类及实现
- pyinstaller相关错误
- 按shift键调出命令行的脚本
- JSON时间转换格式化
- c++求平均值_2020五一建模:C题 饲料混合加工(二)
- 高数 | 旋转体体积计算方法汇总、二重积分计算旋转体体积
- C# 设置Word文本框中的文字旋转方向
- All the python knowledge that I come across
- 第九周课堂作业 包括建表 进行各种查询
- iOS 第三方登录之 微信登录
- 海马模拟器怎么连接android studio
- [Error]新用户第一次启动APP时网络请求失败
- 电子时钟的设计与实现
- 第三次人工智能热潮和企业SaaS