vue可以使用模态框modal吗(vue基于Teleport实现Modal组件)
类别:编程学习 浏览量:2686
时间:2022-01-20 00:05:10 vue可以使用模态框modal吗
vue基于Teleport实现Modal组件目录
- 1.认识Teleport
- 2.Teleport的基本用法
- 3.第一步优化
- 4.第二步优化
- 5.实现Modal组件
像我们如果写Modal组件、Message组件、Loading组件这种全局式组件,没有Teleport的话,将它们引入一个.vue文件中,则他们的HTML结构会被添加到组件模板中,这是不够完美的。
- 没有Teleport
- 有Teleport
下面就实战介绍一下如何用Teleport开发Modal组件
2.Teleport的基本用法Teleport的写法十分简单,只需要用<Teleport></Teleport>将内容包裹,并用to指定将HTML挂到哪个父节点下,就可以啦。
<teleport to="#modal"> 内容 </teleport>
如果我们在代码中将Teleport要挂载的DOM写死,那么每创建一个全局式组件,就需要有一个DOM节点,会越来越多,并且一直存在,这样的写法不是很优雅。比较好的解决方案就是:
- 在创建组件的时候,动态创建一个dom节点document.createElement(),
- 并添加到body中,document.body.appendChild(),
- 在组件卸载的时候销毁这个dom document.body.removeChild(),
setup(){ const node = document.createElement('li') node.id = 'modal' document.body.appendChild(node) onUnmounted(() => { document.body.removeChild(node) }) }
如果我们后续还要添加Message组件,Loading组件等功能,同样要用到Teleport,在每一个组件内部都写这么一段代码,实在有点冗余,vue3使我们能够很方便的将逻辑功能提取出来,从而达到逻辑复用的目的。
我们在src-hooks文件夹下创建useDOMCreate.ts文件,来封装这一块逻辑
// hooks/useDOMCreate.ts import { onUnmounted } from 'vue' function useDOMCreate(nodeId:string):void { const node = document.createElement('li') node.id = nodeId document.body.appendChild(node) onUnmounted(() => { document.body.removeChild(node) }) } export default useDOMCreate
使用:
import useDOMCreate from '../hooks/useDOMCreate' setup(props, ctx) { useDOMCreate('modal') }
具体封装Modal组件的细节这里就不讲啦,也没有什么复杂的逻辑。直接上代码。
//Modal.vue <template> <teleport to="#modal"> <li class="modal d-block" tabindex="-1" v-if="isVisible"> <li class="modal-dialog"> <li class="modal-content"> <li class="modal-header"> <h5 class="modal-title">{{title}}</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true" @click="onClose">×</span> </button> </li> <li class="modal-body"> <slot></slot> </li> <li class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="onClose">取消</button> <button type="button" class="btn btn-primary" @click="onConfirm">确定</button> </li> </li> </li> </li> </teleport> </template> <script lang="ts"> import { defineComponent } from 'vue' import useDOMCreate from '../hooks/useDOMCreate' export default defineComponent({ name: 'Modal', emits: ['model-close', 'model-confirm'], props: { title: { type: String, default: '' }, isVisible: { type: Boolean, default: false } }, setup(props, ctx) { useDOMCreate('modal') const onClose = () => { ctx.emit('model-close') } const onConfirm = () => { ctx.emit('model-confirm') } return { onClose, onConfirm } } }) </script>
使用示例
<template> <li class="post-detail-page"> <button type="button" class="btn btn-danger" @click="handleDelete">删除</button> <modal title='是否确认删除?' :isVisible="modalVisible" @model-close="hanldeModalClose" @model-confirm="handleModalConfim"> <p>确认要删除这篇文章吗?</p> </modal> </li> </template> <script lang="ts"> import { defineComponent, ref } from 'vue' import Modal from '../components/Modal.vue' export default defineComponent({ name: 'post-detail', components: { Modal }, setup() { const modalVisible = ref(false) const handleDelete = () => { modalVisible.value = true } const hanldeModalClose = () => { modalVisible.value = false } const handleModalConfim = () => { modalVisible.value = false ... / /后续逻辑处理 } return { hanldeModalClose, handleModalConfim, handleDelete, modalVisible } } }) </script>
以上就是vue基于Teleport实现Modal组件的详细内容,更多关于vue Teleport实现Modal组件的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vue3 axios 怎么封装api(vue中如何简单封装axios浅析)
- vue创建dom节点(Vue批量更新dom的实现步骤)
- vue设置div大小(Vue实现div滚轮放大缩小)
- vue 选中背景高亮(vue 如何设置背景颜色及透明度)
- vue树形表格内容太长(VUE 无限层级树形数据结构显示的实现)
- vue实现商品详情讲解(京东 Vue3 组件库支持小程序开发的详细流程)
- vue实现pc聊天页面(vue实现web在线聊天功能)
- vue可以使用模态框modal吗(vue基于Teleport实现Modal组件)
- vue代码和element用法(Vue Element前端应用开发之整合ABP框架的前端登录)
- vue前端搜索功能如何实现(使用Vue3+Vant组件实现App搜索历史记录功能示例代码)
- vue计算两个日期差几分钟(vue实现同时设置多个倒计时)
- vue3 composition api用法(vue3中provide和inject的使用)
- vuex中action的值怎么接(vuex中Getter的用法详解)
- vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)
- vue定时器中间变颜色(Vue如何优雅的清除定时器)
- vue怎么实现预览与放大(Vue实现牌面翻转效果)
- 节日我在岗|警景相融 平安相伴(节日我在岗警景相融)
- 战 疫 时刻 致敬每一位石化大学的 守护者(战疫时刻)
- 老弄堂里的市井味道(老弄堂里的市井味道)
- 小米音乐可绑定QQ音乐, QQ音乐 真的会消失在小米的设备上吗(小米音乐可绑定QQ音乐)
- 小米Watch S1评测 或许能成为小米冲击高端可穿戴设备的里程碑(小米WatchS1评测或许能成为小米冲击高端可穿戴设备的里程碑)
- 手机QQ与小米路由器在一起 明天揭晓,敬请期待(手机QQ与小米路由器在一起)
热门推荐
- smarty模板的使用方法实例分析(smarty模板的使用方法实例分析)
- python中可以改变的数据类型(Python常见数据类型转换操作示例)
- django 页面传参数(django query模块)
- 云服务器50g月流量(云服务器怎么查看流量使用情况?)
- sqlserver表空间占用率(SQL Server获取磁盘空间使用情况)
- 微信小程序单选框组件(微信小程序picker多列选择器mode = multiSelector)
- docker前端项目(Docker部署Nuxt.js项目的实现)
- js宏任务都有哪些(JavaScript 操作宏任务与微任务)
- pythondict排序原理(Python标准库使用OrderedDict类的实例讲解)
- python读取文件怎么用(Python基础之文件读取的讲解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9