当前位置: 首页 > news >正文

vue3鼠标经过显示按钮

在前端开发中,我们经常需要在页面中添加一些交互效果来提升用户体验。其中一个常见的需求就是鼠标经过某个元素时显示一个按钮,这个按钮可以用于触发一些操作或者显示更多的内容。

在本篇文章中,我将会介绍如何使用 Vue3 实现一个鼠标经过显示按钮的效果,同时还会涉及一些 Vue3 的基本用法和特性。让我们开始吧!

创建 Vue3 项目

首先,我们需要创建一个 Vue3 项目。可以使用 Vue CLI 来快速创建一个 Vue3 项目,具体步骤如下:

  1. 安装 Vue CLI:

    npm install -g @vue/cli
    
  2. 创建一个新的 Vue3 项目:

    vue create vue-mouseover-button
    
  3. 选择默认的配置选项,等待项目创建完成。

添加鼠标经过显示按钮的功能

接下来,我们需要在 Vue3 项目中添加鼠标经过显示按钮的功能。具体步骤如下:

  1. 在 src/components 目录下创建一个新的组件文件 MouseoverButton.vue,并添加以下代码:

    <template><div class="mouseover-button" @mouseover="showButton" @mouseleave="hideButton"><div class="content"><slot></slot></div><button class="button" v-show="show">Click me!</button></div>
    </template><script>
    import { ref } from 'vue'export default {setup(props, { emit }) {const show = ref(false)const showButton = () => {show.value = true}const hideButton = () => {show.value = false}return {show,showButton,hideButton}}
    }
    </script><style scoped>
    .mouseover-button {position: relative;display: inline-block;
    }.content {display: inline-block;
    }.button {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);padding: 10px 20px;background-color: #42b983;color: #fff;border: none;border-radius: 5px;cursor: pointer;
    }
    </style>
    

    在这个组件中,我们使用了 @mouseover 和 @mouseleave 事件来监听鼠标的移入和移出事件。当鼠标移入时,我们将 show 的值设为 true,从而显示按钮;当鼠标移出时,我们将 show 的值设为 false,从而隐藏按钮。

    注意,我们在 setup 函数中使用了 Vue3 的新特性——Composition API。通过 ref 函数来创建响应式的数据,这样当 show 的值改变时,组件会自动更新视图。

  2. 在 App.vue 文件中使用 MouseoverButton 组件,并添加一些内容:

    <template><div class="app"><MouseoverButton><h1>Hello, Vue3!</h1><p>Move your mouse over me to see the button.</p></MouseoverButton></div>
    </template><script>
    import MouseoverButton from './components/MouseoverButton.vue'export default {name: 'App',components: {MouseoverButton}
    }
    </script><style>
    .app {text-align: center;margin-top: 100px;
    }
    </style>
    

    在这个组件中,我们使用了 MouseoverButton 组件,并在其中添加了一些内容。当鼠标移入这个组件时,会显示一个按钮,用户可以点击这个按钮来触发一些操作。

    注意,我们在这里使用了 import 和 export 语法来导入和导出组件。这是 ES6 中的语法,Vue3 默认使用的是 ES6 模块化。另外,我们使用了 name 属性来给组件命名。

运行项目

现在,我们已经完成了鼠标经过显示按钮的功能,可以运行项目来查看效果了。在终端中执行以下命令:

npm run serve

然后在浏览器中访问 http://localhost:8080,就可以看到我们创建的http://localhost:8080/ Vue3 应用了。当鼠标移入页面中的 MouseoverButton 组件时,会显示一个按钮,用户可以点击这个按钮来触发一些操作。

总结

本篇文章介绍了如何使用 Vue3 实现一个鼠标经过显示按钮的效果。我们使用了 Vue3 的 Composition API 来创建响应式的数据,并使用了 @mouseover 和 @mouseleave 事件来监听鼠标的移入和移出事件。通过这个例子,我们可以了解到 Vue3 的一些基本用法和特性。希望这篇文章能对你有所帮助!

相关文章:

vue3鼠标经过显示按钮

