vue基于Teleport实现Modal组件


Posted in Vue.js onMay 31, 2021

1.认识Teleport

像我们如果写Modal组件、Message组件、Loading组件这种全局式组件,没有Teleport的话,将它们引入一个.vue文件中,则他们的HTML结构会被添加到组件模板中,这是不够完美的。

  • 没有Teleport

vue基于Teleport实现Modal组件

  • 有Teleport

vue基于Teleport实现Modal组件

下面就实战介绍一下如何用Teleport开发Modal组件

2.Teleport的基本用法

Teleport的写法十分简单,只需要用<Teleport></Teleport>将内容包裹,并用to指定将HTML挂到哪个父节点下,就可以啦。

<teleport to="#modal">
内容
</teleport>

3.第一步优化

如果我们在代码中将Teleport要挂载的DOM写死,那么每创建一个全局式组件,就需要有一个DOM节点,会越来越多,并且一直存在,这样的写法不是很优雅。比较好的解决方案就是:

  • 在创建组件的时候,动态创建一个dom节点document.createElement(),
  • 并添加到body中,document.body.appendChild(),
  • 在组件卸载的时候销毁这个dom document.body.removeChild(),
setup(){
  const node = document.createElement('div')
  node.id = 'modal'
  document.body.appendChild(node)
  onUnmounted(() => {
    document.body.removeChild(node)
  })
}

4.第二步优化

如果我们后续还要添加Message组件,Loading组件等功能,同样要用到Teleport,在每一个组件内部都写这么一段代码,实在有点冗余,vue3使我们能够很方便的将逻辑功能提取出来,从而达到逻辑复用的目的。

我们在src-hooks文件夹下创建useDOMCreate.ts文件,来封装这一块逻辑

// hooks/useDOMCreate.ts
import { onUnmounted } from 'vue'

function useDOMCreate(nodeId:string):void {
  const node = document.createElement('div')
  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')
}

5.实现Modal组件

具体封装Modal组件的细节这里就不讲啦,也没有什么复杂的逻辑。直接上代码。

//Modal.vue
<template>
  <teleport to="#modal">
    <div class="modal d-block" tabindex="-1" v-if="isVisible">
      <div class="modal-dialog">
        <div class="modal-content">
          <div 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">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <slot></slot>
          </div>
          <div 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>
          </div>
        </div>
      </div>
    </div>
  </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>
  <div 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>
  </div>
</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.js 相关文章推荐
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
vue实现简易音乐播放器
Aug 14 Vue.js
Vue+Element UI实现概要小弹窗的全过程
vue-cli4.5.x快速搭建项目
Vue CLI中模式与环境变量的深入详解
springboot+VUE实现登录注册
May 27 #Vue.js
vue+springboot实现登录验证码
vue+spring boot实现校验码功能
May 27 #Vue.js
vue-cropper组件实现图片切割上传
May 27 #Vue.js
You might like
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
php网上商城购物车设计代码分享
2012/02/15 PHP
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
python编写暴力破解FTP密码小工具
2014/11/19 Python
python定时关机小脚本
2018/06/20 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
学生打架检讨书
2014/02/14 职场文书
超市国庆节促销方案
2014/02/20 职场文书
担保书怎么写
2014/04/01 职场文书
2014年工程工作总结
2014/11/25 职场文书
赞助商致辞
2015/07/30 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书