Vue实现消息提示功能

embedded/2024/11/20 3:13:41/

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/embedded/138949.html

相关文章

常见网络厂商设备默认用户名/密码大全

常见网络厂商的默认用户名/密码 01 思科 (Cisco) 设备类型&#xff1a;路由器、交换机、防火墙、无线控制器 默认用户名&#xff1a;cisco 默认密码&#xff1a;cisco 设备类型&#xff1a;网管型交换机 默认用户名&#xff1a;admin 默认密码&#xff1a;admin 02 华…

鸿蒙HarmonyOS 地图定位到当前位置 site查询等操作

应用服务Map使用 地图定位 地点查询及导航 周边查询 点位标记定义等 地图定位 前提地图已经能正常显示&#xff0c;若不能显示请大家参考之前的那篇如何显示地图的博文 地图相关的api 位置效果图&#xff1a; module.json5配置权限 "requestPermissions": [{&…

Ubuntu24.04上安装和配置MySQL8.4.3

Ubuntu24.04上安装和配置MySQL8.4.3 #MySQL 的 APT 配置工具包:https://repo.mysql.com/&#xff0c;最新版的就是这个了 wget https://repo.mysql.com/mysql-apt-config_0.8.33-1_all.deb#输入这条命令&#xff0c;然后选择OK sudo dpkg -i mysql-apt-config_0.8.33-1_all.de…

CSS3_过渡(八)

1、过渡 1.1 过渡的基本使用 在需要过渡属性的元素内开启过渡属性&#xff0c;同时设置过渡时间以保证过渡效果的出现&#xff1b; 只有值为数字或者属性能转换为数字的属性才支持过渡。 <!DOCTYPE html> <html lang"zh-CN"><head><meta chars…

高级java每日一道面试题-2024年11月12日-框架篇[SpringBoot篇]-SpringBoot中的监视器是什么?

如果有遗漏,评论区告诉我进行补充 面试官: SpringBoot中的监视器是什么? 我回答: 一、监视器的概念 在SpringBoot中&#xff0c;监视器是一种用于监视应用程序运行状态和性能的组件。它可以收集关于应用程序的各种指标和统计数据&#xff0c;并将其展示在一个可视化的仪表…

react 中 useReducer Hook 作用

一、状态管理的替代方案 1. 与 useState 对比 useState是最基本的状态管理钩子。useReducer提供了一种更可预测的状态管理方式。 2. 基本用法示例 例如&#xff1a;用于一个简单的计数器应用。 import React, { useReducer } from "react";const counterReducer…

Golang基础教程

一、go语言结构&#xff1a; 1.1.运行Hello World&#xff01; package main import "fmt" func main() {fmt.Println("Hello World&#xff01;") }二、go基础语法 2.1 fmt.Println会自动换行 package main import "fmt" func main() {fmt.Pr…

Git 常用命令大全与详解

Git 是一种广泛使用的分布式版本控制系统。无论是管理个人项目还是进行团队协作&#xff0c;掌握 Git 的常用命令都是开发者必备的技能之一。本文将介绍一些常用的 Git 命令&#xff0c;并对其进行详细说明。 1. 基础命令 初始化仓库 git init&#xff1a;在当前目录下初始化…