在前端开发中&#xff0c;我们经常需要在页面中添加一些交互效果来提升用户体验。其中一个常见的需求就是鼠标经过某个元素时显示一个按钮&#xff0c;这个按钮可以用于触发一些操作或者显示更多的内容。 在本篇文章中&#xff0c;我将会介绍如何使用 Vue3 实现一个鼠标经过显…...

【2023华为OD笔试必会25题--C语言版】《18 最短木板长度》——数组

本专栏收录了华为OD 2022 Q4和2023Q1笔试题目,100分类别中的出现频率最高(至少出现100次)的25道,每篇文章包括原始题目 和 我亲自编写并在Visual Studio中运行成功的C语言代码。 仅供参考、启发使用,切不可照搬、照抄,查重倒是可以过,但后面的技术面试还是会暴露的。✨✨…...

yolov5车道线检测+测距(碰撞检测)

yolov5车道线检测+测距(碰撞检测) 1. 车道线检测2. 测距2.1 测距原理2.2 相机标定2.2.1:标定方法12.2.2:标定方法23. 相机测距3.1 测距添加3.2 主代码4. 实验结果相关链接 1. 基于yolov5的车道线检测及安卓部署 2. YOLOv5+单目测距(python) 3. 具体实现效果...

微服务学习笔记--(Gateway网关)

统一网关Gateway 为什么需要网关gateway快速入门断言工厂过滤器工厂全局过滤器跨域问题 Gateway网关-网关作用介绍 为什么需要网关 网关功能&#xff1a; 身份认证和权限校验服务路由、负载均衡请求限流 网关的技术实现 在SpringCloud中网关的实现包括两种&#xff1a; …...

QML插件的创建及调用

QML插件的创建及调用 创建QML Plugin注册插件调用插件 创建QML Plugin 1、 注册插件 1、可以将qml文件放在qmldir中进行声明。 此种方式需要将qml文件和qmldir放在一起 module EularFrame plugin EularFrameEButton 1.0 MyButton.qml2、可以在*plugin.cpp注册 此种方式只需…...

数据结构学习分享之树的介绍

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:数据结构学习分享⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你了解更多数据结构的知识   &#x1f51d;&#x1f51d; 数据结构第六课 1. 前言&a…...

MySQL数据库基础2

文章目录 数据类型表的约束 数据类型 1、数值类型&#xff1a;BIT、TINYINT、BOOL、SMALLINT、INT、BIGINT、FLOAT[(M,D)]、DOUBLE[(M,D)]、DECIMAL[(M,D)] FLOAT[(M,D)]&#xff1a;占用四个字节&#xff0c;M表示显示位数&#xff0c;D表示小数位数&#xff0c;精度保证&am…...

AutoSAR PNC和ComM

文章目录 PNC和ComMPNC管理NM PDU结构及PNC信息位置如何理解节点关联PNCPNC状态管理 ComM 通道状态管理 PNC和ComM PNC 和 ComM层的Channel不是一个概念&#xff0c;ComM的Channel对应具体的物理总线数。 在ComM模块中&#xff0c;一个Channel可以对应一个PNC&#xff0c;也可…...

Android studio Camera2实现的详细流程

