Vue3 实现一个自定义toast(小弹窗)(二)

简介: Vue3 实现一个自定义toast(小弹窗)

四. Toast居中的思路


1.现在我们可以不设置Toast的宽度,并且拿到根据文字数量不同所变化的宽度。由于这个属性是组件挂载完毕以后才有的属性,那么我们可以在onMounted里拿到。首先需要拿到元素本身,这里采用打ref的方式。

image.png

具体变量和代码如下:不过多赘述

image.png

然后我们需要通过一个计算属性动态的计算出该组件的样式;

image.png

ok,这样就实现了居中的效果。并且不管我们如何改变内容都没关系。居中效果是动态计算获得的,并不是一开始就写死的。

ca6bc3a5f3fa42d0861103da71c71666_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.JPG

五. Toast三个出现位置的思路


有些场景下Toast出现在底部并不是特别合适,所以我们还要考虑出现位置的问题。这里简单设计另外两个,一个中间,一个偏顶部。实现起来也比较简单。我们让它toastWrapperStyle计算top的偏移量也是一个动态计算的就可以了。

image.png

我们就可以在后面给这个组件传递参数来控制具体的位置在哪里。 这个目前的代码还动态的展示效果,我们慢慢在后面体现。

tips:下面的章节是本文全篇重点

六*. h()函数的使用


  1. 我们创建一个toastCreator.ts的文件,便于函数式调用展示Toast组件。

image.png

准备如下内容,这里需要用到前面所提到的h(),还有render()render你暂且可以理解为给你返回一个真实的DOM。因为h() 是生成虚拟dom的,但是我们最终展示到页面的是真实dom,我们之前不用在<template>标签内不用执行render是因为Vue帮你调用了render()。但是我们在这里相当于手动实现一个Vue的渲染过程,所以我们也同时需要用到这个函数。

image.png

同时把同文件夹下刚刚写好的Toast.vue引入。class相关的知识不是本文的重点,不了解的需要自行去查阅相关知识,这点很重要。

增加了一个duration选项,也就是持续时间,效果为Toast,在页面出现多少秒后自动消失。

然后我们需要编写一个这个类本身的方法,名为present()(这里借鉴了ionicToast组件的调用名称。) 这一步是重点,也是比较难理解的一个点。
1.首先我们需要自己创建一个Vnode,经过翻阅官网。(注意我们着重看JS的文件)。

image.png

2.我们得知,原来h() 函数可以直接接收一个组件模板作为参数。那么我们可以这样写:

image.png

这样变量myToast就是一个Vnode了。

3.然后再调用引入的render() 函数,我们自然而言的会想到这样写。

image.png

image.png

但是好像不太对劲啊,怎么报错了呢?看一下报错信息,原来render() 函数需要接收两个参数。第一个参数是Vnode,第二个参数是套在Vnode的真实dom。

让我们创建并且加上一层外壳containner。其实就是一个普通的div标签。如下:

image.png

在这里要强调一下,你创建的虚拟节点必须包裹一层真实的DOM作为容器。

这样正好对应,为什么Vue或者React组项目的根目录都会有一个.html文件,并且还有一个根div标签的原因。 因为render() 函数需要。(想更深入了解原理的可以翻看源码,不再过多赘述。)

image.png

七. 如何传递props?


  1. Vnode真实DOM都有了,那我们如何传递props呢?

image.png

2.这里不卖官子,先给结果,我们需要改造一下我们刚刚写的h() 函数。

image.png

这样即可将调用构造函数时传递的参数转换为该组件的props。 由于篇幅限制,具体细节大家仔细阅读为上面贴出来的Vue官方文档。

八. 挂载真实DOM到页面上


都是基础的知识,不过多解释了,代码如下:

image.png

九. 持续时间的控制


编写dismiss() 方法。非常简单,直接移除这个节点即可。

image.png

持续时间如何控制呢? 和时间挂钩,自然而然可以想到setTimout()。实现原理其实也是非常简单。在特定的时间,调用dismiss() 方法即可

image.png

十. Toast自定义组件的使用方法


  1. 忘了写message属性了,我们补充一下

image.png

  1. 然后在App.vue文件引入

image.png

随手写一个<button>标签。

image.png

效果如下:

a1cb9652d73e4725845c5461014d5ccf_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.jpg

3.测试一下 position:top

image.png

b01463df03e64dc19f96197a38881fac_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.jpg

十一. 增加淡出的效果


我们项目不需要淡入,所以我就没做,不过和淡出是如出一辙,在这里我讲一下大致思路。 只需在dismiss() 函数执行前,增加一个透明效果,这里使用的是增加类名,只不过这个动画名称是搭配tailWind来完成的,你也可以使用别的方法,我的方法并不是最好的,原理思路是一致的

  1. tailwind.config.js下设置全局动画样式。

image.png

这里需要注意!!你的动画持续时间要和dismiss()函数的setTimeout参数一致,不然会出现意想不到的效果。动画结束了,结果组件又出现啦。

2.再调用document.doby.removeChild方法之前,让我们的组件在0.5s内透明度变为0,然后再移除组件,就完美实现了淡出的效果。

image.png

最终效果如下:

0a43d94df8b046328bda173e2d2b5625_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.jpg

相关文章
|
26天前
|
JavaScript API 数据处理
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
99 3
|
2月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
57 8
|
2月前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
52 1
|
2月前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
58 1
|
20天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
110 1
|
1月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
56 1
vue学习第一章
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
52 1
|
2月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
46 1
vue学习第四章
|
2月前
|
JavaScript 前端开发 算法
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
40 1
vue学习第7章(循环)