Vue实现消息提示功能

devtools/2024/11/20 4:58:31/

1.首先要先定义消息提示的组件,在这个组件中需要实现自动关闭的功能(看自己的爱好呗),并且设置自己喜欢的样式,vue中还有可以自定义进场和退场动画的样式(就是那个v-enter-active和v-leave-active)。这里还可以通过definePorps在外部设置属性值

javascript"><template><div class="message" v-if="display"><div class="content"><div>Message组件实例</div><div class="close" @click="close">X</div></div></div></template>
<script setup>import { ref, onMounted } from 'vue';let display = ref(false);function close() {display.value = false}onMounted(() => {display.value = true;setTimeout(() => {display.value = false;}, 5000)})
</script>
<style>.content {display: flex;position: relative;transform: translateY(-50%);top: 50%;}.message {border: 3px skyblue solid;border-radius: 20px;width: fit-content;height: 30px;text-align: center;padding: 10px;position: relative;transform: translateX(-50%);left: 50%;}.close {margin-left: 20px;font-weight: 700;padding: 2px;border: 1px solid red;background-color: red;}
</style>

2. 通过h函数和render函数实现组件的挂载

首先需要通过h函数创建组件的虚拟节点,h函数有多个重写方法(h函数的具体用法),这里用的直接传入一个节点(也就是自定义的组件),h函数会有一个VNode的返回值,通过render渲染函数进行渲染,然后将div挂载到body上,最后将这个函数导出

javascript">import Message from './Message.vue'
import { h, render } from 'vue'
export function createMessage() {const div = document.createElement("div");render(h(Message), div);document.body.appendChild(div)
}

3.使用

这里实现的是最简单的消息提示,正常来说应该用props来传递属性(比如传递的消息内容等等)。

javascript">    import { createMessage } from './message/Message.js'createMessage();

例如说这样

javascript"><template><div class="message" v-if="display"><div class="content"><div>{{message}}</div><div class="close" @click="close">X</div></div></div>
</template>
<script setup>import { ref, onMounted } from 'vue';const { message } = defineProps(["message"])
</script>
javascript">import Message from './Message.vue'
import { h, render } from 'vue'
export function createMessage({ Msg = "消息提示" }) {const div = document.createElement("div");render(h(Message, { message: Msg }), div);document.body.appendChild(div)
}
javascript"><script setup>import { createMessage } from './message/Message.js'createMessage({ Msg: "Hello World" });
</script><template>
</template>

这样就可以实现一个简单的消息传递,但是功能非常的不全,例如当多次触发后,提示框会聚在一起,并且触发后HTML元素并不会删除(所以我为什么不用Element呢.......),可以当成对Vue渲染函数的练手使用


http://www.ppmy.cn/devtools/135390.html

相关文章

python核心语法

目录 核⼼语法第⼀节 变量0.变量名规则1.下⾯这些都是不合法的变量名2.关键字3.变量赋值4.变量的销毁 第⼆节 数据类型0.数值1.字符串2.布尔值(boolean, bool)3.空值 None 核⼼语法 第⼀节 变量 变量的定义变量就是可变的量&#xff0c;对于⼀些有可能会经常变化的数据&#…

【Linux】多线程(中)

目录 一、线程互斥 1.1 互斥概念 1.2 互斥量mutex 1.3 互斥量相关API &#xff08;1&#xff09;初始化互斥量 &#xff08;2&#xff09;销毁互斥量 &#xff08;3&#xff09;互斥量加锁和解锁 1.4 互斥量原理 1.5 重入和线程安全 二、死锁 2.1 概念 2.2 造成死锁…

SQL,力扣题目1126,查询活跃业务

一、力扣链接 LeetCode_1126 二、题目描述 事件表&#xff1a;Events ------------------------ | Column Name | Type | ------------------------ | business_id | int | | event_type | varchar | | occurrences | int | ------------------------…

力扣 简单 70.爬楼梯

文章目录 题目介绍题解 题目介绍 题解 思路分析&#xff1a; 确定dp数组以及下标的含义&#xff1a;dp[i]&#xff1a; 爬到第i层楼梯&#xff0c;有dp[i]种方法确定递推公式&#xff1a;从dp[i]的定义可以看出&#xff0c;dp[i] 可以有两个方向推出来。首先是dp[i - 1]&…

基于YOLOv8深度学习的婴儿情绪状态检测系统(PyQt5界面+数据集+训练代码)

婴儿的情绪状态是其表达健康状况、情感需求以及与外界互动的重要方式&#xff0c;准确识别婴儿的情绪对父母和看护者理解其需求具有关键意义。然而&#xff0c;由于婴儿语言能力的缺乏&#xff0c;他们通常通过面部表情、动作和哭声等非语言行为来表达情绪&#xff0c;因此需要…

学习笔记019——Ubuntu部署tomcat

1、下载Tomcat压缩包。本人下载的版本是&#xff1a;apache-tomcat-8.5.77.tar.gz 2、将压缩包上传到Ubuntu某个目录。 本人存放的目录是 /opt 目录下, 命令解压&#xff1a; ## 解压tomcat压缩包 tar -zxvf apache-tomcat-8.5.77.tar.gz 3、vim打开bin目录的setclasspath…

ARM64环境部署EFK8.15.3收集K8S集群容器日志

环境规划 主机IP系统部署方式ES版本CPU架构用户名密码192.168.1.225Ubuntu 22.04.4 LTSdockerelasticsearch:8.15.3ARM64elasticllodyi4TMmZD ES集群部署 创建持久化目录(所有节点) mkdir -p /data/es/{data,certs,logs,plugins} mkdir -p /data/es/certs/{ca,es01}服务器…

SpringBoot整合ELK使用详解

SpringBoot整合ELK使用详解 在微服务架构中&#xff0c;日志系统的搭建和管理是至关重要的一环。ELK&#xff08;Elasticsearch、Logstash、Kibana&#xff09;作为一种强大的日志处理方案&#xff0c;能够帮助我们高效地收集、存储、处理和可视化日志数据。本文将详细介绍如何…