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组件的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vue接收网络请求数据类型配置(vue中对接Graphql接口的实现示例)
- vue移动端图片放大效果实现(vue实现图片切换效果)
- vue动态列表布局(vue项目实现左滑删除功能完整代码)
- vue数据改变页面不刷新(vue列表数据删除后主动刷新页面及刷新方法详解)
- vue开发的购物车0.1加0.2(vue实现可改变购物数量的购物车)
- vue3.0 黑暗风格(Vue3.0 手写放大镜效果)
- vue统计代码行数(vue实现计数器简单制作)
- vue如何检查数组变化(Vue2中无法检测到数组变动的原因及解决)
- 数组循环遍历展示vue(Vue中foreach数组与js中遍历数组的写法说明)
- vue.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- vue实现树形结构菜单(vue递归实现三级菜单)
- vuekeep-alive源码(vue中keepAlive组件的作用和使用方法详解)
- vue用手动上传图片(vue上传图片文件的多种实现方法)
- vuex存取修改数据流程(vuex数据持久化的两种实现方案)
- vue实现pc聊天页面(vue实现web在线聊天功能)
- vue移动端页面不能上下滑动(vue移动端实现左滑编辑与删除的全过程)
- 四川旅游攻略(四川旅游攻略自由行攻略)
- 上海迪士尼攻略(上海迪士尼攻略旅游)
- 哪里可以看熊猫(成都哪里可以看熊猫)
- oppo手机的三种录屏方法,你知道有哪些吗(oppo手机的三种录屏方法)
- 吉林神秘传染链跨省 传染源尚未找到,舒兰 封城(吉林神秘传染链跨省)
- 吉林舒兰 封城 聚集性疫情传播链已延至沈阳,有一个细节让人忧心(吉林舒兰封城)
热门推荐
- python线程池如何实现同步(Python mutiprocessing多线程池pool操作示例)
- phpstudymysql数据库启动不了(phpstudy mysql启动不了的解决方法)
- mysql中使用show table status 查看表信息
- Tomcat和Weblogic部署纯html文件过程解析(Tomcat和Weblogic部署纯html文件过程解析)
- php支付接口(PHP实现的支付宝支付功能示例)
- 香港服务器有哪些优势呢(浅谈香港服务器与香港云主机的区别)
- html正则表达式案例(关于html字符串正则判断和匹配的具体使用)
- 如何认识服务器(关于Nginx、Apache、Tomcat三个WEB服务器的区别和认知)
- truncate和delete(delete、truncate、drop的区别以及该如何选择)
- dockerfile镜像案例(Dockerfile构建自定义镜像的实现)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9