流程 一、获取CameraManager实例二、获取可用的相机列表三、选择一个相机并打开它四、创建一个CaptureRequest.Builder对象五、设置CaptureRequest.Builder对象的参数六、创建一个CaptureSession对象七、开始预览 代码示例 一、获取CameraManager实例 CameraManager manager (…...

阿里云数据库ClickHouse产品和技术解读

摘要&#xff1a;社区ClickHouse的单机引擎性能十分惊艳&#xff0c;但是部署运维ClickHouse集群&#xff0c;以及troubleshoot都不是很好上手。本次分享阿里云数据库ClickHouse产品能力和特性&#xff0c;包含同步MySQL库、ODPS库、本地盘及多盘性价比实例以及自建集群上云的迁…...

分子动力学基础知识

分子动力学基础知识 目前主要存在两种基本模型&#xff1a;其一为量子统计力学, 其二为经典统计力学。 量子统计力学 基于量子力学原理, 适用 于微观的, 小尺度, 短时 间的模拟&#xff0c;可以描述电子 的结构分布&#xff0c;原子间的成 键断键等化学性质。 经典纭计力学…...

USB转UART转串口芯片 GP232RNL国产低成本替代FT232RL/FT232RNL

近期收到很多人咨询FT232RL跟新版FT232RNL两者有什么区别&#xff0c;实际上就是内部做了一点升级&#xff0c;FT232RNL支持Windows11系统&#xff0c;参数并没有改动&#xff0c;完全可以直接替换使用。 今天小编给大家讲讲FT232RNL国产低成本替代芯片–GP232RNL GP232RNL 是…...

第03讲:SpringCloudStream实现分布式事务

需求分析 本案例是通过一个发送短信验证码的功能来实验MQ发送消息时实现分布式事务&#xff0c;思路分析如下 消息生产者生产发送验证码的半消息 生产者执行本地事务&#xff08;将验证码保存到数据库&#xff09;&#xff0c;并记录事务的ID&#xff0c;如果整个过程不出现异…...

【从零开始学Skynet】高级篇(一):Protobuf数据传输

1、什么是Protobuf Protobuf是谷歌发布的一套协议格式&#xff0c;它规定了一系列的编码和解 码方法&#xff0c;比如对于数字&#xff0c;它要求根据数字的大小选择存储空间&#xff0c;小于等于15的数字只用1个字节来表示&#xff0c;大于15的数用2个字节表示&#xff0c;以此…...

快速入门Lombok

Lombok是一个Java库&#xff0c;可以通过注解的方式来简化Java代码&#xff0c;它可以自动生成Getter、Setter、构造函数等代码&#xff0c;从而减少重复的模板代码。下面是Lombok的使用详情&#xff1a; 1. 添加Lombok依赖 在使用Lombok之前&#xff0c;我们需要先添加Lombo…...

Linux 常见命令与常见问题解决思路

Linux 常见命令 Linux 基础命令目录相关查看文件&#xff08;日志&#xff09;查看普通的文件查看压缩的文件 解压压缩Linux 系统调优topvmstatpidstatps vi/vim 编辑文件查找文件属性相关定时任务scp 复制文件和目录awk 分隔cutsort 与 uniq常见问题处理思路CPU 高系统平均负载…...

用GPT-4 写2022年天津高考作文能得多少分?

正文共 792 字&#xff0c;阅读大约需要 3 分钟 学生必备技巧&#xff0c;您将在3分钟后获得以下超能力&#xff1a; 积累作文素材 Beezy评级 &#xff1a;B级 *经过简单的寻找&#xff0c; 大部分人能立刻掌握。主要节省时间。 推荐人 | Kim 编辑者 | Linda ●图片由Lexica …...

Django如何把SQLite数据库转换为Mysql数据库

大部分新手刚学Django开发的时候默认用的都是SQLite数据库&#xff0c;上线部署的时候&#xff0c;大多用的却是Mysql。那么我们应该如何把数据库从SQLite迁移转换成Mysql呢&#xff1f; 之前我们默认使用的是SQLite数据库&#xff0c;我们开发完成之后&#xff0c;里面有许多数…...

使用apisix代理静态文件

前言 最近公司考虑用apisix作为公司网关并且部署到k8s上&#xff0c;我这边收到一个小任务&#xff1a;使用apisix代理静态文件 通过apisix官网了解到它构建于 NGINX ngx_lua 的技术基础之上&#xff0c;所以按理应该和nginx代理静态资源是一样的。因为是通过docker容器部署…...

[元带你学NVMe协议] NVMe1.4 多路径(Multipathing)

声明 主页:元存储的博客_CSDN博客 依公开知识及经验整理,如有误请留言。 个人辛苦整理,付费内容,禁止转载。 内容摘要 全文9100字, 主要内容 目录 前言 1 多路径(Multipathing)概念...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

TJCTF 2025

还以为是天津的。这个比较容易&#xff0c;虽然绕了点弯&#xff0c;可还是把CP AK了&#xff0c;不过我会的别人也会&#xff0c;还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...

python打卡day49@浙大疏锦行

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 一、通道注意力模块复习 & CBAM实现 import torch import torch.nn as nnclass CBAM(nn.Module):def __init__…...